Need help in understanding how useHandleConnections and useNodesData work

[DavidPfl]

I am trying to understand how useHandleConnections() and useNodesData() can be used together based on the example in the Custom Node example.

I paste the example's OutputNode.vue here and then explain what I try to achieve:

//OutputNode.vue
<script setup>
import { Handle, Position, useHandleConnections, useNodesData } from '@vue-flow/core'

const connections = useHandleConnections({
  type: 'target',
})

const nodesData = useNodesData(() => connections.value[0]?.source)
</script>

<template>
  <Handle type="target" :position="Position.Left" :style="{ backgroundColor: nodesData.data?.color, filter: 'invert(100%)' }" />
  {{ nodesData.data?.isGradient ? 'GRADIENT' : nodesData.data?.color }}
</template>

I expected to be able to use console.log( nodesData.data) in the <script setup> part in order to see what this prints, but in the console I only get undefined . However, if I use console.log( nodesData.value), I can see {id: '1', type: 'color-selector', data: Proxy(Object)} in the console.
My question is:
Why can I use nodesData.data?.isGradient and nodesData.data?.color in the template but I only get undefined when I try to console.log these expressions?
Also, when I change nodesData.data?.color to nodesData.value.data.color in the template, I get an error OutputNode.vue:26 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data') , although I can console.log(nodesData.value.data.color).

For example, here is my adjusted OutputNode.vue, where I add a button for logging to console:

// OutputNode.vue adjustet
<script setup>
import { Handle, Position, useHandleConnections, useNodesData } from '@vue-flow/core'
import { onMounted } from 'vue';
``
const connections = useHandleConnections({
  type: 'target',
})

const nodesData = useNodesData(() => connections.value[0]?.source)
const handleClick = () => {
  console.log(nodesData.data?.color) // this prints 'undefined' to console - why can I use this in the template then?
  console.log(nodesData.value.data.color); // this prints the pre-selected color '#6F3381' to console, but I cannot use it in the template.
}
</script>

<template>
  <Handle type="target" :position="Position.Left" :style="{ backgroundColor: nodesData.data?.color, filter: 'invert(100%)' }" />
  {{ nodesData.data?.isGradient ? 'GRADIENT' : nodesData.data?.color }}
  <button @click="handleClick">click me</button>
</template>

[bcakmakoglu]

Because these composables return computed values, which are auto-unwrapped in templates but not in a script-tag.
Meaning const nodesData = useNodesData(...) returns a computed(...) therefore the usage is nodesData.value.data and not nodesData.data

[DavidPfl]

Thanks for the explanation!
I was not aware of this and it's clearly explained in the Vue.js Reactivity Fundamentals.