title: How can I invoke computed property through code in Vuejs?
body: <p>I am using Vuejs for template and databinding. Here is my HTML:</p>
  
  <pre><code>&lt;div id="message"&gt;&lt;/div&gt;
  &lt;div id="items"&gt;
      &lt;div v-show="list.length &gt; 0"&gt;
          &lt;button v-on="click: selectMode = true"
                  v-show="!selectMode"&gt;Start Selection&lt;/button&gt;
          &lt;button v-on="click: selectMode = false" 
                  v-show="selectMode"&gt;End Selection&lt;/button&gt;
          &lt;button v-on="click: selectAll"&gt;Select All&lt;/button&gt;
          &lt;button v-on="click: remove"&gt;Remove&lt;/button&gt;
      &lt;/div&gt;
      &lt;ul&gt;
          &lt;list-item v-repeat="list"&gt;&lt;/list-item&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;script type="text/html" id="template"&gt;
      &lt;li&gt;
          &lt;input type="checkbox" v-show="$parent.selectMode" 
                 v-model="selected" name="checkbox" value="{{Id}}" /&gt;
          &lt;label&gt;{{Name}}&lt;/label&gt;
      &lt;/li&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>And JS:</p>
  
  <pre><code>var message = document.getElementById("message");
  var items = [
      { Id: 1, Name: "Apple" },
      { Id: 2, Name: "Orange" },
      { Id: 3, Name: "Banana" },
      { Id: 4, Name: "Mango" }
  ];
  
  var data = {
      list: items,
      selectedList: [],
      selectMode: false
  }
  
  var vue = new Vue({
      el: "#items",
      data: data,
      methods: {
          selectAll: function(){
              if(!this.selectMode){
                  this.selectMode = true;
              }
  
              for(var i = 0; i &lt; this.list.length; i++){
                  this.list[i].$set("selected", true);
              }
          },
          remove: function(){
              var length = this.selectedList.length;
              if(length === 0){
                  show("Nothing to remove");
                  return;
              }
  
              while(length &gt; 0){
                  var index = this.selectedList.pop();
                  this.list.splice(index, 1);
                  length--;
              }
          }
      },
      components:{
          'list-item': {
              template: "#template",
              computed: {
                  selected: {
                      get: function(){
                          return this.$parent
                              .selectedList
                              .indexOf(this.$index) &gt; 0;
                      },
                      set: function(value){
                          show(this.Name + " " + (value ? "Selected" : "Deselected") + " at index: " + this.$index);
                          if(value){
                              this.$parent
                                  .selectedList
                                  .$add(this.$index);
                          }
                          else{
                              this.$parent
                                  .selectedList
                                  .$remove(this.$index);
                          }
                      }
                  }
              }
          }
      }
  });
  
  function show(mess){
      message.innerHTML = mess;
      setTimeout(function(){
          message.innerHTML = "";
      }, 5000);
  }
  </code></pre>
  
  <p>Vuejs duly binds the template with list, and items are listed as expected in <code>&lt;li&gt;</code> tags. The problem is computed property: <code>selected</code>. The setter of this property is triggered when the checkbox is clicked, however, if the property is set in code, the setter isn't called. </p>
  
  <p>When "Start Selection" button is hit, checkboxes are visible for each item. When user clicks on checkbox, setter of computed <code>selected</code> property is invoked. However, if you press, "Select All" button, which sets <code>selected</code> property to <code>true</code>, checkboxes are visible, and they are duly checked, but setter of <code>selected</code> property isn't triggered, which is unexpected. Why isn't this working? Either I am missing something, or this is a bug in Vuejs.</p>
  
  <p>Here is a link to fiddle: <a href="http://jsfiddle.net/dreamakshay/c76rwugz/5/" rel="nofollow">http://jsfiddle.net/dreamakshay/c76rwugz/5/</a>. These are few things you can try.</p>
  
  <p>Run > Click Start Selection > Tick Checkboxes (setter triggered) > Message in Div, and "Remove" will remove the selected items.</p>
  
  <p>Run > Click Select All (all checked) > Press Remove > An unexpected error in Div "Nothing to remove", which shouldn't happen.</p>
  
  <p>Any help is appreciated.</p>