Modify node properties from CustomNode component

[fabiomaistro]

Hi, I don't know if it's a lack of Vue3 knowledge, but I can't seem to find an easy way to mutate the node object properties (specifically, in the example, the label) from my custom node component. I know I can do it by the usual propagation event, I was just wondering if there is a faster or better way.

The parent component:

<template>
    <div style="height: 400px">
        <VueFlow
            v-model="elements"
            :delete-key-code="null"
            @edge-click="onEdgeClicked"
            @node-click="onNodeClicked"
        >
            <Background variant="lines" />
            <template #node-form="props">
                <FormEventNode :node="props"></FormEventNode>
            </template>
        </VueFlow>  
    </div>
</template>

The child component:

<template>
    <NodeToolbar
        style="display: flex; gap: 0.5rem; align-items: center"
        :is-visible="node.toolbarVisible"
        :position="Position.Top"
  >
    <button @click="changeLabel">Change Label</button>
  </NodeToolbar>

    <div>
        <div>
            <strong>{{node.label}}</strong>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { Position } from '@vue-flow/core'
    import { NodeToolbar } from '@vue-flow/node-toolbar';
    import { toRefs } from 'vue';

    const props = defineProps({
        node: Object,
    })

    let nodeAsRef = toRefs(props.node);

    function changeLabel() {
        nodeAsRef.label = "Something taken from an input";
    }
</script>

I tried with a single toRef(props.node, "label"), but it doesn't seem to work either.
What am I doing wrong?

Thanks for your help!

[bcakmakoglu]

Props are immutable (this is imposed by Vue, not Vue Flow) but what you can do is something like this

// inside your custom node component
const { node } = useNode()

function changeNodeLabel(label: string) {
	node.label = label
}