How does v-model work on form inputs? | Interview Question

Q: How does v-model work on form inputs?

**Target Audience:** Vue beginners building their first forms. Assumes HTML form elements and a little JavaScript. **Difficulty:** Easy > **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. Every state dump, compiler snippet and compiler error below came from running Vue 3.5.44: templates compiled with `@vue/compiler-sfc` / `@vue/compiler-dom`, mounted in jsdom, with a driver typing, clicking and selecting. ## 1. Why This Even Matters — A Story First Picture a whiteboard in a shared office and a notebook on your desk that must always say the same thing. Without help, you would copy every change by hand: someone writes on the whiteboard, you update the notebook; you change the notebook, you walk over and rewrite the whiteboard. Forget once and they drift apart. A form field is the whiteboard (the user writes on it) and your component state is the notebook (your code writes on it). `v-model` is the assistant who copies in both directions, instantly, ev

The problem

Question presented to candidate: "We have a sign-up form with a name field, a bio textarea, a terms checkbox, topping checkboxes, a size radio group and a country dropdown. Explain how v-model keeps each of these in sync with component state, and what it actually does under the hood."

What a strong answer should cover:

v-model is two-way binding sugar: it writes state into the element and listens for the element's event to write back.
The property and event differ by element: text and textarea use value + input; checkbox and radio use checked + change; select uses value + change.
A single checkbox binds a boolean (or true-value/false-value); several checkboxes bound to one array collect their values; a multiple select binds an array.
v-model ignores the initial value, checked or selected attributes: state is the single source of truth.
Text inputs wait for IME composition to finish before updating.
It compiles to a runtime directive (vModelText, vModelCheckbox, ...) plus an onUpdate:modelValue handler; the expression must be assignable.

Clarifying questions expected:

"Should the field update on every keystroke or only on blur?" (leads into modifiers)
"Is any of these a custom component rather than a native element?"

Code / implementation expected: Yes. A form with at least a text input, a checkbox group and a select, showing the bound state.

vue
v-model
forms

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Vue beginners building their first forms. Assumes HTML form elements and a little JavaScript. Difficulty: Easy

How to read this doc: Plain language first, then 📌 Interview term: callouts. Every state dump, compiler snippet and compiler error below came from running Vue 3.5.44: templates compiled with @vue/compiler-sfc / @vue/compiler-dom, mounted in jsdom, with a driver typing, clicking and selecting.

1. Why This Even Matters — A Story First

Picture a whiteboard in a shared office and a notebook on your desk that must always say the same thing. Without help, you would copy every change by hand: someone writes on the whiteboard, you update the notebook; you change the notebook, you walk over and rewrite the whiteboard. Forget once and they drift apart.

A form field is the whiteboard (the user writes on it) and your component state is the notebo

The solution is hidden so you can try first

8 min read · 10 sections

Read the code

Vuev-model on every native form control

Open in playground

<script setup>
import { ref } from "vue";

const name = ref("Ada");
const bio = ref("");
const agreed = ref(false);
const toppings = ref(["cheese"]);
const size = ref("M");
const country = ref("");
const tags = ref([]);
const plan = ref("monthly");
</script>

<template>
  <input class="name" v-model="name" />
  <textarea class="bio" v-model="bio"></textarea>

  <!-- single checkbox: boolean (or true-value / false-value) -->
  <input class="agree" type="checkbox" v-model="agreed" />
  <input class="plan" type="checkbox" v-model="plan" true-value="yearly" false-value="monthly" />

  <!-- several checkboxes bound to one array -->
  <input class="t1" type="checkbox" value="cheese" v-model="toppings" />
  <input class="t2" type="checkbox" value="olives" v-model="toppings" />

  <!-- radios: the selected value -->
  <input class="s" type="radio" value="S" v-model="size" />
  <input class="m" type="radio" value="M" v-model="size" />

  <select class="country" v-model="country">
    <option disabled value="">Pick one</option>
    <option>India</option>
    <option>Japan</option>
  </select>

  <select class="tags" v-model="tags" multiple>
    <option>vue</option>
    <option>ts</option>
    <option>css</option>
  </select>

  <pre>{{ { name, bio, agreed, plan, toppings, size, country, tags } }}</pre>
</template>

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.