The following is an example of an array of objects, where the data consists of four levels of nested data.

here I display the children's data on the he-tree-vue when the user presses the toggle on a specific element then makes a request to the api, so later the data is added to a certain array value based on existing data to be displayed as child data.

[{ // class
      ClassID:"0ede11",
      Title:"Mandiri",
      children:[{ // course/subject
            CourseID:"0ec2",
            Title:"Math",
            children:[ // chapter
               {
                  ChapterId:"0ss23",
                  Title:"Test test",
               },
          {
                  ChapterId:"0ss23",
                  Title:"Test test"
               },
          {
                  ChapterId:"0se22",
                  Title:"Test test"
               },
        ]      
      },
      {
            CourseID:"rere43",
            Title:"History",
            children:[
               {
                  ChapterId:"0sse56",
                  Title:"Test test",
               },
          {
                  ChapterId:"0ss2qqq3",
                  Title:"Test test"
               },
          {
                  ChapterId:"0sefg22",
                  Title:"Test test"
               },
        ]      
      }
   ]
}]

how do I add data to specific children, here I use the he-tree-vue library to display a data tree that can be dragged.

now i use the following code, but it only works on the first child only.

getChapter(id, index) {
    this.API.getChapter(id, (data) => {
      console.log(data);
      // I'm still confused in this part, how to dynamically add data to specific child data at each level 
      const newData = [...this.playlistData];
      newData[index].children[index].children = data;
      this.playlistData = newData;
    },
    (err) => {
      console.log(err);
    });
 }

Thank you.