Why the component data must be a function?

The component data must be a function instead directly providing the object. This is because each instance needs to maintain an independent copy of the returned data object. Otherwise one component instance data changes will impact the data of all other instances.

For example, the below code snippets gives an idea on correct approach,

data: { // Bad
message: 'Hello'
}
data: function () { //Good
return {
message: 'Hello'
}
}