javascript - How can I invoke computed property through code in Vuejs? -

i using vuejs template , databinding. here html:

<div id="message"></div> <div id="items">     <div v-show="list.length > 0">         <button v-on="click: selectmode = true"                 v-show="!selectmode">start selection</button>         <button v-on="click: selectmode = false"                  v-show="selectmode">end selection</button>         <button v-on="click: selectall">select all</button>         <button v-on="click: remove">remove</button>     </div>     <ul>         <list-item v-repeat="list"></list-item>     </ul> </div> <script type="text/html" id="template">     <li>         <input type="checkbox" v-show="$parent.selectmode"                 v-model="selected" name="checkbox" value="{{id}}" />         <label>{{name}}</label>     </li> </script> 

and js:

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 = 0; < this.list.length; i++){                 this.list[i].$set("selected", true);             }         },         remove: function(){             var length = this.selectedlist.length;             if(length === 0){                 show("nothing remove");                 return;             }              while(length > 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) > 0;                     },                     set: function(value){                         show(this.name + " " + (value ? "selected" : "deselected") + " @ 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); } 

vuejs duly binds template list, , items listed expected in <li> tags. problem computed property: selected. setter of property triggered when checkbox clicked, however, if property set in code, setter isn't called.

when "start selection" button hit, checkboxes visible each item. when user clicks on checkbox, setter of computed selected property invoked. however, if press, "select all" button, sets selected property true, checkboxes visible, , duly checked, setter of selected property isn't triggered, unexpected. why isn't working? either missing something, or bug in vuejs.

here link fiddle: http://jsfiddle.net/dreamakshay/c76rwugz/5/. these few things can try.

run > click start selection > tick checkboxes (setter triggered) > message in div, , "remove" remove selected items.

run > click select (all checked) > press remove > unexpected error in div "nothing remove", shouldn't happen.

any appreciated.

seems forget add line:

    selectall: function(){         if(!this.selectmode){             this.selectmode = true;         }          for(var = 0; < this.list.length; i++){             this.list[i].$set("selected", true);             this.selectedlist.push(this.list[i]); // line         }     }