Some reactive behaviors did not trigger as expected when updating nodes. May I ask what the reason is?

[dominic-z]

Hello, while I was learning VueFlow(updating-node-data), I noticed that some reactive operations didn't trigger as expected. In the following code, the onSomeEvent method locates a node using the find method, and then modifies the data by directly replacing it. Judging from the content of the first div block, the nodes variable has indeed changed, but the text of the nodes on the graph remains unchanged. However, when I changed the way of modifying the data to node.data.label = "new", I found that it modified the node's text as expected. May I ask what the reason is? By the way, this is really a great framework.

<script setup>
import { ref } from 'vue'
import { VueFlow, Panel } from '@vue-flow/core'

const nodes = ref([
  {
    id: '1',
    position: { x: 50, y: 50 },
    data: {
      label: 'Node 1',
      hello: 'world',
    }
  },
])

function onSomeEvent(nodeId) {
  const node = nodes.value.find((node) => node.id === nodeId)

  // this won't work
  node.data = {
    hello: 'world',
    label: 'new'
  }
  // but this will work
  // node.data.label="new"

  // // you can also mutate properties like `selectable` or `draggable`
  // node.selectable = false
  // node.draggable = false

}
</script>

<template>
  <div>
    {{ nodes }}
  </div>

  <div :style="{ height: '400px', width: '400px' }">
    <VueFlow :nodes="nodes">
      <Panel>
        <button type="button" @click="onSomeEvent('1')">Update Node 1</button>
      </Panel>
    </VueFlow>
  </div>

</template>

[bcakmakoglu]

TL;DR: Bind your nodes using v-model:nodes and you'll see it working (you'll get proper two way binding for your provided node objects and those that are internally stored by VueFlow)
And even better, use updateNodeData and updateNode to modify node properties instead of doing mutations.

[dominic-z]

Thank you. It seems I really confused v-bind and v-model!