Form bindings

Vue forms stay predictable when inputs read from reactive state and write back through the same source. v-model is syntactic sugar for that two-way binding on supported elements—text fields, checkboxes, selects, and radio groups.

Controlled inputs

Bind :value (or :checked) and listen for @input / @change, or use v-model on a ref. The ref is the single source of truth—never let the DOM hold shadow state you do not read on submit.

Modifiers

• v-model.lazy — sync on change instead of every keystroke
• v-model.number — coerce to number when possible
• v-model.trim — trim whitespace on text inputs

Compared to React

React uses explicit value + onChange on every field. Vue’s v-model hides the wiring but the mental model is identical: one reactive value drives the input.

Important interview questions and answers

1. Q: What does v-model expand to on a text input?
   A: :value="x" and @input="x = $event.target.value" (Vue 3 uses modelValue on custom components).
2. Q: Why avoid uncontrolled inputs in Vue SPAs?
   A: You lose predictable state for validation, reset, and server sync.

Self-check

1. Which modifier waits until blur to update state?
2. Where should validation errors live—in the DOM or in refs?

Tip: Checkbox v-model binds boolean; radio groups need the same v-model on each input with distinct value.