Rules That Keep Reactivity Working

One mechanism sits under all of this. When a reactive property is read inside a tracking context — a render, a computed getter, a watcher — Vue records the pair. When that property is written, Vue re-runs whatever recorded it.

Two consequences follow, and nearly every reactivity bug is one of them.

Reading early turns state into a value

const { count } = state and const n = count.value both happen once, on that line. What you hold afterwards is a number, and nothing can notice it changing because there is no property left to intercept. Pass the ref itself, or pass a getter such as () => state.count, and let the consumer read it when it needs the value.

Reading late is not tracked at all

Tracking only happens while the effect is actually running. In watchEffect(async () => { await load(); use(other.value) }) the read of other happens after the function has yielded, so it is never registered as a dependency. Read what you depend on before the first await.

The rest of the list

• Reassigning a reactive variable abandons the proxy that the render still holds.
• A plain object you hold a direct reference to is never reactive. Nesting it in reactive state does convert it — the conversion is deep — but only when you read it back through the proxy.
• The raw object is not the proxy: writes to the original trigger nothing.
• Reading state in a setTimeout or an event handler is untracked. That is correct and normal — it just will not re-run anything.

<!-- src/components/NameCard.vue -->
<script setup lang="ts">
import { computed, reactive, ref, toRefs } from 'vue'

const state = reactive({ first: 'Ada', last: 'Lovelace' })

// Broken: a copy taken once, so the template never sees a change.
const { first } = state
// Working: a ref that reads through to state.first's neighbour.
const { last } = toRefs(state)

const greeting = computed(() => `Hello ${state.first} ${last.value}`)
const renames = ref(0)

function rename(): void {
  state.first = 'Grace'
  state.last = 'Hopper'
  renames.value += 1
}
</script>

<template>
  <p>{{ greeting }}</p>
  <p>copied once: {{ first }}</p>
  <p>through toRefs: {{ last }}</p>
  <p>renames: {{ renames }}</p>
  <button type="button" @click="rename">rename</button>
</template>

<style scoped>
p {
  margin: 0;
}
</style>

// src/lib/describe.ts
import { isRef, ref, unref } from 'vue'
import type { Ref } from 'vue'

function describe(source: Ref<number> | number): string {
  // unref(x) is shorthand for isRef(x) ? x.value : x — the same thing.
  const value = unref(source)
  return `${value} (${isRef(source) ? 'live' : 'snapshot'})`
}

const count = ref(1)
console.log(describe(count))
// Output: 1 (live)
console.log(describe(count.value))
// Output: 1 (snapshot)

count.value = 2
console.log(describe(count))
// Output: 2 (live)

// src/lib/track-await.ts
import { ref, watchEffect } from 'vue'

const id = ref(1)
const locale = ref('en')

watchEffect(async () => {
  const currentId = id.value // tracked: read before the await
  await Promise.resolve()
  console.log(currentId, locale.value) // locale is NOT tracked
})

// Changing locale alone never re-runs this effect.
// Fix: read locale.value above the await, next to id.value.

// src/lib/raw-vs-proxy.ts
import { isReactive, reactive } from 'vue'

const raw = { count: 0 }
const state = reactive(raw)

console.log(state === raw)
// Output: false
console.log(isReactive(raw), isReactive(state))
// Output: false true

raw.count = 5 // no interception, so nothing re-renders
console.log(state.count)
// Output: 5