toRefs() Convert an Object into Refs
Last updated: 2026-10-22
toRefs() Convert an Object into Refs
toRefs() turns each property of a reactive object into a ref so destructured values stay reactive — the standard way to destructure state.
| Group | Reactivity: Utilities |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
const state = reactive({ a: 1, b: 2 })
const { a, b } = toRefs(state) // both refs, still linked
a.value++ // state.a also increments⚙️ Arguments
| object | A reactive object |
|---|
Returns：A plain object mapping each key to a ref
▶ Example
Edit the code below and see the live result:
Output：
Both numbers move together — the destructured ref stays linked.💡 Key Points
💡 Tip Return toRefs(state) from composables so callers can destructure safely.
⚠️ Warning Meaningful only for reactive objects — plain objects yield unlinked snapshots.
ℹ️ Note Returning toRefs(state) from setup works directly in templates (auto-unwrapped).
🏷️ Related Utilities
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q What if I destructure without toRefs?
A You get snapshots that stop tracking — the UI will not update.
Q Does it work on a ref?
A Not the intended use — a ref is already reactive; use it directly.
Q Do writes flow back to the source?
A Yes — it is a two-way channel to the same property.
