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.min'
import { mapState, mapGetters } from "vuex"

export default {
   name: "App",
   data() {
      return {
         network: {},
         options: {}
      }
   },
   computed: {
      ...mapState(['persons', 'households', 'courses', 'relationships', 'householdLoadingIds']),
      ...mapGetters(['nodes', 'edges']),
      getNetwork() {
         console.log('refresh network', this.network, 'with', this.nodes.length, 'nodes')
         this.network.setData({
            nodes: this.nodes,
            edges: this.edges
         })
      }, /*
      getNodes() {
         console.log('refresh nodes', this.nodes.length)
         /// BOUM
         this.network.setData({nodes: this.nodes})
         return this.nodes
      },
      getEdges() {
         /// BOUM
         //this.network.setData({edges: this.edges})
         return this.edges
      }  */
   },
   methods: {
      initGraph() {
         const container = document.getElementById('visgraph')
         this.network = new vis.Network(
            container, {
               nodes: new vis.DataSet(this.nodes),
               edges: new vis.DataSet(this.relationships)
            }, this.options
         )
      }
   },
   mounted() {
      console.log('mounted')
      this.initGraph()
   }
}
</script>

<style lang="scss" scoped>
div#visgraph {
   margin: 2em auto;
   height: 500px;
   border: 1px solid lightgray;
}
</style>