<div id="app" class="text-center">
<my-component></my-component>
<my-component></my-component>
</div>
<div id="app2" class="text-center">
<my-component></my-component>
</div>
<script type="text/javascript">
// register
Vue.component('my-component', {
data: function(){
return{
status: 'Critical'
}
},
template : "<p> Server Status: {{ status }} <button @click='changeStatus'>Click</button> </p>",
methods: {
changeStatus: function(){
this.status = 'Normal';
}
}
});
new Vue({
el: '#app'
})
new Vue({
el: '#app2'
})
</script>
Demo http://vue.toihid.com/section-7/storing-data-in-component.php