diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index 1aa7c4bd33..87bd02d992 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -140,10 +140,6 @@
 			)
 	})
 
-	$effect(() => {
-		dispatchIfMounted('change', value)
-	})
-
 	let appConnect: AppConnect | undefined = $state()
 	let resourceEditor: ResourceEditorDrawer | undefined = $state()
 </script>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
index 104d72cef9..92ce5677f8 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
@@ -112,34 +112,36 @@
 			<TabSelectInput bind:componentInput />
 		{:else if fieldType === 'resource' && subFieldType && ['mysql', 'postgres', 'ms_sql_server', 'snowflake', 'snowflake_oauth', 'bigquery', 'oracledb'].includes(subFieldType)}
 			<ResourcePicker
-				initialValue={componentInput.value?.split('$res:')?.[1] || ''}
-				on:change={(e) => {
-					let path = e.detail
-					if (componentInput) {
-						if (path) {
-							componentInput.value = `$res:${path}`
-						} else {
-							componentInput.value = undefined
+				bind:value={
+					() => (componentInput?.value ? componentInput?.value?.split('$res:')?.[1] : undefined),
+					(v) => {
+						if (componentInput) {
+							if (v) {
+								componentInput.value = `$res:${v}`
+							} else {
+								componentInput.value = undefined
+							}
 						}
 					}
-				}}
+				}
 				showSchemaExplorer
 				resourceType={subFieldType === 'postgres' ? 'postgresql' : subFieldType}
 			/>
 		{:else if fieldType === 'resource' && subFieldType === 's3'}
 			<ResourcePicker
 				placeholder="S3 resource (workspace s3 if empty)"
-				initialValue={componentInput.value?.split('$res:')?.[1] || ''}
-				on:change={(e) => {
-					let path = e.detail
-					if (componentInput) {
-						if (path) {
-							componentInput.value = `$res:${path}`
-						} else {
-							componentInput.value = undefined
+				bind:value={
+					() => (componentInput?.value ? componentInput?.value?.split('$res:')?.[1] : undefined),
+					(v) => {
+						if (componentInput) {
+							if (v) {
+								componentInput.value = `$res:${v}`
+							} else {
+								componentInput.value = undefined
+							}
 						}
 					}
-				}}
+				}
 				resourceType="s3"
 			/>
 		{:else if fieldType === 'labeledresource'}
@@ -149,20 +151,33 @@
 						onkeydown={stopPropagation(bubble('keydown'))}
 						placeholder="Label"
 						type="text"
-						bind:value={componentInput.value['label']}
+						bind:value={
+							() => componentInput?.value?.['label'],
+							(v) => {
+								if (componentInput) {
+									componentInput.value['label'] = v
+								}
+								componentInput = $state.snapshot(componentInput)
+							}
+						}
 					/>
 					<ResourcePicker
-						initialValue={componentInput.value?.['value']?.split('$res:')?.[1] || ''}
-						on:change={(e) => {
-							let path = e.detail
-							if (componentInput) {
-								if (path) {
-									componentInput.value['value'] = `$res:${path}`
-								} else {
-									componentInput.value['value'] = undefined
+						bind:value={
+							() =>
+								componentInput?.value
+									? componentInput?.value?.['value']?.split('$res:')?.[1]
+									: undefined,
+							(v) => {
+								if (componentInput) {
+									if (v) {
+										componentInput.value['value'] = `$res:${v}`
+									} else {
+										componentInput.value['value'] = undefined
+									}
+									componentInput = $state.snapshot(componentInput)
 								}
 							}
-						}}
+						}
 						showSchemaExplorer
 					/>
 				</div>
@@ -241,17 +256,18 @@
 				/>
 			{:else if format?.startsWith('resource-') && (componentInput.value == undefined || typeof componentInput.value == 'string')}
 				<ResourcePicker
-					initialValue={componentInput.value?.split('$res:')?.[1] || ''}
-					on:change={(e) => {
-						let path = e.detail
-						if (componentInput) {
-							if (path) {
-								componentInput.value = `$res:${path}`
-							} else {
-								componentInput.value = undefined
+					bind:value={
+						() => (componentInput?.value ? componentInput?.value?.split('$res:')?.[1] : undefined),
+						(v) => {
+							if (componentInput) {
+								if (v) {
+									componentInput.value = `$res:${v}`
+								} else {
+									componentInput.value = undefined
+								}
 							}
 						}
-					}}
+					}
 					resourceType={format && format?.split('-').length > 1
 						? format.substring('resource-'.length)
 						: undefined}
diff --git a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
index 60751a4595..596287152d 100644
--- a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
-
 	import Section from '$lib/components/Section.svelte'
 	import Required from '$lib/components/Required.svelte'
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
@@ -103,18 +101,22 @@
 		create_update_subscription_id = $bindable('')
 	}: Props = $props()
 
-	run(() => {
+	if (gcp_resource_path) {
+		loadAllPubSubTopicsFromProject()
+	}
+
+	$effect(() => {
 		isValid =
 			!emptyStringTrimmed(gcp_resource_path) &&
 			!emptyStringTrimmed(topic_id) &&
 			!emptyStringTrimmed(subscription_id)
 	})
-	run(() => {
+	$effect(() => {
 		if (!delivery_type) {
 			delivery_type = 'pull'
 		}
 	})
-	run(() => {
+	$effect(() => {
 		if (!delivery_config) {
 			delivery_config = DEFAULT_PUSH_CONFIG
 		}
@@ -124,11 +126,11 @@
 		return `${window.location.origin}${base}/api/gcp/w/${$workspaceStore!}`
 	}
 
-	run(() => {
+	$effect(() => {
 		!base_endpoint && (base_endpoint = getBaseUrl())
 	})
 
-	run(() => {
+	$effect(() => {
 		if (emptyStringTrimmed(subscription_id) && !emptyStringTrimmed(path)) {
 			subscription_id = `windmill-${$workspaceStore!}-${path.replaceAll('/', '_')}`
 		}
@@ -146,11 +148,14 @@
 			<Subsection label="Connection setup">
 				<div class="flex flex-col gap-1 mt-2">
 					<ResourcePicker
-						on:change={() => {
-							loadAllPubSubTopicsFromProject()
-						}}
 						resourceType="gcloud"
-						bind:value={gcp_resource_path}
+						bind:value={
+							() => gcp_resource_path,
+							(v) => {
+								gcp_resource_path = v
+								loadAllPubSubTopicsFromProject()
+							}
+						}
 					/>
 					{#if !emptyStringTrimmed(gcp_resource_path)}
 						<TestTriggerConnection kind="gcp" args={{ gcp_resource_path }} />