Vue broadcast

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="app">
  <ul>
      <item v-for="child in treeData"
        :model="child">
      </item>
  </ul>
</div>
<script type="text/x-template" id="item-template">
  <li>
  	<label>
    	<input type="checkbox" v-model="model.value" />
      {{model.label}}
    </label>
  	
    <ul v-if="model.children">
      <item v-for="child in model.children"
        :model="child">
      </item>
    </ul>
  </li>
</script>

JavaScript

Vue.component('item', {
  template: '#item-template',
  props: {
    model: Object
  },
  watch:{
    'model.value':function(val){
    	this.$children.forEach(function(child) {
	      child.$emit('change-at-parent', val);
      })
    }
  },
  ready:function(){
    this.$on('change-at-parent', function(val){
      this.model.value = val;
      return true;
    });
  }
})


new Vue({
    el: '#app',
    data: {
        treeData: [
        	{
          	label:'A',value:false,
          	children:[
          		{
              	label:'A-1',value:false,
              	children:[
                 	{label:'A-1-1',value:false},
              		{label:'A-1-2',value:false}
                ]
              },
              {label:'A-2',value:false}
          	]
          },
          {
          	label:'B',value:false,
          	children:[
          		{label:'B-1',value:false},
              {label:'B-2',value:false}
          	]
          }
        ]
    }
})