What bindings do v-model and ngModel sugar, and why?

WHAT THIS TESTS: This question probes whether you understand that two-way binding directives are compiler sugar rather than runtime magic. Interviewers want to see that you can decompose v-model and ngModel into their constituent one-way property binding and event binding parts, and that you grasp why unidirectional data flow is the bedrock of maintainable component architectures. Senior candidates should connect this pattern to framework-agnostic principles like the single source of truth and explicit change notification.

A GOOD ANSWER COVERS: First, the mechanical decomposition. In Vue, v-model on a native input roughly expands to binding the value attribute and listening for the input event. In Angular, the banana-in-a-box syntax [(ngModel)] is shorthand for a property binding [ngModel] paired with an event binding (ngModelChange). Second, the directionality. Props down means the parent passes state to the child via inputs; events up means the child notifies the parent of changes through outputs, letting the parent mutate the canonical state. Third, the architectural rationale. This pattern prevents hidden side effects, makes data flow traceable, and allows child components to remain presentational and reusable across different parent contexts. Fourth, the custom component angle. Both frameworks let you define custom v-model or ControlValueAccessor implementations, which still obey the same two-part contract: accept a value, emit a change event.

COMMON WRONG ANSWERS: A red flag is describing the syntax as true bidirectional data flow where the child mutates the parent object directly. Another mistake is conflating ngModel with reactive forms or failing to name the specific event that carries the change. Some candidates say it is just for convenience without explaining why the underlying one-way flow matters, which signals shallow familiarity. Claiming that two-way binding breaks unidirectional data flow is also incorrect; the syntax preserves it by design.

LIKELY FOLLOW-UPS: An interviewer might ask how to implement a custom v-model in Vue using modelValue and update:modelValue, or how Angular ControlValueAccessor bridges template-driven and reactive forms. They could also ask how this pattern compares to React controlled components, or when you should avoid two-way binding in favor of explicit one-way plus callback props.

ONE CONCRETE EXAMPLE: Imagine a numeric stepper component. With props down, the parent passes count={5} into the stepper. When the user clicks plus, the stepper does not increment its own copy; instead it emits an onChange event with the new value. The parent receives the event, updates its own state, and the new count flows back down. This loop keeps the parent as the single source of truth and makes the stepper trivial to test in isolation because it has no internal state to manage.