SOURCE

new Vue({
  el: '#app',
  data: function() {
    return {
      mockId: 1,
      asRoot: false,
      expandAll: true,
      //visible: false,
      newNode: {},
      myNodeList: [
        {
          id: 666,
          name: 'level 1',
          children:[
            {
              id: 666,
              name: 'level 2'
            }
          ]
        }
      ]
    }
  },

  methods: {
    addNode() {
      if (!this.myNodeList[0].children) {
        //this.myNodeList[0].children = []
        Vue.set(this.myNodeList[0], 'children', [])
      }
      if (this.asRoot) {
        this.myNodeList.push({
          id: this.mockId++,
          name: this.newNode.name
        })
      } else {
        this.myNodeList[0].children.push({
          id: this.mockId++,
          name: this.newNode.name
          //,children: []
        })
      }
      //this.myNodeList = this.myNodeList.concat()
      this.newNode.name = ''
    }
  }
})

<div id="app">
  <el-row :gutter="10">
    <el-col :xs="24" :sm="12">
      <el-card>
        <del style="color: #FF0000">
          问题：添加几个子节点后，再新添加一个根节点，子节点消失
        </del>
        <p>
          tree组件展示：
        </p>
        <el-tree ref="tree" :data="myNodeList" highlight-current node-key="'id'" :props="{label: 'name', children: 'children'}" :default-expand-all="expandAll"
        node-key="id" @node-click="toggleCategoryNode">
        </el-tree>
        <p>
          ul li展示：
        </p>
        <ul>
          <li v-for="cate in myNodeList">
            {{cate.name}}
            <ul v-if="cate.children && cate.children.length > 0">
              <li v-for="child in cate.children">
                {{child.name}}
              </li>
            </ul>
          </li>
        </ul>
        <p>
          新增
        </p>
        <el-form :label-position="'right'" label-width="100px" :model="newNode"
        ref="cateForm">
          <el-form-item label="根节点">
            <el-switch v-model="asRoot" on-text="是" off-text="否" @change="toggleAsRoot">
            </el-switch>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="newNode.name">
            </el-input>
          </el-form-item>
          <el-button @click="addNode">
            添加
          </el-button>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</div>