Vue.js—关于watch, method, computed的用法区别

今天遇到了一个关于watch的简单案例，代码如下

<!--HTML-->
<div id="app">
  <input type="number" v-model.number="counter"></input>
</div>

new Vue({
  el: '#app',
  data () {
    return {
      counter: 0
    }
  },
  watch: {
    counter() {
      console.log('The counter has changed!')
    }
  }
});

运行后，“更改counter值"事件会被监听，并且console.log，结果如下

假设把把源代码进行部分修改，将watch变为method或者computed，会发生什么呢？

结果：console.log不再显示