The data property is now always a function

In Vue 2 applications, there is a discrepancy in the data attribute. The root component has a property that is directly a reactive definition, while all other components need to provide a function that returns an object as the data property. This created an inconsistency in the creation of components. This issue has been resolved in Vue 3, so now all components are treated equally, meaning the data attribute always has to be a function that returns an object whose members will be reactive properties.

Here is an example of the root component in main.js:

createApp({
    data(){return {...}}
})

And then in all other components, you have the following:

export default {
    data(){return {...}}
}

Notice that for these examples, we are using the Options API for clarity. When using the script setup syntax, you do not need to declare a data attribute.