How to make a treeview with Vuetify?

I'm having a problem, and it's like doing a treeview with Vuetify:

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
          <div class="panel-heading">Example Component</div>
          <div class="panel-body">

<v-treeview :items="item"></v-treeview>
            <v-card>
              <v-toolbar card color="grey lighten-3">
                <v-icon>mdi-silverware</v-icon>
                <v-toolbar-title>Local hotspots</v-toolbar-title>
              </v-toolbar>

              <v-layout>
                <v-flex>
                  <v-card-text>
                    <v-treeview
                      v-model="tree"
                      :load-children="fetch"
                      :items="items"
                      activatable
                      active-class="grey lighten-4 indigo--text"
                      selected-color="indigo"
                      open-on-click
                      selectable
                      expand-icon="mdi-chevron-down"
                      on-icon="mdi-bookmark"
                      off-icon="mdi-bookmark-outline"
                      indeterminate-icon="mdi-bookmark-minus"
                    ></v-treeview>
                  </v-card-text>
                </v-flex>

                <v-divider vertical></v-divider>

                <v-flex xs12 md6>
                  <v-card-text>
                    <div
                      v-if="selections.length === 0"
                      key="title"
                      class="title font-weight-light grey--text pa-3 text-xs-center"
                    >Select your favorite breweries</div>

                    <v-scroll-x-transition group hide-on-leave>
                      <v-chip v-for="(selection, i) in selections" :key="i" color="grey" dark small>
                        <v-icon left small>mdi-beer</v-icon>
                        {{ selection.name }}
                      </v-chip>
                    </v-scroll-x-transition>
                  </v-card-text>
                </v-flex>
              </v-layout>

              <v-divider></v-divider>

              <v-card-actions>
                <v-btn flat @click="tree = []">Reset</v-btn>

                <v-spacer></v-spacer>

                <v-btn class="white--text" color="green darken-1" depressed>Save
                  <v-icon right>mdi-content-save</v-icon>
                </v-btn>
              </v-card-actions>
            </v-card>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    breweries: [],
    isLoading: false,
    tree: [],
    types: [],
    info:null,
    item: [
        {
          id: 1,
          name: 'Applications :',
          children: [
            { id: 2, name: 'Calendar : app' },
            { id: 3, name: 'Chrome : app' },
            { id: 4, name: 'Webstorm : app' }
          ]
        },
        {
          id: 5,
          name: 'Documents :',
          children: [
            {
              id: 6,
              name: 'vuetify :',
              children: [
                {
                  id: 7,
                  name: 'src :',
                  children: [
                    { id: 8, name: 'index : ts' },
                    { id: 9, name: 'bootstrap : ts' }
                  ]
                }
              ]
            },
            {
              id: 10,
              name: 'material2 :',
              children: [
                {
                  id: 11,
                  name: 'src :',
                  children: [
                    { id: 12, name: 'v-btn : ts' },
                    { id: 13, name: 'v-card : ts' },
                    { id: 14, name: 'v-window : ts' }
                  ]
                }
              ]
            }
          ]
        }
    ]
    }),
  computed: {
    items() {
      const children = this.types.map(type => ({
        id: type,
        name: this.getName(type),
        children: this.getChildren(type)
      }));

      return [
        {
          id: 1,
          name: "Plan de cuenta",
          children
        }
      ];
    },
    selections() {
      const selections = [];

      for (const leaf of this.tree) {
        const brewery = this.breweries.find(brewery => brewery.id === leaf);

        if (!brewery) continue;

        selections.push(brewery);
      }

      return selections;
    },
    shouldShowTree() {
      return this.breweries.length > 0 && !this.isLoading;
    }
  },

  watch: {
    breweries(val) {
      this.types = val
        .reduce((acc, cur) => {
          const type = cur.brewery_type;

          if (!acc.includes(type)) acc.push(type);

          return acc;
        }, [])
        .sort();
    }
  },
mounted(){
 return fetch(this.item)
        .then(res => res.json())
        .then(data => (this.info = data))
        .catch(err => console.log(err))

},
  methods: {
    fetch() {
      if (this.breweries.length) return;

      return fetch("http://software.local/rubrosjson")
        .then(res => res.json())
        .then(data => (this.breweries = data))
        .catch(err => console.log(err));

    },
    getChildren(type) {
      const breweries = [];

      for (const brewery of this.breweries) {
        if (brewery.brewery_type !== type) continue;

        breweries.push({
          ...brewery,
          name: this.getName(brewery.name)
        });
      }

      return breweries.sort((a, b) => {
        return a.name > b.name ? 1 : -1;
      });
    },
    getName(name) {
      return '${name.charAt(0).toUpperCase()}${name.slice(1)}';
    }
  }
};
</script>

The script will find two treeview, one that calls a url and the other that refers to an array of data: function () with a variable item

Although the treeview works correctly the problem is that I need the second treeview that uses the fetch function, load one more level in the structure:

Tabla treeview en Mysql:[id] [name] [brewery_type]

brewery_type is the reference you have to take to go gregar levels, but only let me add two.

The first treeview, which is the simplest:

<v-treeview :items="item"></v-treeview>

I do not want to take the data from data: function () but from Mysql, but I'm not finding the information to do it, that is to be able to build all the levels that have item in the data but take it to Mysql. IT IS A PROJECT IN LARAVEL + VUEJS