What is defineModel() in Vue 3.4+ and how does it replace manual prop + emit?

Q: What is defineModel() in Vue 3.4+ and how does it replace manual prop + emit?

**Target Audience:** Vue 3 developers who know the [component v-model contract](/interview-question/how-does-v-model-work-on-components) and want to know what `defineModel()` really does. **Difficulty:** Medium > **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. The compiled output is from `@vue/compiler-sfc` 3.5.44 `compileScript()`, and every value read after a click or keystroke came from mounting the components in jsdom on Vue 3.5.44. Version history comes from the Vue release announcements, cited inline. ## 1. Why This Even Matters — A Story First Remember filling in a paper form at the bank: your name in a box, then a carbon copy that goes to the clerk. Before carbon paper you wrote everything twice, and copies drifted apart whenever you forgot one. Before Vue 3.4, every component that supported `v-model` was written twice in the same way: declare a prop, declare an event, and write a computed with a getter that reads the prop and a setter th

The problem

Question presented to candidate: "Our codebase has dozens of components with a modelValue prop, an update:modelValue emit and a writable computed in between. A colleague wants to replace them all with defineModel(). What does defineModel actually generate, what behaves differently from the manual version, and is there anything that could bite us during the migration?"

What a strong answer should cover:

defineModel() is a compiler macro (stable since Vue 3.4, experimental in 3.3) that declares the modelValue prop, a modelModifiers prop and the update:modelValue emit, and returns a ref built with useModel().
Reading the ref gives the prop; assigning it emits the update event. Named models: defineModel('title').
If the parent passes no v-model, the ref works as local state (the manual version cannot do that without extra code).
When the parent does bind it, the ref only changes after the parent re-renders, so a read right after assignment returns the old value.
A default that the parent does not have leaves parent and child out of sync until the first emit.
Options (type, required, default) go to the prop; get/set transform values, which is how custom modifiers are implemented.

Clarifying questions expected:

"Do any of these components rely on reading the new value immediately after setting it?"
"Are they TypeScript components? Then defineModel<string>() gives the prop type."

Code / implementation expected: Yes. A component using defineModel, and ideally the compiled output or the useModel equivalent.

vue-3.4
defineModel
v-model

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Vue 3 developers who know the component v-model contract and want to know what defineModel() really does. Difficulty: Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts. The compiled output is from @vue/compiler-sfc 3.5.44 compileScript(), and every value read after a click or keystroke came from mounting the components in jsdom on Vue 3.5.44. Version history comes from the Vue release announcements, cited inline.

1. Why This Even Matters — A Story First

Remember filling in a paper form at the bank: your name in a box, then a carbon copy that goes to the clerk. Before carbon paper you wrote everything twice, and copies drifted apart whenever you forgot one.

Before Vue 3.4, every component that supported v-model was written twice in the same way: decl

The solution is hidden so you can try first

9 min read · 10 sections

Read the code

VueWhat defineModel compiles to: useModel() with a prop and emit, bound and unbound

Open in playground

<script setup>
import { ref, defineComponent, h, useModel } from "vue";

// In a .vue file you would write: const count = defineModel({ type: Number, default: 0 })
// The compiler turns that into exactly this: a prop, its emit, and useModel()
const Counter = defineComponent({
  props: { modelValue: { type: Number, default: 0 }, modelModifiers: {} },
  emits: ["update:modelValue"],
  setup(props) {
    const count = useModel(props, "modelValue");
    return () =>
      h("button", { onClick: () => count.value++ }, `count: ${count.value}`);
  },
});

const total = ref(5);
</script>

<template>
  <!-- bound: the parent owns the value -->
  <Counter class="bound" v-model="total" />
  <p>parent total = {{ total }}</p>

  <!-- not bound: the child keeps a local value instead -->
  <Counter class="local" />
</template>

VuedefineModel in real SFCs: default value, local mode and a custom modifier

<!-- Counter.vue -->
<script setup>
const count = defineModel({ type: Number, default: 1 });
function inc() {
  count.value++;
  console.log(`  [child] right after count.value++ -> count.value = ${count.value}`);
}
</script>
<template><button @click="inc">{{ count }}</button></template>

<!-- TitleInput.vue -->
<script setup>
const [title, modifiers] = defineModel("title", {
  set(value) {
    return modifiers.capitalize ? value.charAt(0).toUpperCase() + value.slice(1) : value;
  },
});
</script>
<template><input class="title" :value="title" @input="title = $event.target.value" /></template>

<!-- App.vue -->
<script setup>
import { ref } from "vue";
import Counter from "./Counter.vue";
import TitleInput from "./TitleInput.vue";
const bound = ref(10);
const unset = ref();
const heading = ref("");
</script>
<template>
  <Counter id="a" v-model="bound" />
  <Counter id="b" />
  <Counter id="c" v-model="unset" />
  <TitleInput v-model:title.capitalize="heading" />
  <p>bound={{ bound }} unset={{ String(unset) }} heading={{ JSON.stringify(heading) }}</p>
</template>

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.