Using Vuetify's v-treeview load-children method isn't working with nuxt-content

Question

I have a Vuetify treeview setup in a NuxtJS app like so:

<v-treeview
  open-all
  color="white"
  class="info-pool"
  :load-children="loadChildren"
  :search="search"
  :filter="filter"
  :items="items">
  <template slot="label" slot-scope="{ item }">
    <a @click="CHANGE_INFO_TOPIC(item)"
       style="text-decoration: none; color: inherit;">{{ item.name }}</a>
  </template>
</v-treeview>

Whenever a node is opened, it's meant to load its children from NuxtJS's content folder like so:

async loadChildren(item) {
  let topicChildren = await this.$content(`${item.location}/${item.item_key}`).sortBy('id', 'asc').fetch()

  topicChildren.forEach((child) => {
    let subChildren = child.children ? [] : null;
    item.children.push({
      id: child.id,
      name: child.name,
      location: child.location,
      item_key: child.item_key,
      children: subChildren
    })
  })
}

This method works as intended, and I can see the desired results in the console log after the load-children method kicks off. The parent node's children key is populated with objects as intended. However, the node in the treeview itself remains empty as if its children was still an empty array.

What could be the reason for this?

• I tried manually pasting the content objects into the node's children array, and they showed up in the treeview. So I know it isn't the formatting of the objects coming from the content fetch method. It must be that the treeview isn't updating after the push.
• The official docs show them using a .json() method on the response, but my response is coming from content in array form so I don't believe I need to do that.
• While fetching from content is different than fetching from an API, I'm still populating the children array in the same manner.

Very confused as to why this method would successfully change the item's children array, but the treeview won't update to reflect it.

Update

This test method with a return is also not functioning

async loadChildren(item) {
  return await this.$content(`${item.location}/${item.item_key}`).sortBy('id', 'asc').fetch()
    .then(res => {item.children.push(...res)})
}

This hardcoded method is also not working. I've tried it with both pushing an array with one object, as well as just an object.

async loadChildren(item) {
  return item.children.push({
    id: 1,
    name: 'blah'
  });
},

The documentation states:

You can dynamically load child data by supplying a Promise callback to the load-children prop.This callback will be executed the first time a user tries to expand an item that has a children property that is an empty array.

So perhaps the issue is that the method needs to return a Promise callback that would push the child objects into the array.

But nuxt-content's fetch() method DOES return a Promise. And I can inspect the node in the component's computed data and see that it has been populated with children. But the node on the treeview still remains empty.

Answer 1

I had the same problem and found out that putting the tree root into the data also solves the problem.

Before I created the tree root and the first layer myself and not during load-children.

It seems that load-children has to be used for all child layers?