Where is state stored in the Options API?
In the Options API, state is stored in the special data() function, which returns an object with the component's data.
Each property from data() becomes reactive component state.
In simple terms:
In the Options API, all state is stored inside data(), and Vue makes it reactive.
A simple example
javascript
<script>
export default {
data() {
return {
count: 0, // state
isOpen: false, // state
message: "Hello" // state
}
}
}
</script>
<template>
<div>
<p>{{ message }}</p>
<button @click="count++">Clicked: {{ count }}</button>
</div>
</template>What's important to remember about data():
1. It must return an object
You cannot return something that is not an object.
Bad
javascript
data: { count: 0 }Good
javascript
data() {
return { count: 0 }
}2. Each component instance gets its own copy of the state
If you use a component 10 times, each instance will have its own count.
3. Vue makes the properties reactive
Vue "wraps" the object returned from data() and tracks changes:
javascript
this.count++ // → the UI updates4. Inside the template you access it via {{ }} or this
You can write:
javascript
<p>{{ count }}</p>And in methods:
javascript
methods: {
inc() {
this.count++
}
}Summary (in short)
In the Options API, state is stored in the data() function, which returns an object with reactive properties.
- each property is the component's local state
- Vue tracks changes
- each component has its own copy of that state
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.