【ERROR】[Vue warn ]Computed property “total“ was assigned to but it has no setter

当我在写一些Vue练习时，想为一个按钮添加限制条件时，发现了我怎么都实现不了我需要的效果，一直报错如下图：

于是我重新审视代码结构，如图所示：

其中代码结构貌似没有任何问题，但是我发现我对按钮通过v-bind绑定的值是一个计算属性，而计算属性，默认情况下，只能获取值，不能设置它的值

解决方法
将标签中绑定的计算属性换成一个data数据，即可成功实现需求，代码如下：

<div id="app">
        <p>{{message}}</p>
        <p v-html="total">{{total}}</p>
        <p>{{total}}</p>
        <h1 v-pre>{{total}}</h1>
        <p>{{num}}</p>
        <button v-bind:disabled="num>30" @click="numChange">点击num+1</button>
    </div>

    <script>
        var veuApp = new Vue({
            el: '#app',
            data() {
                return {
                    a: 10,
                    b: 20,
                    num:20,
                    message: 'Hello World'
                }
            },
            computed: {
                total(){
                    var to=this.a+this.b
                    return to
                },
            },
            methods: {
                numChange(){
                    this.num++
                }
            }
        })
    </script>