<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

By toihid

Leave a Reply