Why must vue component data be a function?

Question

I am reading up on Vue components, and find their explanation of why data needs to be a function somewhat confusing:

The root instance

Answer 1

The data option should always be a function in the context of components which returns a fresh object.

This precaution is made by vue. So whenever you define the object directly in the data option, vue will catch for making the mistake.

Components are never allowed to directly mutate its state. This prevents us from messing up and doing bad things where components do not have their own state.

If this precaution is not made by vue, then you will have a chance to mutate any other components that owns from the component and this would be a security issue.

Example from the documentation:

It’s good to understand why the rules exist though, so let’s cheat.

  
  
  

var data = { counter: 0 }

Vue.component('simple-counter', {
  template: '{{ counter }}',
  // data is technically a function, so Vue won't
  // complain, but we return the same object
  // reference for each component instance
  data: function () {
    return data
  }
})

new Vue({
  el: '#example-2'
})

Since all three component instances share the same data object, incrementing one counter increments them all! Ouch. Let’s fix this by instead returning a fresh data object:

data: function () {
  return {
    counter: 0
  }
}

Now all our counters each have their own internal state.