How to trigger mouseover events in vue2vis components

Question

I have been trying set up a network topology component using visjs, I am using the vue2vis package to do that. I followed the documentation to trigger event every time I click on a node but neither the hoverNode not the selectNode events are giving any console output. Am I doing something wrong. Below is my network component

<template>
  <div>
    <networking
      ref="network"
      :nodes="nodes"
      :edges="edges"
      :options="options"
      :events="['selectNode', 'hoverNode']"
      @hoverNode="onNodeHovered"
      @selectNode="onNodeHovered"
    ></networking>
  </div>
</template>
<script>
export default {
  name: "Network",
  props: {
    jigTopology: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      nodes: [],
      edges: [],
      options: {
        autoResize: true,
        width: "100%",
        height: "500px",
        clickToUse: true,
        nodes: {
          shape: "circle"
        },
        edges: {
          chosen: {}
        },
        layout: {
          hierarchical: {
            enabled: true,
            levelSeparation: 100
          }
        },
        interaction: {
          hover: true
        },
        manipulation: {
          enabled: true
        }
      }
    };
  },
  methods: {
    onNodeHovered(event) {
      console.log("hovered", this.$refs.network.getEventProperties(event));
    }
  },
  beforeCreate() {},
  created() {},
  mounted() {
    (this.nodes = this.jigTopology.nodes),
      (this.edges = this.jigTopology.edges);
    console.log("nodes", this.nodes);
    console.log("edges", this.edges);
  }
};
</script>
<style scoped>
.vis-network {
  overflow: visible;
}
</style>

The node and edge data is generated by another component and passed as props to this.

Answer 1

Make sure to check options > interactions > hover: true

interaction: {
  hover: true
}