使用Vue和jsmind如何实现思维导图的节点标签和关键字的管理？

<template>
  <div>
    <div id="jsmind_container"></div>
    <input v-model="label" placeholder="节点标签">
    <input v-model="keywords" placeholder="关键字">
    <button @click="addNode">添加节点</button>
  </div>
</template>

<script>
import jsmind from 'jsmind'

export default {
  data() {
    return {
      label: '',
      keywords: '',
      mind: null
    }
  },
  mounted() {
    this.initMind()
  },
  methods: {
    initMind() {
      const options = {
        container: 'jsmind_container',
        editable: true
      }
      this.mind = new jsmind(options)
      const mindData = { /* 初始化思维导图数据 */ }
      this.mind.show(mindData)
    },
    addNode() {
      const nodeId = 'new_node_id' // 根据实际需求生成节点ID
      const parentNodeId = 'parent_node_id' // 根据实际需求选择父节点
      const nodeData = {
        id: nodeId,
        isroot: false,
        parentid: parentNodeId,
        topic: this.label,
        keywords: this.keywords
      }
      this.mind.add(nodeData)
    }
  }
}
</script>

<template>
  <div>
    <mind-map></mind-map>
  </div>
</template>

<script>
import MindMap from './MindMap.vue'

export default {
  components: {
    MindMap
  }
}
</script>