title: Vue accessing a child components computed property
body: <p>So I'm using a third party vue component called 'vue-tree-list' here's the link                   -&gt;   <a href="https://github.com/ParadeTo/vue-tree-list" rel="nofollow noreferrer">https://github.com/ParadeTo/vue-tree-list</a></p>
  <p>in the component it has a computed property that basically analyzes the tree structure to find the right place for a new leaf/node to be inserted.</p>
  <p>In my parent component I did this:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;py-8 px-5&quot; style=&quot;min-height: calc(100vh - (112px + 2.75rem))&quot;&gt;
      &lt;div class=&quot;flex flex-col w-full&quot;&gt;
        &lt;button class=&quot;cursor-pointer relative flex flex-row items-center h-10 focus:outline-none &quot; 
         &gt;
          &lt;span class=&quot;text-sm tracking-wide truncate ml-6&quot;&gt;Add Node&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;VueTreeList
       @click=&quot;onClick&quot;
       @change-name=&quot;onChangeName&quot;
       @delete-node=&quot;onDel&quot;
       @add-node=&quot;onClick&quot;
       ref=&quot;tree&quot;
       :model=&quot;data&quot;
       default-tree-node-name=&quot;New Depot&quot;
       default-leaf-node-name=&quot;New Driver&quot;
       v-bind:default-expanded=&quot;false&quot;
       &gt;
        &lt;template v-slot:leafNameDisplay=&quot;slotProps&quot;&gt;
          &lt;a class=&quot;text-orange-primary mr-4&quot;&gt;
             &lt;span&gt;{{ slotProps.model.name }}&lt;/span&gt;
          &lt;/a&gt;
        &lt;/template&gt;
        &lt;span class=&quot;icon&quot; slot=&quot;addTreeNodeIcon&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;icon&quot; @click.stop=&quot;test()&quot; slot=&quot;addLeafNodeIcon&quot;&gt;＋&lt;/span&gt;
         
         ^INSTEAD OF CALLING THE DEFAULT EVENT 'add-child' WHICH IMMEDIATELY INSERTS A NODE I DIVERTED IT INSTEAD SINCE I WANT THE USER TO INPUT THEIR DATA BEFORE INSERTING INSIDE THE TREE
  
        &lt;span class=&quot;icon&quot; slot=&quot;editNodeIcon&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;icon&quot; slot=&quot;delNodeIcon&quot;&gt;✂️&lt;/span&gt;
        &lt;span class=&quot;icon&quot; slot=&quot;leafNodeIcon&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;icon&quot; slot=&quot;treeNodeIcon&quot;&gt;&lt;/span&gt;
      &lt;/VueTreeList&gt;
        &lt;Modal ref=&quot;modal&quot; :title=&quot;modalTitle&quot; :size=&quot;modalSize&quot; :height=&quot;modalHeight&quot;&gt;
          &lt;div v-if=&quot;modalContent == 'new'&quot;&gt;
            &lt;DriverLookUp /&gt;
            &lt;VehicleLookUp /&gt;
          &lt;/div&gt;
        &lt;/Modal&gt;
    &lt;/div&gt;
    
  &lt;/template&gt;
  
  &lt;script&gt;
  import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
  import { DriverLookUp, VehicleLookUp  } from '@/components/forms/depot'
  
  export default {   ONLY ADDED THE RELEVANT FUNCTIONS SINCE IT WOULD BE VERY LONG
      components: {
        VueTreeList, Modal, DriverLookUp, VehicleLookUp
      },
        test(){
           this.$refs.tree.rootNode() &lt;--- the computed method that I want to access 
        },
  }...
  </code></pre>
  <p>The problem with this is that the computed property for some reason throws an error on missing properties which doesn't make sense since it has already been rendered. Is there a way to trigger a child components computed property?</p>
  <p><a href="https://github.com/ParadeTo/vue-tree-list/blob/master/src/VueTreeList.vue" rel="nofollow noreferrer">https://github.com/ParadeTo/vue-tree-list/blob/master/src/VueTreeList.vue</a> &lt;--- here's the link of the child component that I'm working with</p>