如何在Vue中实现基于jsmind的思维导图的数据驱动展示？

npm install jsmind

yarn add jsmind

<template>  <div ref="mindMapContainer" class="mind-map-container"></div></template><script>import jsMind from 'jsmind'export default {  name: 'MindMap',  props: ['data'],  mounted() {    const mind = new jsMind(this.$refs.mindMapContainer)    mind.show(this.data)  }}</script><style scoped>.mind-map-container {  width: 600px;  height: 400px;}</style>

<template>  <div>    <MindMap :data="mindMapData" />  </div></template><script>import MindMap from './MindMap.vue'export default {  components: {    MindMap  },  data() {    return {      mindMapData: {        meta: {          name: '思维导图',          author: 'You',          version: '1.0'        },        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' },          { id: 'node4', parentid: 'node1', topic: '节点1.1' },          { id: 'node5', parentid: 'node1', topic: '节点1.2' }        ]      }    }  }}</script>