I want to run v-network-graph when the user presses enter, basically, I wrote a function that will create nodes and edges when it runs, once that function runs I want to run the line <v-network-graph @keypress.enter="gr" :nodes='nodes' :edges='edges'/> I tried writing everything inside the function but it didn't work. I am new to javascript and Vue, so I'll be grateful for any suggestions.

My template looks like this:

<template>
<div>  
  <v-network-graph @keypress.enter="gr" :nodes='nodes' :edges='edges'/>
  </div>
</template>

My function looks like this:

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