append item in treeview vuetify

<template>
  <v-treeview :items="items" :open="open" @update:open="updateOpen">
    <template v-slot:prepend="{ item }">
      <v-icon v-if="item.children">mdi-folder</v-icon>
      <v-icon v-else>mdi-file</v-icon>
    </template>
    <template v-slot:label="{ item }">
      {{ item.name }}
    </template>
    <template v-slot:append="{ item, open }">
      <v-btn icon @click.stop="addItem(item)"> <!-- Step 1 -->
        <v-icon>mdi-plus</v-icon> <!-- Step 2 -->
      </v-btn>
    </template>
  </v-treeview>
</template>

<script>
export default {
  data() {
    return {
      open: [],
      items: [
        {
          id: 1,
          name: 'Item 1',
          children: [
            {
              id: 2,
              name: 'Item 1.1',
            },
          ],
        },
        // Add more items as needed
      ],
    };
  },
  methods: {
    addItem(parent) {
      const newItem = {
        id: Date.now(),
        name: 'New Item', // Customize as needed
      };
      if (!parent.children) {
        this.$set(parent, 'children', []); // Step 3
      }
      parent.children.push(newItem); // Step 4
      this.$set(this.open, [parent.id], true); // Step 5
    },
    updateOpen(value) {
      this.open = value;
    },
  },
};
</script>

<style scoped>
/ Add your custom styles as needed /
</style>