Data binding does not work in a Vue project with v-network-graph

Question

I guess the root cause of the problem is in my implementation. I've pushed my code, but the main parts are these:

I created a very basic VueJS project. Added a typescript package ( v-network-graph). Created a data.ts file and put there this (I use js scripts, so I thought it is good to add a separate ts script):

export const nodes = {1: { name: "wheel_speeds", edgeWidth: 1, hue: 200 },
2: { name: "velocities", edgeWidth: 1, hue: 160 },};

export const edges = [];

After I added the graph template (myPage.vue)

      <div>
        <v-network-graph class="graph" :nodes="nodes" :edges="edges" />
      </div>

Later, I want to fill it:

          for (const property in this.selected_parameters) {

            const create_node = {};
            create_node.name = this.selected_parameters[property].name;

            nodes[this.selected_parameters[property].name] = create_node
          }

During the running the node will be extended. You can see the default vaules and the new ones together (the first two are the hard coded defaults):

The image: debugging the nodes structure

But later, I have only the two default ones on the screen. The re-rendering is missing. The html part is called.

I did a minimal change on the tutorials and I see no further error msg. The nodes is also added here:

<script>
import axios from 'axios';
import { nodes, edges, size, hues } from "./data";

export default {
  data() {
    return {
      nodes,
....

I followed tutorials like this. I also updated the node.js and the npm to the latest one, because yesterday I saw an error msg and it disappeared after it.

I configured in tsconfig.json (the included package is typedscripted):

"allowJs": true,

This is my config:

{
  "name": "client",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.6.2",
    "bootstrap": "^5.3.2",
    "source-map-support": "^0.5.21",
    "typescript": "^5.3.2",
    "v-network-graph": "^0.9.13",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.4.0",
    "vite": "^4.4.11"
  }
}

Answer 1

I need reactive variables:

import { reactive } from "vue";
export const nodes = reactive({});
export const edges = reactive({});

Solved my problem.