JSFiddle - React, Tailwind, and code Playground

by Ben Clayton

HTML

<div id="demo">
  <button (click)="change1">change1</button>
  <button (click)="change2">change2</button>
  <pre>{{ $data }}</pre>
</div>

TypeScript

new Vue({
	el: '#demo',
  data: {
  	things: [{foo:1}, {foo:2}]
  },
  watch: {
  	things: {
      handler: function (val, oldVal) {
      	alert('a thing changed')
      },
      deep: false // set to true to make Vue detect change in value of foo, otherwise it will only see thing array length change 
    }
  },
		change1 () {
			this.things[0].foo = 5;
		},
		change2() {
			this.things.push({foo:9});
		}
})