---
url: /docs/guide/usage/linter/rules/vue/no-shared-component-data.md
---

### What it does

Enforce that the `data` property of a Vue component definition is a
function.

### Why is this bad?

When `data` is declared as an object literal, the same object is shared
across every instance of the component, which causes cross-instance
state pollution. Returning a fresh object from a function avoids that.

This rule targets component definitions reached through
`Vue.component(...)`, `Vue.extend(...)`, `Vue.mixin(...)`,
`app.component(...)`, `app.mixin(...)`, `component(...)`,
`createApp(...)`, `defineComponent(...)`, `defineNuxtComponent(...)`,
and `export default {}` inside `.vue` files. `new Vue({...})` is not
covered (the instance does not share `data` between components).

### Examples

Examples of **incorrect** code for this rule:

```vue
<script>
Vue.component("some-comp", {
  data: {
    foo: "bar",
  },
});
</script>
```

Examples of **correct** code for this rule:

```vue
<script>
Vue.component("some-comp", {
  data() {
    return { foo: "bar" };
  },
});
</script>
```

## How to use

## Version

This rule was added in v1.67.0.

## References