simple demo

HTML

<div id="app">
  <button v-on:click="counter++"> Increase </button>
   <button v-on:click="counter--">Decrease</button>
   <button v-on:click="secondCounter++">Increase Second </button>
  <br />
  <span>Counter:{{ counter }}</span>  <br />
    <span>secondCounter:{{ secondCounter }}</span>  <br />
  <span>Result:{{ getResult() }} </span>  <br />
  <pan>OutPut:{{ output }}</span>
 
</div>

JS

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script>
new Vue({
  el:'#app',
  data:{
    counter:0,
    result:'',
    secondCounter:0,
  },
  computed:{
    output:function(){
      console.log("computed test");
      return this.counter >5 ?'Greater 5':'Smaller than 5';
    }
  },
  watch:{
    counter:function(value){
       var vm = this;
      setTimeout(function(){
       vm .counter =0;
        
      },2000);
    }
  },
  methods:{
    getResult() {
      console.log('test');
      return this.counter >5 ?'Greater 5':'Smaller than 5';
    }
  }
});
</script>