What is two-way binding in Vue and how does v-model work?

Expected Interview Answer

Step-by-Step Explanation

1. Step 1

   Understand the two directions

   State changes update the input, and user input updates the state — both automatically.

2. Step 2

   Use v-model on inputs

   Add v-model="name" to a text input to bind :value and the input event together.

3. Step 3

   See the sugar

   v-model expands to :value plus @input on native elements, writing changes back to state.

4. Step 4

   Support it on components

   Accept a modelValue prop and emit update:modelValue to make a custom component v-model-compatible.

5. Step 5

   Apply modifiers

   Use .lazy, .number, or .trim to change when and how the bound value is updated.

Code Example

<template>
  <!-- Shorthand -->
  <input v-model="name" />

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

  <!-- On a custom component -->
  <CustomInput v-model="name" />
  <!-- expands to :model-value + @update:model-value -->
</template>

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

Follow-up Questions

• How do you make a custom component work with v-model?
• What does the .lazy modifier change about v-model?
• How do you bind multiple v-models on one component?
• Why should you never mutate the modelValue prop directly?
• How does v-model differ from one-way v-bind?