`ref` x `reactive` no Vue 3
Pergunta
Qual a diferença entre `ref` e `reactive` no Vue 3, e por que `ref` precisa de `.value`?
Resposta esperada
`reactive(obj)` embrulha um objeto num Proxy que rastreia acesso e mutação das propriedades — funciona só com objetos/arrays e você perde a reatividade se desestruturar ou reatribuir a variável inteira. `ref(valor)` cria um objeto `{ value }` reativo que funciona com qualquer tipo, inclusive primitivos (número, string, boolean) — daí o `.value` pra ler/escrever no script (o template desembrulha automaticamente). Regra prática comum: `ref` pra valores individuais e quando você precisa reatribuir; `reactive` pra um agrupamento de estado relacionado que fica no mesmo objeto. Muitos times padronizam em `ref` pra tudo pra evitar as pegadinhas de desestruturação do `reactive`.
Por que perguntam isso
Pergunta pleno de Vue. Sinal bom: citar a perda de reatividade ao desestruturar `reactive` como o motivo de muita gente padronizar em `ref`.