Единый источник истины

У заказа теперь есть свой компонент, OrderList. Но закажите что-нибудь, и он по-прежнему пишет «Пока ничего не заказано». Всё потому, что у OrderList есть собственный order:

<script setup>
import { ref } from "vue";

const order = ref([]);
</script>

App.vue добавляет позиции в свой order, а OrderList показывает свой: это второй массив, в который никто ничего не добавляет. Две копии одних и тех же данных, а на странице показана не та.

То же самое выходит, когда компонент оставляет что-то у себя, хотя это нужно и другим частям страницы. Если бы MenuItem считал заказы в своём const count = ref(0);, позиция показывала бы ×2, а заказ и его сумма об этом не знали бы.

Поэтому каждая порция данных живёт в одном месте, это её единый источник истины. Если данные нужны нескольким компонентам, они живут в их общем родителе, здесь это App.vue. Родитель передаёт их пропсом тем компонентам, которые их показывают, а те просят об изменениях с помощью событий:

App.vue          хранит order и меняет его в addToOrder()
├── MenuItem     генерирует событие order, и App.vue добавляет позицию
└── OrderList    получает :order="order" и показывает его

Перенос данных вверх, в родителя, называется подъёмом состояния (lifting state up). Менять order может только App.vue, и оба компонента всегда показывают один и тот же заказ, потому что он один.