Deprecation of Object Declaration on `data`JS-0629

The issue is raised when data uses the object declaration instead of the function declaration. It is breaking change in Vue 3.

The data option accepts two types of declaration, i.e, function declaration and object declaration.

Function Declaration : It creates a new state for each instance of the component. Object Declaration : It shares state between all the instances and works only on a root instance.

Migration from Vue 2.0 to 3.0

The application which uses object declaration would require migrating to function declaration.

BREAKING: data component option declaration no longer accepts a plain JavaScript object and expects a function declaration.

BREAKING: When merging multiple data return values from mixins or extends, the merge is now shallow instead of deep (only root-level properties are merged).

Migration Strategy

It is recommended to follow below steps:

• Extracting the shared data into an external object and using it as a property in data
• Rewrite references to the shared data to point to a new shared object

Applications relying on the deep merge behavior from mixins, we recommend refactoring your code to avoid such reliance altogether, since deep merges from mixins are very implicit and can make the code logic more difficult to understand and debug.

Bad Practice

createApp({
  data: {
    property: null
  }
}).mount('#app')

<script>
export default {
  data: {
    property: null
  }
}
</script>

Recommended

createApp({
  data () {
    return {
      property: null
    }
  }
}).mount('#app')

<script>
export default {
  data () {
    return {
      property: null
    }
  }
}
</script>