Muitas das pessoas quando vão estudar VueJS acabam caindo em cursos que deixam de ensinar alguns pontos que podem fazer toda diferença no código mesmo que sejam funções situacionais. Sem muita demora, aqui vão as funções que você precisa saber sobre VueJS:

Watch e WatchEffect

const contador = ref(0);
const nome = ref("Andressa");

watch(contador, (novoValor, antigoValor) => { console.log(`O contador mudou de ${antigoValor} para ${novoValor}`) })

Nesse caso acima, o watch só estaria observando a variável contador.

watchEffect(() => { console.log(`Dados atuais: ${nome.value} - ${contador.value}`); })

No watchEffect, como visto acima, ele será executado sempre que a variável nome ou contador mudarem.

O que você precisa saber?

Use watch quando:	use WatchEffect quando:
Você precisará do valor antigo (antigoValor)	Você quer que seu código rode imediatamente no setup
Você quer observar algo que raramente muda, ou de forma específica	Você tem várias dependências e não quer listá-las uma por uma
Você quer evitar execuções desnecessárias	A lógica é simples e depende apenas do estado atual

Ref e ShallowRef

Geralmente usamos Ref com maior frequência, por isso ele é mais conhecido e utilizado, já o shallowRef, como o nome sugere, é uma versão “rasa”, ele não retorna o valor interno reativo, apenas observa a propriedade value em si.

Ele irá mudar apenas o .value e não o .value.prop, tornando a aplicação mais “perfomática”.

customRef

Essa é uma forma mais manuseável da reatividade, o customRef não tem um comportamento pré-definido, mas que você possa criar sua própria lógica, basicamente é uma “função que roda outra função”, contém os argumentos necessários como o track e o trigger, onde o track avisa que essa variável está sendo lida, e o trigger avisa que o valor mudou e que ele precisa atualizar quem estiver usando essa variável. Vejamos o exemplo:

Geralmente é muito utilizado com um debouncer

import { customRef } from 'vue'

export function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

<script setup>
import { useDebouncedRef } from './debouncedRef'
const text = useDebouncedRef('hello')
</script>

<template>
  <input v-model="text" />
</template>

NextTick

Ele é uma ferramenta para lidar com o ciclo de vida da renderização do Vue resolvendo um erro bastante específico que o Vue não atualiza o DOM imediatamente quando você altera um estado. Quando você altera uma variável reativa o Vue estará colocando essa mudança numa “fila”, esperando até o ciclo atual aplicar em todas mudanças de uma vez só, isso é ótimo para a performance, evitando que o navegador renderize a tela 50 vezes se você modificar 50 variáveis seguidas.

O nexTick é uma função que retorna uma Promise que se resolve após o Vue ter terminado de atualizar o DOM com essas mudanças, veja um exemplo real:

import { ref, nextTick } from 'vue'

const mensagens = ref(['Olá!'])

async function adicionarMensagem() {
  mensagens.value.push('Nova mensagem aqui!')
  
  // Se você tentar medir a altura da lista AQUI, 
  // o Vue ainda não colocou o novo item no HTML!
  // console.log(lista.scrollHeight) -> Valor Antigo
  
  await nextTick()
  
  // AO DOM foi atualizado.
  // console.log(lista.scrollHeight) -> Valor Novo
}

Fonte: https://vuejs.org/api/