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

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

ref удобен для примитивов и замены значения целиком; reactive — для связанного набора полей. Деструктуризация примитивного свойства reactive теряет связь с источником, поэтому при необходимости используют toRefs или getter.

Источник: vuejs.org.