Node structure does not update when the data is updated via code

[tauseef-r-kazi]

I am using v-model="pointer" to track the currently selected node. however, if I add a child node using the below code it does not reflect under this.pointer.children array. How can the under lying graph object be updated from the parent component?

addCondition(data) {
          const newData = {
                name: "NewNode",
                id: this.indexCounter++,
                type: "newType",
                children: []
          }
          data.children.push(newData);
      }

component definition: <tree ref="tree" class="tree-class" :data="graph" v-model="pointer" node-text="name" layoutType="horizontal" :identifier="getId" @clickedText="onNodeTextClick" :zoomable="true" :marginX="0" :marginY="0">

[fardinvahdat]

yes youre right. use :key for update your DOM whenever your state updated. your code should by s.t like this: <tree :key="counter" ref="tree" class="tree-class" :data="graph" v-model="pointer" node-text="name" layoutType="horizontal" :identifier="getId" @clickedText="onNodeTextClick" :zoomable="true" :marginX="0" :marginY="0"/>`

addCondition(data) {
          const newData = {
                name: "NewNode",
                id: this.indexCounter++,
                type: "newType",
                children: []
          }
          data.children.push(newData);
this.counter++
      }