VisJS dynamic edge addition bug

by Max Sinev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
<div id="app">
  <button type="button" class="btn btn-primary" @click="clearGraph">Clear Graph</button>
  <button type="button" class="btn btn-primary" @click="addNodes">Add nodes</button>
  <button type="button" class="btn btn-primary" @click="addEdges">Add edges</button>
  <div id="vis-graph"/>
</div>

CSS

#vis-graph {
  width: 500px;
  height: 500px;
}

Vue

new Vue({
  el: "#app",
  data() {
  	nodesArray = [
      {id: 0, label: 0, x: -147, y: -77},
      {id: 1, label: 1, x: -186, y: 88},
      {id: 2, label: 2, x: 8, y: 160},
      {id: 3, label: 3, x: 159, y: 28},
      {id: 4, label: 4, x: 45, y: -111}
    ]
  
  	edgesArray = [
      {from: 0, to: 1},
      {from: 0, to: 1},
      {from: 0, to: 2},
      {from: 0, to: 3},
      {from: 0, to: 4},
      {from: 0, to: 4},
      {from: 1, to: 2},
      {from: 1, to: 3},
      {from: 1, to: 3},
      {from: 2, to: 3},
      {from: 2, to: 4},
      {from: 3, to: 4}
    ]
  
    return {
      container: null,
      options: {},
      nodesArray: nodesArray,
      nodes: new vis.DataSet(nodesArray),
      edgesArray: edgesArray,
      edges: new vis.DataSet(edgesArray)
    }
  },
  mounted() {
    this.container = document.getElementById('vis-graph')
    this.network = new vis.Network(this.container, {nodes: this.nodes, edges: this.edges}, this.options)
      },
  methods: {
  	clearGraph() {
      this.nodes.clear()
      this.edges.clear()
    },

    addNodes() {
      this.nodes.add(this.nodesArray)
    },

    addEdges() {
      this.edges.add(this.edgesArray)
    },
  }
})