How does v-model work under the hood?

v-model is Syntactic Sugar

v-model is a two-way binding shorthand. Under the hood it's equivalent to:

• Binding the value prop (passing data to the child or form element)
• Listening to the input event (receiving changes from the child or user)

On Native Form Elements

<!-- Using v-model -->
<input v-model="name" />

<!-- Equivalent to -->
<input :value="name" @input="name = $event.target.value" />

v-model on Vue 3 Components

<!-- Parent component -->
<MyInput v-model="searchText" />

<!-- Equivalent to -->
<MyInput
  :modelValue="searchText"
  @update:modelValue="searchText = $event"
/>

<!-- Child component: MyInput.vue -->
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

Multiple v-model in Vue 3

Vue 3 supports multiple v-model bindings on a single component:

<UserForm
  v-model:firstName="first"
  v-model:lastName="last"
/>

<!-- UserForm.vue -->
<script setup>
defineProps(['firstName', 'lastName'])
defineEmits(['update:firstName', 'update:lastName'])
</script>

Vue 2 vs Vue 3

	Vue 2	Vue 3
Prop name	value	modelValue
Event name	input	update:modelValue
Multiple v-model	❌ (use .sync)	✅ Native support