element tree 多個樹形控件使用同一個數(shù)據(jù)時，添加插入children為什么不會同步？

大佬們，看得明白我的描述嗎？請問為什么會這樣子呢？很急，一直沒解決，幫幫忙，會的幫忙解答一下了，謝謝?。?/p>

<template>
  <div>
    <h1>Tree One</h1>
    <el-tree
      key="tree-one"
      ref="treeOne"
      :data="data"
      :props="defaultProps"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>

    <h1>Tree Two</h1>
    <el-tree
      key="tree-two"
      ref="treeTwo"
      :data="data"
      :props="defaultProps"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>
  </div>
</template>

<script>
let id = 1000

export default {
  data () {
    return {
      data: [
        {
          id: 1,
          label: 'Level one 1',
          children: [
            {
              id: 4,
              label: 'Level two 1-1',
              children: [
                {
                  id: 9,
                  label: 'Level three 1-1-1'
                },
                {
                  id: 10,
                  label: 'Level three 1-1-2',
                  children: [
                    {
                      id: 11,
                      label: 'Level four 1-1-2-1'
                    },
                    {
                      id: 12,
                      label: 'Level four 1-1-2-2'
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: 'Level one 2'
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },

  methods: {
    // 自己手動同步數(shù)據(jù)，eval!!!!!
    /*
    append (data) {
      const newChild = { id: id++, label: 'testtest', children: [] }
      if (!data.children) {
        this.$set(data, 'children', [])
      }

      data.children.push(newChild)

      // eval hack, nextTick is required
      this.$nextTick(() => {
        this.$refs.treeTwo.store.setData(this.data)
      })
    },
    */
    
    // 替換整個data
    append (node, data, store) {
      const treeOne = this.$refs.treeOne
      const treeTwo = this.$refs.treeTwo
      console.log('tree', treeOne, treeTwo, treeOne === treeTwo) // trees are different

      const storeOne = treeOne.store
      const storeTwo = treeTwo.store
      console.log('store', storeOne, storeTwo, storeOne === storeTwo) // stores are different

      const nodeOne = storeOne.getNode(data.id)
      const nodeTwo = storeTwo.getNode(data.id)
      console.log('node', nodeOne, nodeTwo,
        nodeOne === nodeTwo,
        nodeOne === node,
        nodeTwo === node
      ) // nodes are different

      const dataOne = nodeOne.data
      const dataTwo = nodeTwo.data
      console.log('data', dataOne, dataTwo,
        dataOne === dataTwo,
        dataOne === data,
        dataTwo === data
      ) // all true!!!

      // just replace all the data of two tree
      const newChild = { id: id++, label: 'testtest', children: [] }

      const traverse = node => {
        return {
          id: node.id,
          label: node.label,
          children: (node.children ? node.children.map(traverse) : []).concat(node.id === data.id ? [newChild] : [])
        }
      }

      const traversed = this.data.map(traverse)

      this.data = traversed
    },


    remove (node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    },

    renderContent (h, { node, data, store }) {
      return (
        <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
          <span>
            <span>{node.label}</span>
          </span>
          <span>
            <el-button
              style="font-size: 12px;"
              type="text"
              on-click={() => this.append(data)}
            >
              Append
            </el-button>
            <el-button
              style="font-size: 12px;"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              Delete
            </el-button>
          </span>
        </span>
      )
    }
  }
}
</script>

<style lang="scss" scoped>

</style>