docs: update examples

docs/components/examples/custom-node/App.vue

@@ -1,18 +1,18 @@
 <script setup>
 import { MiniMap } from '@vue-flow/additional-components'
-import { ConnectionMode, Position, VueFlow, useVueFlow } from '@vue-flow/core'
-import { computed, h, onMounted, ref } from 'vue'
+import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { h, onMounted, ref } from 'vue'
 import ColorSelectorNode from './CustomNode.vue'
 import { presets } from './presets.js'
 
-const { getNode } = useVueFlow()
-
-const outputColorNode = computed(() => getNode.value('3'))
+const { findNode } = useVueFlow()
 
 const elements = ref([])
 
 const gradient = ref(false)
+
 const bgColor = ref(presets.ayame)
+
 const bgName = ref('AYAME')
 
 const connectionLineStyle = { stroke: '#fff' }
@@ -39,7 +39,7 @@ const onChange = (color) => {
   bgColor.value = color.value
   bgName.value = color.name
 
-  outputColorNode.value.hidden = false
+  findNode('3').hidden = false
 }
 
 const onGradient = () => {
@@ -47,7 +47,7 @@ const onGradient = () => {
   bgColor.value = null
   bgName.value = 'gradient'
 
-  outputColorNode.value.hidden = true
+  findNode('3').hidden = true
 }
 
 onMounted(() => {
@@ -104,13 +104,12 @@ onMounted(() => {
     class="customnodeflow"
     :class="[gradient ? 'animated-bg-gradient' : '']"
     :style="{ backgroundColor: bgColor }"
-    :connection-mode="ConnectionMode.Loose"
     :connection-line-style="connectionLineStyle"
     :default-zoom="1.5"
-    :fit-view-on-init="true"
+    fit-view-on-init
   >
-    <template #node-custom="props">
-      <ColorSelectorNode :data="props.data" @change="onChange" @gradient="onGradient" />
+    <template #node-custom="{ data }">
+      <ColorSelectorNode :data="data" @change="onChange" @gradient="onGradient" />
     </template>
 
     <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />