如何显示在VueJS2中计算的值？

如何显示在VueJS2中计算的值？实际上，我试图使用computed属性返回click*2的值。因此，我使用表达式

{{counter}

显示输出。但我没有得到任何输出，起初它被设置为计数器为0（存储在数据中）。就连我一次也没用v。那么为什么我的计数器值不通过计算属性更新呢

 <div id="app4">
    <p>counter : {{ counter }}</p>
    <p>clicks : {{ click }}</p>
    <button v-on:click="increment">increment</button>
  </div>

    <script>
      var vm = new Vue({
        el: '#app4',
        data: {
           counter:0,
           click: 0,
        },
       methods: {
           increment() {

               this.click++;
           }
       },
       computed: {
           counter() {
               return this.click * 2;
           }
       }
     });
    </script>

计数器：{{counter}}

点击：{{click}

增量
var vm=新的Vue({
el:'附录4'，
数据：{
柜台:0,，
点击：0，
},
方法：{
增量（）{
这个。点击++；
}
},
计算：{
计数器（）{
返回此项。单击*2；
}
}
});

从数据中删除

计数器

，它就会工作。你有两个属性相互影响，一个在

数据中，另一个在
计算中，我对此有一个疑问。首先，我从
数据中加载计数器的值。我没有对该计数器使用
v-once
指令。那么为什么不通过
computed
更新计数器值呢？因为如果存在同名的数据属性，则在渲染过程中会忽略计算属性。加载应用程序时，您应该会收到Vue警告。另外，我不明白为什么您希望将
计数器
同时作为数据和计算属性。注意到这一点。实际上，我在浏览器中没有收到任何Vue警告。谢谢男人：）