Reactivity means that when your data changes, Vue updates the DOM that depends on it, with no manual DOM code. You declare reactive state with ref() or reactive().
It works by dependency tracking. While a component renders, Vue records each reactive value it reads. When one of those values changes, Vue re-runs only the work that depends on it.
Vue 3 uses JavaScript Proxies for reactive objects and getters and setters for refs. A Proxy sees property additions, deletions and array writes by index. Vue 2's Object.defineProperty approach could not detect those changes.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
