Suggest an edit

Improve this article

Refine the answer for “What is the difference between value and modelValue?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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:

```js
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:

```js
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)">
```

Markdown · drag & drop images · ⌘B / ⌘I shortcuts335 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.