title: Vue Element.ui tree, emit reload event
body: <p>I create a SPA on Vue (something like a cloud disk), using the <a href="http://element-cn.eleme.io/#/en-US/component/tree" rel="noreferrer">Element.ui tree</a> 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.</p>
  
  <p>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:</p>
  
  <pre><code>#root_id #subroot_id # ... #parent_id #this_id
  </code></pre>
  
  <p><strong>The problem</strong> 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.</p>
  
  <p>Client tree template</p>
  
  <pre><code>&lt;el-tree
   :props="defaultProps"
   :load="loadNode"
   @node-click="handleNodeClick"
   :expand-on-click-node="false"
   lazy
   node-key="id"
   ref="tree"
   /&gt;
  </code></pre>
  
  <p>Loading new nodes</p>
  
  <pre><code>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)
  }
  </code></pre>