vue 树形控件-封装思路

问题：自己想封装一个树形控件，看了看element-ui的源码有点麻烦（mei,kan,ming,bai）直接放弃了，目前组件递归没有问题，点击有子集的复选框后所有子集的checked可以跟着改变，但是状态不变，加上checkbox后就感觉懵逼了
目标：1.实现全选 2.查询 3.删除
有大神可以提供具体点的思路吗

<template>
  <li class="tree-item">
    <span @click="handlerToggle">
      <em v-if="hasChild" class="icon">{{open ? '-' : '+'}}</em>
      <em v-if="!hasChild" class="icon file-text"></em>
    </span>
    <input type="checkbox" v-model="data.checked" :value="data.id" @click="checkedChange(data,level)">
    <span>{{ data.name }}</span>
    <ul v-show="open" v-if="hasChild">
      <tree-item v-for="(item, index) in data.list" :data="item" :key="index" :level="level+1"></tree-item>
    </ul>
  </li>
</template>
<script>
export default {
  name: 'TreeItem',
  props: {
    data: {
      type: [Object, Array],
      required: true
 },
    level: {
      type: Number,
      default: 0
 }
  },
  data() {
    return {
      open: false,  // 是否展开
 checkedArr: []
    }
  },
  computed: {
    // 是否有下一级
 hasChild () {
      if (this.data.list && this.data.list.length ) {
        // console.log(1)
 }
      return this.data.list && this.data.list.length
    }
  },
  methods: {
    // 展开收缩
 handlerToggle () {
      if (this.hasChild) {
        this.open = !this.open
      }
    },
    // 本层数据添加checked
 addChecked (obj) {
        if (!obj.hasOwnProperty('checked')) {
          obj.checked = false
 }
      return obj
 },
    // 每个多选框状态改变
 checkedChange (data, level) {
      if (data.list && data.list.length > 0) {
        this.recurrenceCheckedChange(data);
      } else {
        data.checked = !data.checked;
      }
    },
    // 递归修改多选框状态改变
 recurrenceCheckedChange (data) {
      data.list.forEach((item) => {
        item.checked = !item.checked;
        if (item.list && item.list.length > 0 ) {
          this.recurrenceCheckedChange(item)
        }
      })
    }
  },
  watch: {
  },
  created () {
  },
  mounted () {
    this.addChecked(this.data);
  }
}
</script>
<style>
  .tree-item {
    margin-top: 10px;
  }
  .tree-item ul {
    margin-left: 22px;
  }
  em.icon {
    display: inline-block;
    width: 15px;
    background-repeat: no-repeat;
    cursor: pointer;
  }
</style>