Load vuetify datatable in vuetify treeview

I am trying to create a Treeview with multiple Level of Children. When I click on the last child, I want to run an Axios call to pull information for this child from the datatabase and display that in a datatable. Of course when I click on another child, I need the data erased and the datable refreshed or if no data is available the message should come up again. I have used vuetify to implement it. I am not sure I fully understand selected (). I first did my AJAX call in there but that wasnt really successful and it would adding up the data to the previous. Then I added @update:active=“clickOnNode” and created the method to pul in the data. That seems to work sometimes, but not all the time, specially when I try to go back to a child which has been open before. The data which is returned from the server is correct, so it must be in vue and how I deal with it. I must be doing something terrible wrong. Am I right to use @update:active or is it supposed to go into selected () ? And how to I refresh the datatable with the new data?

<template>
  <v-card>
    <v-card-title class="indigo white--text headline">
      Container Overview
    </v-card-title>
    <v-row
        class="pa-4"
        justify="space-between"
    >
      <v-col cols="5">
        <v-treeview
            :active.sync="active"
            :items="allTopContainers"
            :load-children="fetchChildren"
            :open.sync="open"
            item-key="id"
            activatable
            color="warning"
            open-on-click
            transition
            @update:active="clickOnNode"
        >

          <template v-slot:prepend="{ item, active }">
            <v-icon v-if="!item.children">mdi-account</v-icon>
          </template>

        </v-treeview>
      </v-col>

      <v-divider vertical></v-divider>
      <v-col
          class="d-flex"
      >

        <v-scroll-y-transition mode="out-in">
        <div
            v-if="!selected"
            class="title grey--text text--lighten-1 font-weight-light"
            style="align-self: center;"
        >
          No Data
        </div>

        <v-card
            v-else
            :key="selected.id"
            class="pt-6"
            flat
        >

          <v-divider></v-divider>

          <v-row
              class="text-left"
              tag="v-card-text"
          >
            <v-col
                class="mr-4 mb-2"
            >
              <v-data-table
                  :headers="headers"
                  :items="containerContent"
                  :items-per-page="100"
                  class="elevation-1"
              ></v-data-table>
            </v-col>
          </v-row>
        </v-card>
        </v-scroll-y-transition>
      </v-col>
    </v-row>
  </v-card>
</template>


<script>
import 'vuetify/dist/vuetify.min.css'
export default {
  data: () => ({
    allTopContainers:[],
    active: [],
    open: [],
    containerContent: [],

    headers: [
      {
        text: 'Qty',
        align: 'start',
        sortable: false,
        value: 'qty',
      },
      { text: 'Barcode', value: 'barcode' },
      { text: 'No', value: 'no' },
      { text: 'Name', value: 'name' },
    ],
  }),


  computed: {
     items () {
       return [
         {
           name: 'Container',
           children: this.allTopContainers,
         },
       ]
     },

    selected () {

      if (!this.active.length) return undefined
      const id = this.active[0]

         /*
          .then(res => res.json())
          .then(json => (this.containerContent.push(...json)))
          .catch(err => console.warn(err))
          */
          //  return this.allTopContainers.find(allTopContainer => allTopContainer.id === id)
    },
  },

  mounted() {
    this.getZones();
  },

  methods: {

      getZones() {
        axios.get('/get-all-zones').then(response => {
          this.allTopContainers = response.data;
        });
      },

      async fetchChildren (item) {

        if(item.containerType != '1') {
          return fetch('/get-children-containers/' + item.containerType + '/' + item.id)
              .then(res => res.json())
              .then(json => (item.children.push(...json)))
              .catch(err => console.warn(err))
        }
      },

      clickOnNode(node){

          axios.get('/get-container-content/' + node)

              .then(response => {
                this.containerContent = response.data;
                this.$parent.reload();
              });
             // .catch(err => console.warn(err))
      }

  } // end of methods
}
</script>