如何通过Vue和jsmind实现思维导图的节点连接方式和层级关系的管理？

npm install vue

npm install jsmind

<script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="https://cdn.jsdelivr.net/npm/jsmind"></script>

<template>  <div>    <div ref="jsmindContainer"></div>    <button @click="addChildNode">添加子节点</button>  </div></template><script>export default {  mounted() {    // 创建jsmind实例    const jsmindInstance = new jsmind(this.$refs.jsmindContainer);    // 创建根节点    const rootNode = {      id: 'root',      isroot: true,      topic: '思维导图',      children: [],    }    // 初始化jsmind    jsmindInstance.show();    jsmindInstance.shoot(rootNode);  },  methods: {    addChildNode() {      // 获取jsmind实例      const jsmindInstance = jsmind.findInstance(this.$refs.jsmindContainer);      // 获取根节点      const rootNode = jsmindInstance.get_data('node_tree');      // 创建新的子节点      const newChildNode = {        id: 'child1',        topic: '子节点1',        direction: 'right',        children: [],      };      // 添加子节点      jsmind.add_node(rootNode, newChildNode);      // 刷新jsmind      jsmindInstance.update_node();    }  }}</script>