So I'm using a third party vue component called 'vue-tree-list' here's the link -> https://github.com/ParadeTo/vue-tree-list

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.

In my parent component I did this:

<template>
  <div  style="min-height: calc(100vh - (112px   2.75rem))">
    <div >
      <button  
       >
        <span >Add Node</span>
      </button>
    </div>
    <VueTreeList
     @click="onClick"
     @change-name="onChangeName"
     @delete-node="onDel"
     @add-node="onClick"
     ref="tree"
     :model="data"
     default-tree-node-name="New Depot"
     default-leaf-node-name="New Driver"
     v-bind:default-expanded="false"
     >
      <template v-slot:leafNameDisplay="slotProps">
        <a >
           <span>{{ slotProps.model.name }}</span>
        </a>
      </template>
      <span  slot="addTreeNodeIcon">