Списки с v-for

В курсе JavaScript вы рисовали список из массива циклом: для каждого элемента — createElement(), textContent и append(), а перед всем этим очищали список. В Vue вы пишете элемент один раз, с директивой v-for, а Vue создаёт по одному для каждого элемента массива:

<script setup>
const menu = [
    { id: 1, name: "Эспрессо", price: 2 },
    { id: 2, name: "Капучино", price: 3 },
    { id: 3, name: "Зелёный чай", price: 3 },
];
</script>

<template>
    <ul>
        <li v-for="item in menu" :key="item.id">{{ item.name }}: €{{ item.price }}</li>
    </ul>
</template>

На странице получится:

<ul>
    <li>Эспрессо: €2</li>
    <li>Капучино: €3</li>
    <li>Зелёный чай: €3</li>
</ul>

item in menu работает как for (const item of menu): item — это по очереди каждый элемент массива, а имя вы выбираете сами. Внутри элемента с v-for, в его тексте и в его атрибутах, item — тот элемент массива, для которого создан этот элемент.

:key даёт каждому элементу ключ — значение, которое у разных элементов массива разное. Когда массив меняется, Vue сравнивает ключи, чтобы понять, какой элемент на странице к какому элементу массива относится, и затем добавляет, переносит или удаляет только те элементы, что связаны с изменившимися. Поэтому ключ должен оставаться при своём элементе массива: берите его id, а не позицию в массиве. Когда элемент удаляют, следующие за ним сдвигаются на одно место. Если ключами служат позиции, Vue решит, что исчез последний, а то, что находится в самих элементах на странице, например текст, введённый в поле одного из них, останется на месте и окажется рядом не с тем элементом. Всегда давайте v-for ключ :key.

Если массив лежит в рефе, список следует за ним: добавьте элемент через push() — и Vue добавит для него элемент на странице. Ничего очищать и перерисовывать не нужно.