Обновится ли шаблон Vue после изменения обычной переменной

Условие

В компоненте Vue 3 используется <script setup>:

let count = 0;
const increment = () => count++;

Шаблон: <button @click="increment">{{ count }}</button>. Обновится ли число?

Ответ

Обычная переменная не создаёт реактивной зависимости, поэтому её изменение само по себе не обновляет шаблон. Для счётчика нужен ref.

Исправьте объявление на const count = ref(0), импортировав ref из vue. Обработчик: const increment = () => count.value++. В шаблоне оставьте {{ count }}: ref автоматически распакуется. Случайный повторный рендер из-за другой зависимости не делает обычную переменную реактивной и не является корректным способом обновления интерфейса.