Vue Element.ui tree, emit reload event

Question

I create a SPA on Vue (something like a cloud disk), using the Element.ui tree component, to display the folder tree. The problem is that the tree itself does not load everything at once, but is loaded sequentially with the help of the lazy modifier.

The server part is mongoose + mongoose-path-tree. The use of the mongoose-path-tree means, that a tree storage scheme in the database is next: each node does not know about its children, but the children store their full path to the root element:

#root_id #subroot_id # ... #parent_id #this_id

The problem is that if the user makes changes to the tree (loads the file, creates a new folder, etc.) and the server accepts them, then how to notify the tree that it needs to load new data. Element ui in its documentation does not describe how to capture an event to cause the redrawing of a tree.

Client tree template

<el-tree
 :props="defaultProps"
 :load="loadNode"
 @node-click="handleNodeClick"
 :expand-on-click-node="false"
 lazy
 node-key="id"
 ref="tree"
 />

Loading new nodes

loadNode: async function (node, resolve) {
try {
  let firstGeneration = await foldersAPI.get(this.$store.state.user.myDrive);
  if (node.level === 0) {
    return resolve(firstGeneration.data.folder.children);
  } else {
    var data;
    if (node.data.hasChildren) {
      let children = await foldersAPI.get(node.data._id);
      console.log(children);
      data = children.data.folder.children;
    } else {
      data = [];
    }
    resolve(data);
  }
} catch (e) {
  console.log(e)
}

Answer 1

My solution was to simply rerender the treeview by adding the v-if attribute to the treeview and then creating a method

reload() {
    this.show = false;
    this.$nextTick(() => {
         this.show = true
    })
}

Calling that reload function then properly reloads the treeview