Vue 3's reactivity system is the foundation for everything you build, and choosing the right primitive keeps components clean and predictable. The ref() function wraps primitive values and single object references, exposing them through a .value accessor so reads and writes are tracked uniformly. The reactive() helper, by contrast, takes an object and makes its properties reactive directly so you can read and write them without .value. A common pitfall is destructuring a reactive object, because pulling out a property into a local variable severs the reactive link with the source. The toRefs() utility solves this by converting each property into a linked ref, so destructuring preserves reactivity across the rest of the component.
Beyond plain state, Vue offers tools for derived values and side effects. A computed property is a cached reactive value derived from other reactive sources; it only recomputes when its dependencies actually change, which makes it the right tool for transforming existing state into a new value. When you need side effects such as API calls, persistence, or logging, watch() is a better fit because it explicitly observes sources and reacts to changes, whereas computed is for derivation rather than effects. watchEffect() is an even more automatic cousin that runs immediately and tracks every reactive dependency it touches during execution. After mutating reactive state, the DOM is not always updated synchronously, so nextTick() lets you wait for Vue to finish applying pending updates before measuring or further interacting with the DOM.
For cases where deep tracking is unnecessary or expensive, Vue exposes lighter alternatives. shallowReactive() creates a reactive object in which only the top-level properties are tracked, while nested objects remain non-reactive unless they are wrapped separately. This is useful for large objects or third-party structures where deep tracking would be wasteful. When working with a shallowRef, mutating the inner value does not automatically trigger updates because the reference itself has not changed. Calling triggerRef() manually notifies Vue that a change has occurred, allowing subscribers to react as expected.