Vue와 jsmind를 사용하여 마인드맵 주석 및 일괄 편집 기능을 구현하는 방법은 무엇입니까?

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/jsmind/dist/jsmind.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jsmind/dist/jsmind.snow.css">

<template>
  <div>
    <div ref="jsmind_container"></div>
    <button @click="addNote">添加批注</button>
    <button @click="batchEdit">批量编辑</button>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initMindMap();
  },
  methods: {
    initMindMap() {
      const mind = {
        meta: {},
        format: 'node_array',
        data: [
          { id: 'root', isroot: true, topic: '思维导图' },
          { id: 'node1', parentid: 'root', topic: '节点1' },
          { id: 'node2', parentid: 'root', topic: '节点2' },
          { id: 'node3', parentid: 'root', topic: '节点3' }
        ]
      };

      const options = {
        container: this.$refs.jsmind_container,
        editable: true
      };

      this.jsmind_instance = jsMind.show(options, mind);
    },
    addNote() {
      const selectedNode = this.jsmind_instance.get_selected_node();
      if (selectedNode) {
        const note = prompt('请输入批注：');
        selectedNode.note = note;
        this.jsmind_instance.update_node(selectedNode.id, selectedNode);
      }
    },
    batchEdit() {
      this.jsmind_instance.edit_with_editor({ multiple: true });
    }
  }
};
</script>