How does Vue's reactivity system work?
Quick Answer
Vue tracks which parts of your component's render depend on which reactive properties. When a component renders, Vue records the reactive fields it reads (dependency tracking); when one of those changes, Vue re-runs that component's render and patches the DOM. Vue 3 implements this with ES6 Proxy; Vue 2 used Object.defineProperty getters/setters.
Vue's reactivity is dependency tracking plus triggering. When a component renders, Vue notes every reactive property that render reads. Then when one of those properties is set to a new value, Vue knows exactly which components care and re-runs just their render functions, diffing against the virtual DOM to make the minimal real changes. In Vue 3 this is done with a Proxy that intercepts get and set. Vue 2 used defineProperty getters and setters, which is why it couldn't see new properties being added and you needed Vue.set. The practical rule is that only reactive state — ref or reactive — causes re-renders; a plain variable won't.
Vue 3. reactive(obj) wraps an object in a Proxy that intercepts get (to record the current effect as a dependency) and set (to trigger the effects that depend on it). ref(value) does the same for a single value via .value. A component's render function is one such effect.
Vue 2. On init, Vue walked the data object and replaced each property with a getter/setter. Limitations you should know: it couldn't detect adding/removing object properties (needed Vue.set) or setting array items by index/length.
Consequences: only reactive data drives updates — a plain local variable won't; mutating a nested reactive object works in Vue 3; computed properties are cached effects that only recompute when a dependency changes.