Vue Reactivity Examples
A runnable gallery of Vue reactivity patterns — ref, reactive, computed, watch, a dynamic list, a toggle, an input binding and a counter — each a short editable demo.
Examples · Updated
Overview
A gallery of runnable Vue reactivity patterns — edit any one in the editor. New to the model? Start with Vue reactivity — the basics, or see the ref() and computed() references. For a task walk-through, try handling form input; from another framework, compare React state.
Examples
A single value with ref
A reactive object
A derived value with computed
Reacting to change with watch
A dynamic list
A boolean toggle
A bound text input
A plus / minus counter
Frequently asked questions
How do I make a value reactive in Vue?
Wrap it with
ref() for a single value or reactive() for an object. Read and write a ref through .value in script (bare name in the template); read a reactive object's properties directly. See the ref() reference.How do I derive a value from state in Vue?
Use
computed() with a getter that reads reactive state. Vue caches the result and re-runs the getter only when a dependency changes — ideal for totals and filtered lists.How do I run code when a value changes in Vue?
Use
watch(). Give it the source to observe and a callback; the callback runs with the new and old values whenever the source changes, which is the right place for side effects like logging or fetching.