data Component State
Last updated: 2026-10-22
data Component State
The data option declares reactive component state as a function returning an object, so every instance gets its own copy.
| Group | Options: State |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
export default {
data() {
return { count: 0, user: { name: "Ana" } }
}
}⚙️ Arguments
| value | No arguments: a function returning initial data (object only for the root instance) |
|---|
Returns：Returned fields become reactive and are used by name in templates
▶ Example
Edit the code below and see the live result:
Output：
Shows 'Count: 0'; clicking increments it.💡 Key Points
⚠️ Warning Always a function — a shared object leaks state between instances.
ℹ️ Note All returned fields become deeply reactive, including nested objects and arrays.
💡 Tip Keys starting with _ or $ are not exposed on the instance.
🏷️ Related State
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Why must data be a function?
A Components are instantiated repeatedly; the function returns fresh state each time.
Q Can data reference props?
A Not reliably — derive from props with computed instead.
Q Do templates need this?
A No — templates use bare names; script logic uses this.
