What is `v-model` and how does it work with custom components?

v-model is syntactic sugar for two-way binding. On a form element, v-model="text" expands roughly to :value="text" @input="text = $event.target.value".

On a custom component, v-model binds to a modelValue prop and listens for an update:modelValue event:

<CustomInput v-model="searchText" />

// expands to:
<CustomInput :model-value="searchText" @update:model-value="searchText = $event" />

Inside the child:

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

Vue 3 also supports multiple v-model bindings using named arguments, e.g. v-model:title="...".