A Note Field

A component can also wrap a text field. A search box for the menu, with a button that empties it, can be a component of its own:

<script setup>
const search = defineModel();
</script>

<template>
    <input v-model="search" placeholder="Search the menu">
    <button @click="search = ''">Clear</button>
</template>

v-model="search" on the <input> connects the field to the component's model, and v-model in the parent connects the model to the parent's variable:

<SearchBox v-model="search" />

So what the customer types goes all the way into the parent's search, and the parent can filter the menu with it, in a computed value. A click on Clear sets the model to '', which empties the parent's search, and with it the field.

The component adds what belongs to the field: its look, a label or a hint, the Clear button. The parent just writes <SearchBox v-model="search" /> and doesn't have to care about the details. Here, too, the data lives in one place, the parent, and the component only shows it and changes it through the model.