The behavior I expected from the component was for each one to be independent and display separate counters. However, it seems that this is not the case...
Below is the HTML structure:
<div id="app">
<counter> </counter>
<counter> </counter>
</div>
And here is the JavaScript code:
Vue.component('counter',{
template: '<div>{{count}}</div>',
data(){
return {
count:0
}
},
created: function() {
self = this;
setInterval(function() {
self.count +=1;
}, 1000);
}
})
vm = new Vue({
el: "#app",
});
In addition, when using just one component, the counter increments by 1 as expected. However, when adding a second component, the first one stays at 0 and the second one increments by 2.