В чём разница между ref и reactive во Vue и когда что следует использовать?

ref хранит значение в .value и допускает его полную замену, reactive предоставляет прокси для работы с полями объекта.

Для одиночного значения или заменяемого объекта ref часто проще, для связанной группы полей удобен reactive. Оба могут делать вложенные объекты реактивными. При извлечении примитивного поля из reactive обычной деструктуризацией обновления теряются; для сохранения связи применяют toRef/toRefs. В шаблоне разворачивание ref упрощает синтаксис, но не меняет модель хранения.