Practice Questions

Why is v-model syntax sugar, and what does it expand to?

LowIntermediateVue

By FrontendAtlas Team · Updated Jan 30, 2026

Preparing for interviews?

Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.

Explore interview tracks Browse company questions Open Vue prep path

Quick Answer

Explain why v-model is considered syntax sugar in Vue: it’s compiled into a prop binding + an event listener. Show what it expands to for native form elements (text input, checkbox, select) and for custom components in Vue 3 (modelValue + update:modelValue). Include how v-model arguments (v-model:foo) and common modifiers (.trim, .number, .lazy) change the expansion.

Answer

Core idea

v-model is syntax sugar because it doesn’t add a new runtime “two-way binding engine”. Vue’s template compiler rewrites it into:
1) a prop/attribute binding (state → DOM/component)
2) an event listener (DOM/component → state)

So it’s just a shorter way to write “bind value + update on event”.

Usage	Expands to (conceptually)	Notes
`<input v-model="msg" />`	`:value="msg"` + `@input="msg = $event.target.value"`	Text-like inputs use `input` event.
`<input type="checkbox" v-model="ok" />`	`:checked="ok"` + `@change="ok = $event.target.checked"`	Checkbox binds `checked`, not `value`.
`<select v-model="pick">...`	`:value="pick"` + `@change="pick = $event.target.value"`	Select updates on `change`.
`<MyComp v-model="val" />` (Vue 3)	`:modelValue="val"` + `@update:modelValue="val = $event"`	Custom components use `modelValue` + `update:modelValue` by default.
`<MyComp v-model:title="title" />` (Vue 3)	`:title="title"` + `@update:title="title = $event"`	Argument changes prop/event name.

What v-model expands to (high level)

Native input example (the “long form”)

HTML

<template>
  <!-- Sugar -->
  <input v-model="msg" />

  <!-- Desugared -->
  <input
    :value="msg"
    @input="msg = $event.target.value"
  />
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('hello');
</script>

Checkbox + select (different DOM properties/events)

People call v-model “smart sugar” because it chooses the correct DOM property and event per form control.

HTML

<template>
  <!-- Checkbox: checked + change -->
  <input type="checkbox" v-model="ok" />
  <input
    type="checkbox"
    :checked="ok"
    @change="ok = $event.target.checked"
  />

  <!-- Select: value + change -->
  <select v-model="pick">
    <option value="a">A</option>
    <option value="b">B</option>
  </select>
  <select
    :value="pick"
    @change="pick = $event.target.value"
  >
    <option value="a">A</option>
    <option value="b">B</option>
  </select>
</template>

<script setup>
import { ref } from 'vue';
const ok = ref(false);
const pick = ref('a');
</script>

Custom components (Vue 3): modelValue + update:modelValue
<br>For components, v-model becomes a normal prop + a normal emitted event. The parent “listens” and assigns.

HTML

<!-- Parent.vue -->
<template>
  <!-- Sugar -->
  <UserNameInput v-model="name" />

  <!-- Desugared -->
  <UserNameInput
    :modelValue="name"
    @update:modelValue="name = $event"
  />
</template>

<script setup>
import { ref } from 'vue';
import UserNameInput from './UserNameInput.vue';

const name = ref('Müslüm');
</script>

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

<script setup>
defineProps({
  modelValue: { type: String, required: true }
});

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

v-model arguments (Vue 3): v-model:foo

Arguments just swap the prop/event names. This enables multiple v-model bindings on one component.

HTML

<!-- Parent.vue -->
<template>
  <RangePicker v-model:start="start" v-model:end="end" />
</template>

<script setup>
import { ref } from 'vue';
import RangePicker from './RangePicker.vue';

const start = ref('2025-01-01');
const end = ref('2025-12-31');
</script>

<!-- RangePicker.vue -->
<template>
  <input :value="start" @input="$emit('update:start', $event.target.value)" />
  <input :value="end" @input="$emit('update:end', $event.target.value)" />
</template>

<script setup>
defineProps({
  start: String,
  end: String
});

defineEmits(['update:start', 'update:end']);
</script>

Modifiers (.trim, .number, .lazy) change the update expression

Modifiers don’t change the “prop + event” structure, they change how the incoming value is read/coerced and when updates happen.

Modifier	Effect	Desugared idea
`.trim`	Trims whitespace	`msg = $event.target.value.trim()`
`.number`	Coerces to number	`age = Number($event.target.value)`
`.lazy`	Updates on change/blur-like timing instead of input	Uses `@change` instead of `@input` for text inputs

How v-model modifiers affect the expansion

Interview-ready takeaway

v-model is compile-time sugar for “bind current value + listen and assign updates”. For native inputs it picks the correct DOM property/event. For components in Vue 3 it maps to modelValue + update:modelValue (or v-model:arg → arg + update:arg).