Change event is not called when checked value changed using ref - checkbox

Question

I was trying to create a select all feature. Following is my component,
(function(){
var template = ' <table>\
<tr>\
<td rowspan=2><input type="checkbox" #change="allSelectChanged"/>All</td>\
</tr>\
<tr v-for="i in rows">\
<td ><input type="checkbox" ref="select" #change="changedSelection(i,$event)" />Selection {{i}}</td>\
</tr>\
</table>';
var component = {
template : template,
data:function(){
return {
rows:5
}
},
methods:{
allSelectChanged:function(e){
_.each(this.$refs.select,function(s){
s.checked = e.target.checked;
});
},
changedSelection:function(i,e){
console.log("Selection changed",i,e.target.checked);
}
}
}
Vue.component('sample', component);
})();
var app = new Vue({
el: '#app',
data: {
},
methods:{
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://underscorejs.org/underscore-min.js"></script>
</style>
<div id="app">
<sample />
</div>
When I checked/unchecked any checbox changedSelection function is called. But when I checked/unchecked all checkbox, check boxes are getting selected but respective changedSelection function is not getting called.
Why changedSelection is not called when the change is made through ref??

Answer 1

Instead set new element in vue data and use bind with v-model="selection"
new Vue({
el:'#app',
data:{
rows:[{id:1,sel:false},{id:2,sel:false},{id:3,sel:false},{id:4,sel:false},{id:5,sel:false}],
selection:false,
selAll:false
},
methods:{
changedSelection:function(i){
console.log(i.id +" is "+ (i.sel?' checked ': 'unchecked') );
},
changedAllSelection:function(){
for(let i in this.rows){
this.rows[i].sel = this.selAll;
console.log(this.rows[i].id +" is "+ (this.rows[i].sel?' checked ': 'unchecked') );
}
console.log("Select All : " + this.selAll);
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<input type="checkbox" ref="select" v-model="selAll" #change="changedAllSelection" />Selection All : {{(selAll?' checked ': 'unchecked')}}
<div v-for="i in rows">
<input type="checkbox" ref="select" v-model="i.sel" #change="changedSelection(i)" />Selection {{i.id}} : {{(i.sel?' checked ': 'unchecked')}}
</div>
</div>
</div>