"dependencies": {
    "vis-network": "^5.4.1"
  },

//main.js

import { Network } from 'vue-vis-network';
import App from '@/App.vue';
import router from '@/router';
import store from '@/store';

Vue.component('network', Network);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

//MulticastFlows.vue

<template>
  <div>
    <v-container fluid grid-list-xs>
      <v-layout row class="multicastFlowsLayout">
        <v-flex d-flex xs8 class="mr-1">
          <MulticastFlowGraph
                  :loadingElements="loadingElements"
                  :nodes="nodes"
                  :edges="edges"
                  :options="options"
          />
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
export default {
  name: 'MulticastFlows',
  components: {
    MulticastFlowGraph,
  },
  data() {
    return {
      loadingElements: false,
      nodes: [
        {
          id: '1',
          label: '1',
        },
        {
          id: '2',
          label: '2',
        },
      ],
      edges: [{ from: '1', to: '2', label: '1122' }],
      options: {
        layout: {
          hierarchical: {
            nodeSpacing: 200,
            levelSeparation: 100,
            edgeMinimization: false,
            blockShifting: false,
            direction: 'UD',
            sortMethod: 'directed',
          },
        },
        edges: {
          shadow: { enabled: true },
          arrows: 'to',
          arrowStrikethrough: false,
          smooth: {
            type: 'continuous',
          },
        },
        nodes: {
          physics: false,
          shape: 'box',
          shadow: { enabled: true },
        },
        physics: {
          enabled: false,
        },
      },
    };
  },
};
</script>

<style scoped>
  .multicastFlowsLayout {
    position: absolute;
    width: 98%;
    height: 95%;
  }
</style>

//MulticastFlowGraph.vue

<template>
    <v-card class="pa-2 mx-2 networkCard elevation-5">
        <network class="network"
                 ref="network"
                 :nodes="nodes"
                 :edges="edges"
                 :options="options"/>
    </v-card>
</template>

<script>
export default {
  name: 'MulticastFlowGraph',
  props: [
    'nodes',
    'edges',
    'options',
  ],
  data() {
    return {
    };
  },
};
</script>

<style scoped>
    .network {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;

    }
</style>

DevTools failed to load SourceMap: Could not load content for webpack://vueVisNetwork/node_modules/vis-network/dist/vis-network.esm.min.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
``

on(event, callback) {
      this.network.moveTo(event, callback);
    },
    off(event, callback) {
      this.network.moveTo(event, callback);
    },
    once(event, callback) {
      this.network.moveTo(event, callback);
    },

on(event, callback) {
      this.network.on(event, callback);
    },
    off(event, callback) {
      this.network.off(event, callback);
    },
    once(event, callback) {
      this.network.once(event, callback);
    },

<template>
    <el-container >
            <el-main>

                <network ref="network" :nodes="nodes" :edges="edges" :options="options"> </network>                        

                 <button @click="get_data">GetData</button>

            </el-main>
	</el-container>
</template>

<script>
    export default {
    	components: { Notification },
        data () {
            return {
              nodes: [],
              edges: [],
              options: []
            }
        },

        methods:
        {
          get_data()
          {

            axios.get(base_url + '/graph')
               .then((response) => {
                this.nodes = response.data.nodes;
                this.edges = response.data.edges;
                }).catch((error) => {
                          console.log(error);
                        });  
          
          }

        },
    }
</script>

import vueVisNetwork from 'vis-network'

import locale from 'element-ui/lib/locale/lang/ru-RU'
window.axios = require('axios');
Vue.use(ElementUI, { locale })
Vue.use(Router)
Vue.component('network', vueVisNetwork.Network);

window.base_url = "http://127.0.0.1:8000"

new Vue({
  el: '#app',
  locale: 'ru',
  render: h => h(App)
});

@import "vue-vis-network/dist/vueVisNetwork.css";

$ npm install --save vue-vis-network
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/vue-vis-network - Not found
npm ERR! 404
npm ERR! 404  'vue-vis-network@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

[Vue warn]: You may have an infinite update loop in watcher with expression "options"

found in

---> <Network> at src/components/Network.vue
       ...

options: {
    ...
    layout: {
          hierarchical: {
            enabled: true,
            sortMethod: 'directed'
          }
    },
    ...
    edges: {
         ...
          smooth: {
            type: 'cubicBezier',
            forceDirection: 'horizontal',
            roundness: 0.5
          }
    }
}