Question
Vue 3 v-model on custom component silently breaks when using legacy prop names
Rey Nova
0 reputation · 16 Dec 2023, 12:21 UTC
36.8K views0
Problem
A Vue 3 component that still exposes a value prop and emits an input event will not react to v-model bindings in the parent. The directive silently ignores the binding, leaving the parent state unchanged.
Goal
Determine the exact conditions that cause v-model to fail on a custom component and establish a reliable migration pattern from Vue 2’s implicit value/input pair to Vue 3’s explicit modelValue/update:modelValue contract.
Constraints & Uncertainty
- Component may or may not declare
modelValueinprops. - Emits list may omit
update:modelValueor retain legacyinput. - Parent uses
v-modelwithout specifying a modifier or custom event name.
Questions
- When a Vue 3 component declares only a
valueprop and emitsinput, does the framework provide any warning or diagnostic about the missingmodelValuecontract? - What is the precise sequence of prop and event declarations required for
v-modelto function correctly on a custom component in Vue 3? - Is there a backward‑compatibility mode or a migration helper that automatically maps
value/inputtomodelValue/update:modelValueduring the upgrade?