fix(editor): Fix updating of canvas node issue when credential is set-up (#14633)

Co-authored-by: Alex Grozav <alex@grozav.com>

packages/frontend/editor-ui/src/components/canvas/Canvas.vue

@@ -9,14 +9,15 @@ import { useKeybindings } from '@/composables/useKeybindings';
 import type { PinDataSource } from '@/composables/usePinnedData';
 import { CanvasKey } from '@/constants';
 import type { NodeCreatorOpenSource } from '@/Interface';
-import {
-	type CanvasConnection,
-	type CanvasEventBusEvents,
-	type CanvasNode,
-	type CanvasNodeMoveEvent,
-	type ConnectStartEvent,
-	CanvasNodeRenderType,
+import type {
+	CanvasConnection,
+	CanvasEventBusEvents,
+	CanvasNode,
+	CanvasNodeMoveEvent,
+	ConnectStartEvent,
+	CanvasNodeData,
 } from '@/types';
+import { CanvasNodeRenderType } from '@/types';
 import { GRID_SIZE } from '@/utils/nodeViewUtils';
 import { isPresent } from '@/utils/typesUtils';
 import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
@@ -583,6 +584,15 @@ function onPaneMoveEnd() {
 	isPaneMoving.value = false;
 }
 
+// #AI-716: Due to a bug in vue-flow reactivity, the node data is not updated when the node is added
+// resulting in outdated data. We use this computed property as a workaround to get the latest node data.
+const nodeDataById = computed(() => {
+	return props.nodes.reduce<Record<string, CanvasNodeData>>((acc, node) => {
+		acc[node.id] = node.data as CanvasNodeData;
+		return acc;
+	}, {});
+});
+
 /**
  * Context menu
  */
@@ -812,6 +822,7 @@ provide(CanvasKey, {
 			<slot name="node" v-bind="{ nodeProps }">
 				<Node
 					v-bind="nodeProps"
+					:data="nodeDataById[nodeProps.id]"
 					:read-only="readOnly"
 					:event-bus="eventBus"
 					:hovered="nodesHoveredById[nodeProps.id]"