Typescript 里的getter 如何应用于vue

这个项目是基于ts+vue+webpack.
为了达到一个效果，下面的截图中Build按钮只在repository有选中并且tag name有值的情况下才可以用，否则不能用：

最开始的做法是：

1. 利用一个boolean 值作为btn available的判断标准
2. Typescript里写上一个方法根据checkbox选没选中和tagname是否有值来返回第一步的boolean值
3. 复选框和输入框加事件监听，用于调用第二部的方法
   代码如下：
   TS:

export default class Plsite extends WiseVue {
tagAvailable: boolean = false;
setTagAvailable() {
        this.tagAvailable = !!(this.checkedRepositories.length > 0 && this.tagName !== "");
    }
}

vue, 监听部分我用中文标记了

<div id="tag-block">
            <span>Select Code Repositories to Release:</span>
            <div v-for="repo in gitRepositories" :key="repo">
                <input type="checkbox" :id="repo" :value="repo" v-model="checkedRepositories"
                       // 这里=>  @change="setTagAvailable" />{{repo}}

            </div>
            <span>Tag name for this release: </span>
            <div class="tag-name"><input type="text" v-model="tagName" required="required" // 这里=> 
 @keyup="setTagAvailable" placeholder="Enter Tag Name"/></div>
            <p class="sample-text"> Sample: v2.20180412.01 </p>
            <waitting-btn btn-class="button-unis color-white vertical-align" @click="triggerTagJob"
                          :value="'Build'"
                          :is-loading="loading" :disabled="!tagAvailable"></waitting-btn>
</div>

不过这种方法过于繁琐，setTagAvailable方法要被多个监听器处理。可以考虑用@Watch checkedRepositories 和 tagName， 根据二者的变化分别调用setTagAvailable(), 不过vue并没有提供可以同时侦听多个变量的功能（在这个阶段他们不打算实现 vue4.x）。所以考虑使用compute功能。
compute的对象在对象变化的时候就会进行计算，对象不变化，多次调用也不会重新计算。

代码：
删掉前头的ts代码，

get tagAvailable(): boolean{  //方法名直接作为vue里的调用对象
        return !!(this.checkedRepositories.length > 0 && this.tagName !== "")
    }

vue 删掉多选框和输入框的监听属性：

 <div id="tag-block">
            <span>Select Code Repositories to Release:</span>
            <div v-for="repo in gitRepositories" :key="repo">
                <input type="checkbox" :id="repo" :value="repo" v-model="checkedRepositories"
                       />{{repo}}
<!--                @change="setTagAvailable"-->
            </div>
            <span>Tag name for this release: </span>
            <div class="tag-name"><input type="text" v-model="tagName" required="required"

                                         placeholder="Enter Tag Name"/></div>
<!--            @keyup="setTagAvailable"-->
            <p class="sample-text"> Sample: v2.20180412.01 </p>
            <waitting-btn btn-class="button-unis color-white vertical-align" @click="triggerTagJob"
                          :value="'Build'"
                          :is-loading="loading" :disabled="!tagAvailable"></waitting-btn>
</div>