Basic VueJs Component

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
  <greeting :person="person" :other="num"></greeting>
</div>

JavaScript

Vue.component('greeting', {
  template: '<div><input v-model="person.name"  /><br>{{person.name}} - {{other}}</div>',
  props: ['person', 'other'],
  watch: {
    // whenever person.name changes, this function will run
    "person.name": function (newName, oldName) {
      console.log("newName:", newName);
      console.log("newName:", oldName);
    }
  }
});

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#app',
  data() {
  	return {
  		person: {
      	name: 'Test'
      },
      num: 0
  	}
  },
  created() {
  	this.num = 1;
    console.log(this.num)
  	setInterval(_ => this.num++, 1000)
  }
});