chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue

<template>
   <div id="visgraph"></div>
</template>

<script>
import vis from 'vis-network/dist/vis-network'
import { mapState, mapGetters } from "vuex"

export default {
   name: "App",
   data() {
      return {
         container: ''
      }
   },
   computed: {
      ...mapState(['persons', 'households', 'courses', 'relationships', 'householdLoadingIds']),
      ...mapGetters(['nodes', 'edges']),
      visgraph_data() {
         console.log('::: visgraph_data :::', this.nodes.length, 'nodes,', this.edges.length, 'edges')
         return {
            nodes: this.nodes,
            edges: this.edges
         }
      },
      refreshNetwork() {  // B
         console.log('refresh network')
         window.network.setData(this.visgraph_data)
      }
   },
   mounted() {
      console.log('mounted: init graph')
      this.initGraph()
   },
   methods: {
      initGraph() {
         this.container = document.getElementById('visgraph')

         // Instanciate vis objects in window variables, see vis-network.js
         window.network = new vis.Network(this.container, this.visgraph_data, window.options )  // A
      }
   }
/*
   TODO / TO CHECK / TO UNDERSTAND

   ///// A
   new vis.Network(), param 2: why we don't need to instanciate node and edges with new vis.DataSet like in example ?
   {
      nodes: new vis.DataSet(this.nodes),
      edges: new vis.DataSet(this.relationships)
   }
   ///// B
   refreshNetwork() computed: need to watch/listen event to force refreshing ?

*/
}
</script>

<style src="vis-network/dist/dist/vis-network.min.css"></style>
<style lang="scss" scoped>
div#visgraph {
   margin: 2em auto;
   height: 500px;
   border: 1px solid lightgray;
}
</style>