.add() method issue - Githubissues

when i use cy.add method ,i bind it at a double click event,but i must repeat the operation to see it in the container. Here is my code,i return a cy from drawgraph method:
<template>
<div class="Cytoscape">
  <h1>图录入</h1>
<!-- <el-row style="justify-content: center">
    <el-button plain @click="begingra">开始录入</el-button>
    <el-button type="primary" plain>录入教程</el-button>
    <el-button type="success" plain>提交录入</el-button>
    <el-button type="warning" plain>重置录入</el-button>
    <el-button type="danger" plain>删除录入</el-button>
</el-row> -->
<div class="Container">
<div class="Cycon">
    <div id="cy">  
      <div id = "data"> </div>
    </div>
</div>
</div>
</div>
</template>

<script>
import drawgraph  from '/home/xsz/文档/LinNeo/neo/src/static/img/JS/graph.js'
  export default {
    name: 'Gratest',
    components: {},
    data() {
      return {
        nodes: [],//{data: {id: 'n0',age: "12"},},{data: {id: 'n1',age: "12"},},{data: {id: 'n2',age: "12"},},{data: {id: 'n3',age: "12"},},],
        edges: [//[{data: {source: 'n2',target: 'n1'}},{data: {source: 'n2',target: 'n3'}},{data: {source: 'n2',target: 'n0'}},{data: {source: 'n1',target: 'n0'}},{data: {source: 'n0',target: 'n1'
          //   }
          // },
        ],
        cy : ''
      }
    },

    //创建函数
    created() {
    },//创建函数结尾

    //挂载函数
    mounted() {

     this.begin();
    },//挂载函数结束

    //方法集合
    methods: {
        begin(){
        var cy =  drawgraph(this.nodes,this.edges,'name',"cy"); 
        cy.on(  //鼠标左击选中节点打印节点数据
        'tap', function(evt)
        {
          console.log(evt)
        if (evt.target._private.group=='nodes'||evt.target._private.group=='edges')
        {
          var node = evt.target;
          var map = JSON.stringify(node.data())
          console.log(map);
        }
        }
        )

 //     新建方法     
      var newnodeid = 0;
      var edgnodeids = [];
      var newedge = 0;
      cy.on(
        'vdblclick', (evt)=>{   //cy空白双击操作
          // console.log(evt)
          if( evt.target._private.group!='nodes'&&evt.target._private.group!='edges'){  //判断是否点击在节点和关系上
            var oEvent=evt;//接收传入事件
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;   //获取页面纵向滚动距离
            var X =oEvent.originalEvent.clientX;  // 指定创建的DIV在文档中距离左侧的位置 
            console.log(X + '传入x')  //数据监控
            var Y =oEvent.originalEvent.clientY + scrollTop;  // 指定创建的DIV在文档中距离顶部的位置
            cy.add([//节点与数据添加操作
              { group: 'nodes', data: { id: newnodeid ,name:'新节点' }, position: { x: X , y: Y } 
            }, //实验数据,参数通过机器学习获得，数据集为节点位置x:0,95,151 y:92,95,176.6  绘制位置x:480,832,1034 y:505,516,816
            ])
            this.nodes.push({data: { id: newnodeid }})
            console.log(this.nodes)
            newnodeid +=1
            // cy.startBatch() 
          }  //添加插入节点到页面

          }
      )

      var edgnodeids = []
      var newedge = 0
      cy.on(  //鼠标左双击选中节点方法
        'cxttapstart', (evt)=>{   //oringin事件
        if( evt.target._private.group='nodes'){
          edgnodeids.push(evt.target._private.data.id)
          console.log('----------------')
          console.log(evt.target._private.data.id)
          console.log(edgnodeids)
          console.log(evt.target._private.data.id)  //节点输出标识
          if (edgnodeids.length >= 2){
            console.log('新创建关系')
            cy.add([//关系与数据添加操作
              { group: 'edges', data: { id: newedge, source:edgnodeids[0], target: edgnodeids[1] } } , //实
            ]);
            newedge += 1;
            edgnodeids = [];
        }}
          })

        }

    },//方法函数结尾

}
</script>

<style>
  .Cytoscape{
    background: 100%/100% linear-gradient(-65deg, rgb(9, 67, 90) 3%, rgb(7, 26, 82) 40%, rgb(8, 105, 114) calc(40% + 1px), rgb(8, 105, 114) 60%, rgb(23, 185, 120) calc(60% + 1px), rgba(23, 185, 120, 0.815) 68%, rgb(9, 67, 90) calc(68% + 1px), rgb(9, 67, 90) 100%);
    background-size: 150% 100%;
    background-position: center;
  }
  .Container{
    margin: 0 auto;
    margin-top: 50px;
    background: 100%/100% linear-gradient(65deg, rgba(9, 67, 90, 0.863) 3%, rgb(7, 26, 82) 40%, rgb(8, 105, 114) calc(40% + 1px), rgb(8, 105, 114) 60%, rgb(23, 185, 120) calc(60% + 1px), rgb(23, 185, 120) 68%, rgb(167, 255, 131) calc(68% + 1px), rgb(167, 255, 131) 100%);
    background-size : 200% 400%;
    background-position:center;
  }
  .Cycon{
    width: 95%;
    height: 800px;
    background: white;
    border-radius: 5px;
    border: 2px solid rgb(238, 232, 232);
  }
  #cy {
    width: 95%;
    height: 95%;
    margin: 0 auto;
    background: rgb(254, 255, 255);
    border-radius: 5px;
    border-color: black;
  }
  .Grabox{
    background: red;
  }
  h1 {
    font-size: 2.5em;
    color:rgb(255, 255, 255);
    margin-left: 15%;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .RightClickCard{
    width:100px;
    height: 60px;
    background: rgb(142, 248, 252);
    border-radius: 5px;
    /* box-shadow: 0px 0px 8px #1c1322; */
  }
  .textofnode{
    text-align: center;
    width:100px;
    height: 30px;
    margin: 0px;
    border-radius: 2px;
    border:0;
    background: white;
  }

  .textofnode:hover{
      background: rgb(0, 0, 0);
      color: #fff;
  }
  .textofnodedown{
    border-bottom: 1px solid black;
  }
</style>
cytoscape / cytoscape.js

.add() method issue #2963
