В чем разница между computed и watch?

`computed` — вычисляемое значение, которое кешируется и пересчитывается только при изменении зависимостей. `watch` — наблюдатель, который запускает побочный эффект в ответ на изменение данных.

computed

const fullName = computed(() => `${first.value} ${last.value}`);

• Возвращает значение, которое используют в шаблоне.
• Кешируется: пока first и last не изменились, функция не вызывается повторно.
• Должен быть чистым — без запросов и изменения других данных.

watch

watch(query, async (value) => {
  results.value = await search(value);
});

• Ничего не возвращает в шаблон, а выполняет действие: запрос, запись в localStorage, логирование.
• Получает новое и старое значение, умеет immediate и deep.

Как выбирать

Нужно значение из других данных — computed. Нужно действие при изменении — watch.

Коротко для собеседования

computed — кешируемое производное значение без побочных эффектов, watch — реакция на изменения с побочными эффектами.

Подробнее: Vue — Computed, Vue — Watchers