What are the most common TanStack Query mistakes in Vue and how do you avoid them?

Knowing what not to do is as important as knowing the API. These patterns trip up most developers new to TanStack Query in Vue.

// WRONG: non-reactive key — captured once at setup, never updates
const { data }=useQuery({
  queryKey: ["user", props.userId],  // plain read, not reactive
  queryFn:  ()=>fetchUser(props.userId),
})

// CORRECT: reactive via computed()
const { data }=useQuery({
  queryKey: computed(()=>["user", props.userId]),
  queryFn:  ()=>fetchUser(props.userId),
})

// WRONG: duplicating server state into Pinia
const { data:user }=useQuery({
  queryKey: ["user",1],
  queryFn:  fetchUser,
  onSuccess: u=>userStore.setUser(u), // unnecessary sync — two sources of truth
})
// CORRECT: read data directly from useQuery wherever needed