Vue - Component bound to class

count property of class used everywhere

by Ben Clayton

HTML

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

JavaScript

class myclass {
	constructor (){
		this.count = 0;
	}
}
var my1 = new myclass();

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: {
    classref: my1
  }
});

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