So I want to update my graph which I am creating using v-network-graphs, when a user enters a value in the input box.

setup(props,oa) {
    const nodes={}
    const edges={}
    const { prac } = toRefs(props)
    const n = reactive( prac.value )
    //  const n= prac.length
    for (let i = 0; i < n.length; i++) {
    nodes[`${n[i].oa}`] = {
    name: `${n[i].oa}`
  },
  nodes[`${n[i].Title}`] = {
    name: `${n[i].Title}`
  };
}
    for (let i=0;i<n.length;i++){      
      edges[`edge${i}`]={
        source:`${n[i].oa}`,
        target:`${n[i].Title}`
      }
    }   
    return { nodes, edges }
  }

So basically I want to replace oa with the value that the user enters and update the graph. I tried writing a method and updating the graph but it's not working, the graph just shows undefined as oa doesn't exist in the data.

This is my div

<div>
  <GraphWorld :nodes='nodes' :edges='edges'/>
  <input @keyup.enter="o" v-model="name2" />
  </div>

and this is my method (I have tried writing the method in other ways to, nothing is working)

methods: {
    o(){
      this.oa = this.name2
      console.log(this.oa)
    }
  }

I am new to javascript and vue, I will be grateful if you guys have any suggestions.