Full-Stack Vue.js 2 and Laravel 5

Data
In addition to reusable markup, components allow us to reuse JavaScript
functionality. The configuration object can not only include a template but can
also include its own state, just like the Vue instance. In fact, each component can
be thought of as a mini-instance of Vue with its own data, methods, lifecycle
hooks, and so on.
We treat component data slightly differently to the Vue instance though, as
components are meant to be reusable. For example, we might create a bank of
check-box components like this:
Vue.component('check-box', { template: '' data: { checked: false } });
As it is, if a user clicks a checkbox div, the checked state toggles from true to false
for every checkbox simultaneously! This is not what we want, but it is what will
happen, as all instances of the component refer to the same data object and
therefore have the same state.
To give each instance its own unique state, the data property shouldn't be an
object, but a factory function that returns an object. That way, every time the
component is instantiated, it links to a fresh data object. Implementing this is as
simple as: data() { return {
checked: false
} }