Данные родителя

Содержимое слота пишется в шаблоне родителя, поэтому оно принадлежит родителю. Оно может использовать рефы, вычисляемые значения и функции родителя, как и всё остальное в этом шаблоне. Здесь панель показывает заказ из App.vue, а её кнопка вызывает функцию из App.vue:

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

const order = ref(["Эспрессо", "Морковный торт"]);

function clearOrder() {
    order.value = [];
}
</script>

<template>
    <Panel title="Ваш заказ">
        <p>Позиций: {{ order.length }}</p>
        <button @click="clearOrder">Очистить</button>
    </Panel>
</template>

Когда заказ меняется, Vue обновляет содержимое панели, как и в любом другом месте шаблона App.vue. Панель ничего не знает о заказе: она лишь говорит, куда попадёт её содержимое. Поэтому одну панель можно использовать для чего угодно.

В обратную сторону это не работает: содержимое не видит пропсов и переменных панели. <p>{{ title }}</p> между тегами <Panel title="Ваш заказ"> ничего не покажет, а консоль напишет:

[Vue warn]: Property "title" was accessed during render but is not defined on instance.
  at <Panel>
  at <App>

В App.vue нет title. (В предупреждении назван <Panel>, потому что именно там показывается содержимое.) Но родитель и так знает заголовок: он сам передал его панели. Поэтому он может записать заголовок в содержимое сам.

То же относится и к стилям. <style scoped> в Panel.vue оформляет собственные элементы панели, её section и h2, но не содержимое от родителя. Оформляйте содержимое там, где оно написано: в App.vue или в style.css.

В этом упражнении addToOrder() кладёт позицию в заказ с count: 1, а если позиция в заказе уже есть, прибавляет 1 к её count.