Communicate between Vue component and native code

Question

I building an application to display a connected graph, I found useful to make use of Vue.js for developing some functionalities.

For testing purpose, I tried to wrap up a simplest graph in a vue component, force directed layout, but the frame rate drops significantly (600 nodes in SVG, randomly connected each with 3 links => min FPS 2.4 max FPS ~9).

That is not acceptable for my scope.

My goal is to signal when user add/remove nodes to a vue component and backward, and in general signal an event on the graph to a vue component and backward.

Basically I want to keep the rendering of the graph in native code, for simplicity it would be ok to make use of the data structure and methods in a vue component. But I think I cannot do that, because vue would not find the corresponding UI.

Which approach should I use to communicate between the native coded graph and Vue components?

May I call directly internally the component, with smtg like vue.$data to make my graph react ?

Could you show a simple example to show how to access methods, props, events used internally in a vue component?

Below a little test (made use of Vivagraph library):

<template>
  <div>
    <div  id='graphContainer' ref="graphContainer"></div>
  </div>
</template>
<script>



    export default {
        data() {
            return {
              graph : Viva.Graph.graph(),
              graphics : Viva.Graph.View.svgGraphics()
            }
        },
        mounted() {

            // create an array, will make use of it later
            function range(start, stop, step) {
                if (typeof stop == 'undefined') {
                    // one param defined
                    stop = start;
                    start = 0;
                }

                if (typeof step == 'undefined') {
                    step = 1;
                }

                if ((step > 0 && start >= stop) || (step < 0 && start <= stop)) {
                    return [];
                }

                var result = [];
                for (var i = start; step > 0 ? i < stop : i > stop; i += step) {
                    result.push(i);
                }

                return result;
            };

            var randomNodes  = range(600);

            let v, u;
            for (var i = randomNodes.length - 1; i >= 0; i--) {
                v = randomNodes[i];


                for (var j = range(3).length - 1; j >= 0; j--) {
                    u = randomNodes[Math.floor(Math.random() * randomNodes.length)];

                    this.graph.addLink(v, u);
                }
                    
                this.graph.addNode(v);


            }
            

            
            
            this.renderer = Viva.Graph.View.renderer(this.graph, {
                graphics : this.graphics,
                container: this.$refs.graphContainer
            });

            this.renderer.run();
     
            //test
            window.graph = this.graph
        }
    }
</script>
<style lang="scss">
        
        svg, #graphContainer {
            width: 100%; 
            height: 100%;
        }


        
</style>