What is the difference between value and modelValue?

VueJunior~1 min read

The difference between value and modelValue is directly tied to how v-model works in Vue 2 and Vue 3, especially inside custom components.

This is a very common interview question.

Short answer

value was used for v-model in Vue 2, as the default prop.
modelValue is used in Vue 3 as the standard prop for v-model.

That is:

Vue 2: v-model works through value + input Vue 3: v-model works through modelValue + update:modelValue

Vue 2: v-model → value + input

If in Vue 2 a component uses v-model:

html

<MyInput v-model="text" />

Then inside the component:

the prop must be called value
the event must be called input

Example:

props: ['value'],

methods: {
  update(e) {
    this.$emit('input', e.target.value)
  }
}

And the input will look like this:

html

<input :value="value" @input="update">

Vue 3: v-model → modelValue + update:modelValue

In Vue 3, a new, more logical and flexible standard was introduced.

Now v-model:

html

<MyInput v-model="text" />

translates to:

the prop modelValue
the event update:modelValue

The component:

props: {
  modelValue: String
},
emits: ['update:modelValue']

Template:

html

<input
  :value="modelValue"
  @input="$emit('update:modelValue', $event.target.value)"
>

Why did this change appear in Vue 3?

1. To support multiple `v-model` bindings on one component

In Vue 3 you can:

html

<DatePicker
  v-model:start="startDate"
  v-model:end="endDate"
/>

This works through:

the prop start, the event update:start
the prop end, the event update:end

This kind of system cannot be flexibly implemented with value.

The main difference

What	Vue 2	Vue 3
Default prop	`value`	`modelValue`
Update event	`input`	`update:modelValue`
Multiple v-model	not possible	possible
Standardization	weak	strict, predictable

"Before / after" comparison example

Vue 2 component:

vue

<input :value="value" @input="$emit('input', $event.target.value)">

Vue 3 component:

vue

<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.