Vue - Component with self contianer data

The 'count' in the component is not the same as the count in the commondata.

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
  
	
	<div id="div1">
		Outer: {{ count }}<br/>
		<edit-ctrl></edit-ctrl>
	</div>

CSS

.interface {}

JavaScript

//---------------------------------------------------------

var commonData = { count:0 };

var vm1 = new Vue({
  el: '#div1',
  data: commonData
});

Vue.component('edit-ctrl', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})


setTimeout(function(){commonData.count+=1000},5000);