How does Vue v-model work syntactically under the hood?

WHAT THIS TESTS: Whether you understand that v-model is a compile-time abstraction over one-way prop binding and event listening. Senior interviewers care if you can see through framework sugar to the underlying reactivity pattern, because that predicts how you debug binding issues, build custom inputs, or reason about component contracts.

A GOOD ANSWER COVERS: Four things in order. First, the manual equivalent for a text input is binding the value attribute with colon value and listening to the at input event, setting the state to event target value. Second, v-model automatically picks the correct DOM property and event pair based on the element type: text inputs and textareas use value and input; checkboxes and radios use checked and change; select elements use value and change. Third, v-model ignores any initial value, checked, or selected attributes on the markup and treats the bound JavaScript state as the single source of truth, so initial values must be declared in data or refs. Fourth, on custom components v-model is syntax sugar for modelValue prop and update modelValue event, though the question focuses on form elements.

COMMON WRONG ANSWERS: Saying v-model is true two-way binding built into the runtime engine rather than syntax sugar. Claiming it works by watching the DOM directly. Forgetting that checkboxes and radios use checked and change instead of value and input. Stating that HTML initial attributes matter for the starting value. Giving only the text input expansion and blanking on checkboxes or selects.

LIKELY FOLLOW-UPS: How would you implement a custom component that supports v-model? What is the difference between v-model and a manual value plus event handler when you need IME composition support? How do modifiers like lazy, number, and trim change the event or parsing behavior? Can you have multiple v-model bindings on a single custom component in Vue 3?

ONE CONCRETE EXAMPLE: If you have an input with v-model equals message, the compiler effectively rewrites it to an input element with colon value equals message and at input equals event arrow message equals event target value. If you switch to a checkbox with v-model equals isActive, the expansion becomes colon checked equals isActive and at change equals event arrow isActive equals event target checked. Knowing these exact pairs lets you write custom form controls without guessing which prop to accept.