Пустой список

Пустой список ничего не показывает, а пустая страница выглядит сломанной. Поэтому, когда список пуст, скажите об этом: поставьте v-if на сообщение, а v-else — на список:

<p v-if="order.length === 0">Ваш заказ пуст. Выберите что-нибудь из меню!</p>
<ul v-else>
    <li v-for="item in order" :key="item.id">{{ item.name }}</li>
</ul>

Как только заказ становится пустым, сообщение занимает место списка, а когда что-то добавляют, список возвращается.

Чтобы удалить один элемент, кнопка в каждом li может передать обработчику индекс своего элемента, а обработчик удалит его с помощью splice(), как в уроке «Состояние и события»:

function removeItem(index) {
    order.value.splice(index, 1);
}

<li v-for="(item, index) in order" :key="item.id">
    {{ item.name }}
    <button @click="removeItem(index)">Удалить</button>
</li>

Каждая кнопка вызывает removeItem() с индексом своего элемента, и Vue удаляет его элемент со страницы. В качестве аргумента индекс подходит: это позиция элемента в момент нажатия, а именно она и нужна splice(). В качестве ключа он по-прежнему не годится.