vue elementui中实现动态增加删除一行

<div id="root">
  <pre>
  {{data}}
  </pre>
  <hr />
  <el-tree
    :data="data"
    node-key="id"
    default-expand-all
    :props="treeProps"
    :expand-on-click-node="false"
  >
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <input type="text" v-model="data.val" />
      <span>
        <el-button
          type="text"
          size="mini"
          @click="() => append(data)"
          v-if="node.level<4"
        >
          增加子级
        </el-button>
        <el-button type="text" size="mini" @click="() => remove(node, data)">
          删除
        </el-button>
      </span>
    </span>
  </el-tree>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<link
  rel="stylesheet"
  href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
  let testId = 666;

  const vm = new Vue({
    el: "#root",
    data() {
      return {
        treeProps: {
          label: "name",
        },
        data: [
          // {
          //   id: 1,
          //   label: "一级 3",
          //   children: [],
          // },
        ],
      };
    },

    created() {
      this.data = [
        { id: 1, val: "1" },
        { id: 2, val: "2" },
        { id: 3, val: "3" },
      ];
    },

    methods: {
      handleNodeClick(data) {
        console.log(data);
      },

      append(data) {
        const newChild = { id: testId++, name: "testtest", children: [] };
        if (!data.children) {
          this.$set(data, "children", []);
        }
        data.children.push(newChild);
      },

      change(node, data) {
        alert("切换逻辑");
      },

      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);
      },
    },
  });
</script>