So I'm making a folder list like structure in VueJs my problem is traversing down this object tree. Here's my tree:

    var data= {
      name:"root"
      id:0,
      isLeaf:false,
      parents:null,
      children:[
          {
        type: "TEST",
        linkageId: {},
        linkageWebProfileId: {},
        isActive: true,
        isLeaf: false,
        name: "TESTDATA",
        id: "1000",
        children:[
          {
            type: "TEST",
            linkageId: {},
            linkageWebProfileId: {},
            isActive: true,
            isLeaf: false,
            name: "TESTDATA",
            id: "1001",
          },
          {
            type: "TEST",
            linkageId: {},
            linkageWebProfileId: {},
            isActive: true,
            isLeaf: false,
            name: "TESTDATA",
            id: "1002",
          }
        ]
      },
      {
        type: "TEST",
        linkageId: {},
        linkageWebProfileId: {},
        isActive: true,
        isLeaf: false,
        name: "TESTDATA",
        id: "1003",
        children:[
          {
            type: "TEST",
            linkageId: {},
            linkageWebProfileId: {},
            isActive: true,
            isLeaf: false,
            name: "TESTDATA",
            id: "1004",
          },
          {
            type: "TEST",
            linkageId: {},
            linkageWebProfileId: {},
            isActive: true,
            isLeaf: true,
            name: "TESTDATA",
            id: "1005",
          }
        ]
      },
    
    ]
    
 }

I already made a function that makes a path from the new leaf to the last ancestor before the root, I can access root anytime by just referencing 'data'.

function makePath() {
 let ids=[];
        let treePointer=params //params is just a pointer to the newly created leaf

        while(treePointer.name!=="root"){
          ids.push(treePointer.id)
          treePointer=treePointer.parent
        } //traverses up to the root
}

If I were to insert at folder 1002 it would return:

[1649689828862, '1002', '1000']  //the first one is the auto generated id

children: null
id: 1649731709654
isLeaf: true
name: "New Leaf"
parent: A
children: Array(0)
    id: "1002"
    isActive: true
    isLeaf: false
    linkageId: Object
    linkageWebProfileId: Object
    name: "TESTDATA"
      parent: A
      children: Array(2)
      id: "1000"
      isActive: true
      isLeaf: false
      linkageId: Object
      linkageWebProfileId: Object
      name: "TESTDATA"
         parent: A
         children: Array(2)
         id: 0
         isLeaf: false
         name: "root"
         parent: null    
//This is the generated object that insert leaf creates, an inverted tree with the new leaf at the top

After this I remove the first index of the array, reverse it so the the new leaf's parent is the last index and save the newly generated id in a another variable My problem now is when I want to traverse from root down the tree and look for the new leaf parent it won't return the expected result, this is for when I want to insert a new file inside the same folder

 treePointer=this.data //resets treePointer to the root  

 ids.shift() //remove the leaf from the path

 ids.reverse() //make the path left to right the last one being the parent's leaf

 const children = [...this.data.children]  //gets the children of the root

        while(treePointer.id !== ids[ids.length-1]) {  //short circuit when the pointer is at leaf's parent
          treePointer= children.find(obj=>{ // keep reassigning treePointer until it traverses to the leaf's parent
            let node;
            for(var x =0; obj.id!== ids[x] && x < ids.length;x  , node=x) //traverses through the path and gets the correct id of the current array of children
            return obj.id === ids[node] //returns the obj in the treePointer's array of children that has the correct id
          })
        } 

I've re evaluated that code and logically it is sound however what I don't get is that the treePointer inside the while loop doesn't seem to get reassigned find it just remains at root when I console log it but eventually the treePointer gets to a node that doesn't have the property 'id' which means it has strayed to a wrong path and didn't short circuit and kept traversing down which does not make sense. Is there something wrong with my find function or am is this syntactical error on my end?

The code for the entire component

<template>
  <div  style="min-height: calc(100vh - (112px   2.75rem))">
    <div >
      <button  @click="addNode">
        <span >Add Folder</span>
      </button>
    </div>
    <VueTreeList
      @click="onClick"
      @change-name="onChangeName"
      @delete-node="onDel"
      @add-node="onAddNode"
      ref="tree"
      :model="data"
      default-tree-node-name="New Folder"
      default-leaf-node-name="New File"
      v-bind:default-expanded="false"
    >
      <span  slot="addTreeNodeIcon">