Обработчики кликов

Вы пишете @click ещё со введения. Это сокращение от v-on:click — директивы, как :src — сокращение от v-bind:src. Эти две кнопки делают одно и то же:

<button v-on:click="addCup">Ещё один кофе</button>
<button @click="addCup">Ещё один кофе</button>

Все пишут краткую форму. После @ идёт название события, а в кавычках — что Vue должен сделать, когда оно случится. Это может быть имя функции из скрипта, как до сих пор, или короткая инструкция, которую Vue выполняет при каждом клике (в скрипте при этом есть const cups = ref(0);):

<template>
    <p>Чашек сегодня: {{ cups }}</p>
    <button @click="cups++">Ещё один кофе</button>
    <button @click="cups = 0">Новый день</button>
</template>

В шаблоне рефам не нужен .value, поэтому cups++ здесь правильно, хотя в скрипте было бы ошибкой. Такая инструкция удобна для мелочей: прибавить 1, задать значение или переключить true и false с помощью !, как в @click="open = !open".

Когда лучше функция? Когда клик делает больше одного дела, когда нужен if или когда одно и то же делают несколько кнопок. Инструкции, втиснутые в атрибут, читаются тяжело, а логике вашего приложения место в скрипте. Хорошее правило: одна короткая инструкция может остаться в шаблоне, а всё, что длиннее, уходит в функцию.