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 :value="person.name" @input="updateName" @change="updateChangedName" /><br>{{personChanged.name}} - {{other}}</div>',
  props: ['person', 'other'],
  data () {
   return {
   	personChanged: {
    	name: this.person.name
    }
   }
  },
  methods: {
    updateName() {
      this.person.name = event.target.value;      
    },
    updateChangedName() {
    	this.personChanged.name = event.target.value
    }
  }
});

// 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)
  }
});