v-model on your own component with defineModel

Before, you declared a modelValue prop and emitted update:modelValue. Now:

<script setup>
const model = defineModel()
</script>

<template>
  <input v-model="model" />
</template>

The parent uses it like any input:

<SearchField v-model="query" />

Named models work too: defineModel('checked') pairs with v-model:checked. Add a default or a type the way you would for a prop: defineModel({ type: String, default: '' }).