How to Add and Delete row in element-plus tree in Vue3

Question

I want to add and delete row to element plus tree with buttons above the tree.

   interface Tree {
  id?: number
  label: string
  isPenultimate?: boolean
  children?: Tree[]
}



const data: Ref<Tree[]> = ref([
  {
    id: 1,
    label: '전체 게시판',
    isPenultimate: true,
    children: [
      {
        id: 2,
        label: '공지사황',
      },
      {
        id: 3,
        label: '제휴사 공지',
        isPenultimate: true,
        children: [
          {
            id: 4,
            label: '월간 상품전략',
          },
          {
            id: 5,
            label: '상품비교',
          },
          {
            label: '생명보험 Ⅰ',
          },
          {
            id: 6,
            label: '생명보험 Ⅱ',
          },
          {
            id: 7,
            label: '손해보험',
          },
          {
            id: 8,
            label: '시책',
          },
          {
            id: 9,
            label: '직급별 수수료 예시표',
          },
        ],
      },
]
}
])
`


const append = (datas: Tree) => {
  const newChild = { id: 22, label: 'testtest', children: [] }
  if (!datas.children) {
    datas.children = []
  }
  datas.children.push(newChild)
  data.value = [...data.value]
}

const remove = (node: Node, datas: Tree) => {
  const parent = node.parent
  const children: Tree[] = parent.data.children || parent.data
  const index = children.findIndex((d) => d.id === datas.id)
  children.splice(index, 1)
  data.value = [...data.value]
}



       <!-- Events  -->
          <VXButtonStyled @click="show = false">Close</VXButtonStyled>
          <VXButtonStyled :bg="true" @click="handleShow">Show</VXButtonStyled>
          <!-- <HeaderButton type="button" @click="show = false">Close</HeaderButton> -->
          <!-- <HeaderButton type="button" @click="handleShow()">Show</HeaderButton> -->
          <VXButtonStyled :bg="true" @click="append(data)">Add</VXButtonStyled>
          <VXButtonStyled :bg="true" @click="remove(Node, data)">
            Delete
          </VXButtonStyled>

          <VXButtonStyled :bg="true" @click="resetChecked">
            Reset
          </VXButtonStyled>
        </HeaderButtonSection>

        <!-- Tree Element Plus-->
        <VXTreeStyled
          :ref="treeRef"
          :render-content="renderContent"
          :data="data"
          node-key="id"
          :default-expand-all="show"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
          highlight-current
          :props="{ class: customNodeClass }"
        />

I have four buttons above the tree, how can I interact with tree nodes, when the button clicked, I want to add and delete the row from the table, show and hide functions of the table too.

Example of the result I want to have four functions, show,hide,add and delete row for my element tree. PLease check the image above.