Suggest an edit

Improve this article

Refine the answer for “Where is state stored in the Options API?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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 updates
```

---

#### 4. 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

Markdown · drag & drop images · ⌘B / ⌘I shortcuts264 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.