Поле для заметки

Компонент может быть и оболочкой для текстового поля. Строку поиска по меню с кнопкой, которая её очищает, можно сделать отдельным компонентом:

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

<template>
    <input v-model="search" placeholder="Поиск по меню">
    <button @click="search = ''">Очистить</button>
</template>

v-model="search" на <input> связывает поле с моделью компонента, а v-model в родителе связывает модель с переменной родителя:

<SearchBox v-model="search" />

Так что всё, что печатает покупатель, попадает прямо в search родителя, и родитель может отфильтровать по нему меню в вычисляемом значении. Нажатие на «Очистить» записывает в модель '', это очищает search родителя, а вместе с ним и поле.

Компонент добавляет то, что относится к полю: его вид, подпись или подсказку, кнопку «Очистить». Родителю достаточно написать <SearchBox v-model="search" />, и заботиться о подробностях ему не нужно. И здесь данные живут в одном месте, у родителя, а компонент только показывает их и меняет через модель.