Пропсы

Три эспрессо — это ещё не меню. Каждый MenuItem должен показывать свой пункт, поэтому компонент должен получать данные от своего родителя — компонента, который его использует, здесь это App.vue. Для этого и нужны пропсы (от английского properties, «свойства»): значения, которые родитель передаёт компоненту, записывая их как атрибуты HTML-элемента:

<MenuItem name="Эспрессо" :price="2" />
<MenuItem name="Зелёный чай" :price="3" />

Компонент объявляет, какие пропсы он принимает, через defineProps в своём <script setup> и использует их в шаблоне как переменные:

<script setup>
defineProps({
    name: { type: String, required: true },
    price: { type: Number, required: true },
});
</script>

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

У каждого пропа есть имя и объект, который его описывает:

• type — вид значения: String для текста, Number для числа, Boolean для true или false, Array или Object.
• required: true означает, что родитель обязан передать проп.
• default — значение пропа, когда родитель его не передал, например category: { type: String, default: "кофе" }.

Vue проверяет пропсы во время работы приложения, и если проп не передан или у него не тот тип, сообщает об этом в консоли: [Vue warn]: Missing required prop: "name". А defineProps импортировать не нужно: в <script setup> Vue знает его сам.

Обратите внимание на двоеточие в :price="2". Это v-bind, который вы знаете по :src: значение в кавычках — это JavaScript, поэтому :price="2" передаёт число 2. Без двоеточия проп — всегда текст. price="2" передаёт текст "2", и Vue предупреждает:

[Vue warn]: Invalid prop: type check failed for prop "price". Expected Number with value 2, got String with value "2".

Поэтому текст пишите без двоеточия, как в name="Эспрессо", а всё остальное — с ним: числа, true и false, переменные.