如何通过Vue和jsmind实现思维导图的导航和快速定位功能？

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsmind@0.4.7/js/jsmind.js"></script>

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

<script>
export default {
  name: 'MindMap',
  mounted() {
    // 创建思维导图容器
    const container = this.$refs.mindmap;
    // 创建思维导图实例
    const mindmap = new jsmind.mind({
      container, // 容器
      editable: true, // 是否可编辑
    });
    // 添加思维导图的节点
    const rootNode = mindmap.addNode(null, '根节点', 'root');
    const childNode1 = mindmap.addNode(rootNode, '子节点1', 'child1');
    const childNode2 = mindmap.addNode(rootNode, '子节点2', 'child2');
    // ...
  },
};
</script>

<template>
  <div>
    <input type="text" v-model="nodeId" placeholder="请输入节点标识符">
    <button @click="navigate">导航</button>
  </div>
</template>

<script>
export default {
  name: 'MindMap',
  data() {
    return {
      nodeId: '', // 节点标识符
    };
  },
  methods: {
    navigate() {
      // 根据节点标识符查找节点
      const node = mindmap.getNodeById(this.nodeId);
      // 判断节点是否存在
      if (node) {
        // 高亮节点
        mindmap.selectNode(node);
      } else {
        alert('节点不存在！');
      }
    },
  },
};
</script>