Список компонентов

Настоящее меню не пишут вручную, один <MenuItem> за другим. Оно берётся из данных, а данные показывают через v-for, который работает с компонентами так же, как с элементами:

<MenuItem v-for="item in menu" :key="item.id" :name="item.name" :price="item.price" />

Каждый пункт menu получает свой MenuItem со своими пропсами. :key ставят на компонент так же, как на <li>: по нему Vue отличает пункты друг от друга. Это не проп, поэтому компонент его не объявляет.

Когда компоненту нужна большая часть объекта, проще передать ему весь объект одним пропом:

<MenuItem v-for="item in menu" :key="item.id" :item="item" />

<script setup>
defineProps({
    item: { type: Object, required: true },
});
</script>

<template>
    <li class="item">
        <span>{{ item.name }}</span>
        <span class="price">€{{ item.price }}</span>
    </li>
</template>

Тип пропа — Object, а шаблон читает его поля, как у любого объекта: item.name. Когда у пунктов меню появится новое поле, скажем vegan, компонент сможет его показать, а App.vue не изменится вовсе.

И обратите внимание на двоеточие в :item="item". item слева — это имя пропа, а справа — JavaScript: переменная item из v-for, текущий пункт меню.