Problem Statement
How do you enable v-model on a custom component in Vue 3?
Explanation
Implement a prop named modelValue and emit an update:modelValue event when internal state changes. Consumers can then use v-model on your component. You can also support multiple v-model bindings with the v-model:arg syntax.
Code Solution
SolutionRead Only
// Child
export default {
props: { modelValue: String },
emits: ['update:modelValue']
}
// Template
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />