TypeError: Cannot read private member from an object whose class did not declare it when I use setData()

[Wuwuyiaewu]

<template>
    <div class="crc-vis-box h-full flex justify-center items-center">
        <div id="viz" ref="canvas" class="vis-canvas border">
        </div>
    </div>
</template>

<script setup lang="ts">
import * as vis from 'vis-network'
import type { Network } from 'vis-network'
import { dataList } from "@/composables/vis/vis-data";
import { options } from "@/composables/vis/vis-options";
import { nextTick, onMounted, ref, type Ref } from "vue";
const canvas: Ref<Network | undefined> = ref()

const networkData = ref(dataList)

onMounted(async () => {
    const container = document.getElementById('viz');
    if (container) {
        canvas.value = new vis.Network(container, networkData.value, options)
        const newData = {
            nodes: [{ id: 1, label: 'Node 1' }],
            edges: [],
        };

        canvas.value?.setData(newData);

    } else {
        console.error('Container element not found.');
    }
})
</script>

I use vue3 + vis-network. When I use on to register the event, I hope I can setData when the event is triggered. This problem occurs.
I tried adding nextTick approach

  canvas.value?.setData(newData);

 ↓
  
  canvas.value?.on('click', (params) => {
            console.log(params);
            nextTick(() => {
                canvas.value?.setData(newData);
            });
        })

error message from

Uncaught (in promise) TypeError: Cannot read private member from an object whose class did not declare it
at __classPrivateFieldGet (weak-map.js:1:18)
at Proxy.clear2 (selection-accumulator.ts:138:5)
at Proxy.unselectAll (SelectionHandler.js:369:32)
at Network.setData (Network.js:398:25)
at VisDDD.vue:27:23
at runtime-core.esm-bundler.js:2679:88
at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2659:19)
at flushPostFlushCbs (runtime-core.esm-bundler.js:325:40)

became

Uncaught (in promise) TypeError: Cannot read private member from an object whose class did not declare it
at __classPrivateFieldGet (weak-map.js:1:18)
at Proxy.clear2 (selection-accumulator.ts:138:5)
at Proxy.unselectAll (SelectionHandler.js:369:32)
at Network.setData (Network.js:398:25)
at VisDDD.vue:30:31

I also got this from Stackoverflow
https://stackoverflow.com/questions/76961106/is-visjs-network-supported-by-vue3
Saw the same question

I'm facing a bit of a problem and I'm hoping someone can lend me a hand. Would really appreciate your help. Thanks a ton!

[humingxian]

Do not use ref, simply define a variable using let or const, and there will be no error accessing private member variables or methods， like this:
let network = null;
// 初始化网络
network = new Network(utg_div, data, options);