JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <p>Counter: {{ counter }}</p>
  
  <button @click="counter++">Increase Counter</button>
  <button @click="test">Change First Name</button>
</div>

JavaScript

var vm = new Vue({
	el: '#app',
  data: {
    counter: 1,
    person: {
    	name: {
      	firstName: 'Bo',
        lastName: 'Andersen'
      }
    }
  }
});
vm.$watch('counter', function(newValue, oldValue) {
	alert('Counter changed from ' + oldValue + ' to ' + newValue + '!');
});

/*vm.$watch('person.name.firstName', function(newValue, oldValue) {
	alert('First name changed from ' + oldValue + ' to ' + newValue + '!');
});*/

/*vm.$watch('person.name', function(newValue, oldValue) {
	alert('The first name was changed from ' + oldValue.firstName + ' to ' + newValue.firstName + '!');
}, { deep: true });*/

/* var unwatch = vm.$watch(
  function() {
    return this.counter;
  },
  function(newValue, oldValue) {
    alert('Counter changed from ' + oldValue + ' to ' + newValue + '!');
  }
); */