使用Vue和jsmind实现多种思维导图主题样式的步骤是什么？

vue create jsmind-democd jsmind-demo

npm install jsmind

<template>  <div ref="mindmap"></div></template><script>import 'jsmind';import 'jsmind/style/jsmind.css';export default {  name: 'MindMap',  props: ['mindData'],  mounted() {    const mind = {      meta: {},      format: 'node_array',      data: this.mindData    };    const options = {      container: this.$refs.mindmap,      theme: 'orange'    };    const jm = new jsMind(options);    jm.show(mind);  }};</script><style scoped>.mindmap-container {  width: 100%;  height: 100%;}</style>

const options = {  container: this.$refs.mindmap,  theme: 'blue'};

const options = {  container: this.$refs.mindmap,  theme: 'dark'};

const options = {  container: this.$refs.mindmap,  theme: 'green'};

const options = {  container: this.$refs.mindmap,  theme: 'orange'};

<template>  <div id="app">    <MindMap :mindData="mindData" />    <div>      <button @click="changeTheme('blue')">蓝色</button>      <button @click="changeTheme('dark')">黑色</button>      <button @click="changeTheme('green')">绿色</button>      <button @click="changeTheme('orange')">橙色</button>    </div>  </div></template><script>import MindMap from './components/MindMap.vue';export default {  name: 'App',  components: {    MindMap  },  data() {    return {      mindData: [        {          id: 'root',          topic: '思维导图',          children: [            {              id: 'child1',              topic: '主题样式1'            },            {              id: 'child2',              topic: '主题样式2'            }          ]        }      ],      theme: 'orange'    };  },  methods: {    changeTheme(theme) {      this.theme = theme;    }  },  watch: {    theme(newTheme) {      const options = {        container: this.$refs.mindmap,        theme: newTheme      };      const jm = new jsMind(options);      jm.show({ data: this.mindData });    }  }};</script>