Vue と jsmind を使用してマインド マップのノード間の関連付けと依存関係の管理を実装するにはどうすればよいですか?

<!-- 引入jsmind库 -->
<script src="jsmind.js"></script>

<!-- 引入jsmind样式 -->
<link rel="stylesheet" href="jsmind.css">

<template>
  <div class="mindmap">
    <div ref="mindmapContainer"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 创建思维导图实例
    const mindmap = new jsmind(this.$refs.mindmapContainer);

    // 定义思维导图的数据
    const mindmapData = {
      "meta": {
        "name": "思维导图",
        "version": "0.2"
      },
      "format": "node_array",
      "data": [
        {
          "id": "root",
          "isroot": true,  // 根节点
          "topic": "根节点",
          "expanded": true  // 默认展开
        },
        {
          "id": "node1",
          "parentid": "root",
          "topic": "节点1"
        },
        {
          "id": "node2",
          "parentid": "root",
          "topic": "节点2"
        },
        {
          "id": "node3",
          "parentid": "root",
          "topic": "节点3"
        }
      ]
    };

    // 加载思维导图数据
    mindmap.show(mindmapData);

    // 更新节点间的关联关系
    mindmap.add_node("node1", "节点4", "node3");
  }
}
</script>

<style scoped>
.mindmap {
  width: 500px;
  height: 300px;
}
</style>

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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