Vue - Component bound to view data

count property of a View used everywhere. Note how the 'obj' has to used to allow count to be passed by ref to the component.

by Ben Clayton

HTML

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

JavaScript

Vue.component('edit-ctrl', {
  props: ["refobj", "prop"],
  template: '{{ refobj }} -- {{ prop }} <button v-on:click="refobj[prop]++">You clicked me {{ refobj[prop] }} times.</button>'
})

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

setInterval(function(){Vue.set(vm1.obj, "count", vm1.obj.count+1000);console.log(count)}, 5000);