JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="demo">
  <p>
  {{ inputCheckeds }}
  </p>

  <tree :model="list" :checkeds="[1, 4, 2, 3]" @changeInput="updateValue"></tree>
</div>

CSS

ul, li{
  margin-top: 10px;
}
p{
  margin-left: 20px
}

JavaScript

window.Event = new Vue();

Vue.component('tree', {
	created: function() {  	
  	this.removeItemOutScope(this.model);
    this.changeValue();    
  },
	props: {
  	model: {
    	type: Array,
      default: function () { return [] }
    },
    
    checkeds: {
    	type: Array,
      default: function () { return [] }
    }
  },
  methods: {
  	changeValue: function() {    	
    	itemsChecked = this.addStore();      
    	Event.$emit('changeInput', itemsChecked);
    },
    
    addStore() {    	
    	var itemsChecked = JSON.parse(localStorage.getItem('itemsChecked'));
      var idx;
      
      if(!itemsChecked)
      	itemsChecked = [];
      else  
        itemsChecked = this.itemsRemoved(itemsChecked);

			itemsChecked = this.itemsAdd(itemsChecked);
              
      localStorage.setItem('itemsChecked', JSON.stringify(itemsChecked) );
      
      return itemsChecked;
    },
    
    itemsRemoved: function(itemsChecked) {    	
    	for(var i = 0; i < this.model.length; i++) {
        if(this.check.indexOf(this.model[i].id) === -1) {
          idx = itemsChecked.indexOf(this.model[i].id);
          if(idx !== -1)
            itemsChecked.splice(idx, 1);
        }
      }
      
      return itemsChecked;
    },
    
    itemsAdd: function(itemsChecked) {
    	for(var i = 0; i < this.check.length; i++)
       		if(itemsChecked.indexOf(this.check[i]) === -1)
          	itemsChecked.push(this.check[i]);
            
      return itemsChecked;
    },
    
    removeItemOutScope: function(model) {
    	 var idx;
       var modelAux = [];
       
       for(var j = 0; j < model.length; j++)
       		for(var i = 0; i < this.check.length; i++)
          	if(model[j].id == this.check[i])
            	modelAux.push(model[j].id);
       
       this.$set(this, 'check', modelAux);       
    }
  },
  data: function() {
  	return {
    	check: this.checkeds
    };
  },
	template: '\
    	<ul v-if="model.length > 0">\
      	<li><b>Checkeds:</b> {{ check }}</li>\
   ...