使用Vue和jsmind如何实现思维导图的节点颜色和背景设置？

<!-- 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 引入jsmind --><script src="https://cdn.jsdelivr.net/npm/jsmind/dist/js/jsmind.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsmind/dist/style/jsmind.css">

<div id="mind-container"></div>

var vm = new Vue({  el: '#mind-container',  data: {    mind: null,    selectedNodeId: null,  },  mounted() {    // 在mounted钩子函数中初始化jsmind    this.initMind();  },  methods: {    // 初始化jsmind    initMind() {      // 创建一个新的jsmind实例      this.mind = jsMind.show({        container: 'mind-container',        format: 'node_array',        editable: true,        theme: 'primary',        default_event_type: 'click',        view: {          h_margin: 100,          v_margin: 50,        },        layout: {          hspace: 20,          vspace: 10,          pspace: 20,        },        shortcut: {          enable: true,        },        context_menu: {          enable: true,        },      });      // 监听思维导图节点的选中事件      this.mind.add_event_listener((type, data) => {        if (type === 'select_node') {          this.selectedNodeId = data[0].id;        }      });    },    // 设置节点颜色    setNodeColor(color) {      var node = this.mind.get_node(this.selectedNodeId);      node.data.style = {        'background-color': color,      };      this.mind.update_node(node.id, node);    },    // 设置节点背景    setNodeBackground(background) {      var node = this.mind.get_node(this.selectedNodeId);      node.data.style = {        'background-image': 'url(' + background + ')',      };      this.mind.update_node(node.id, node);    }  },});

<div>  <h2>节点设置</h2>  <div>    <label for="color-picker">节点颜色:</label>    <input type="color" id="color-picker" v-model="color">    <button @click="setNodeColor(color)">设置</button>  </div>  <div>    <label for="background-input">节点背景:</label>    <input type="text" id="background-input" v-model="background">    <button @click="setNodeBackground(background)">设置</button>  </div></div>