title: Watching a computed attribute in VueJS
body: <p>In my project I have a form that can only be submitted when certain fields are filled in, so I've created the canSubmit function in my ViewModel:</p>
  
  <pre><code>var vm = new Vue({
      data: {
          experiments: [],
          genes: ""
      },
      el: "html",
      computed: {
          canSubmit: function () {
              switch (this.searchType) {
                  case "":
                      return false;
                  case "gene":
                      return this.genes.length &gt; 0 &amp;&amp; this.experiments.length &gt; 0;
                  default:
                      return false;
              }
          }
      }
  });
  </code></pre>
  
  <p>I also have a button that I want to show if canSubmit returns true, and some <code>&lt;inputs&gt;</code> that change the data model:</p>
  
  <pre><code>&lt;textarea v-model="genes" name="genes" id="gene_list"&gt;&lt;/textarea&gt;
  &lt;select v-model="experiments" name="experiments" multiple id="select_result_exps"&gt;
     &lt;!--Various &lt;options&gt;--&gt;
  &lt;/select&gt;
  &lt;button name="query" v-if="canSubmit" value="search" type="submit""&gt;Submit&lt;/button&gt;
  </code></pre>
  
  <p>So when I change the textarea or the select, my model updates, and this means that <code>canSubmit</code> returns true. Howevever the button doesn't know that <code>canSubmit</code> has changed, so remains invisible.</p>
  
  <p>Is there a way of watching a derived attribute or method in order to get this to work? Alternatively can I force the button to recheck its bindings?</p>