Need help help modifying a npm package in Vue3.JS - node.js

Question

I want to build a mindmapping tool using Vue.
I found this vue3-mindmap component. The issue I'm facing is it that it's not dynamically updating the mindmap when I update the underlying data. I think the issue is it uses a clone of the modelValue to build the mindmap and hence it's not reactive.
#App.Vue
<template>
<mindmap v-model="state.data"
:edit=true
:add-node-btn=true></mindmap>
<div >{{ state }} </div>
<button #click="updateData">Update Data</button>
</template>
<script>
import { reactive} from 'vue'
import mindmap from 'vue3-mindmap'
import 'vue3-mindmap/dist/style.css'
export default {
components: { mindmap },
setup() {
const state =reactive({data:[{ 'name': 'Old Data' }]})
function updateData() {
state.data=[{ 'name': 'New Data' }]
}
return {state,updateData}
}
}
</script>
I have little understanding of JS libraries and I'm struggling to fix the source code and use it in my project. Any help would be appreciated.

Answer 1

You are right, the modelValue is getting internally copied to a new ImData object.
emitter.emit('mmdata', new ImData(cloneDeep(props.modelValue[0]), xGap, yGap, getSize))
I haven't found any simple way to manipulate the internal data outside of the Mindmap plugin. There is already the issue After the v-model binding data is updated, the brain map page is not updated accordingly (Chinese) about the problem.
Workaround
If it does now work other way, you can always use the following ugly workaround.
You can force Vue to destroy the mindmap using v-if and recreate it again from scratch.
Here is the sample how to achieve it
<script setup>
import { ref, nextTick } from 'vue'
import mindmap from 'vue3-mindmap'
const data = ref([{ 'name': 'Old Data' }])
function updateData() {
data.value = [];
nextTick(() => {
data.value = [{ 'name': 'New Data' }];
})
}
</script>
<template>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vue3-mindmap#0.5.12/dist/style.css" media="screen" />
<mindmap v-if="data.length > 0" v-model="data" :edit=true :add-node-btn=true></mindmap>
<div >{{ data }} </div>
<button #click="updateData">Update Data</button>
</template>
And the working playground