diff --git a/package-lock.json b/package-lock.json
index 5afd41dc5..70d7be53c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -549,18 +549,16 @@
 			}
 		},
 		"node_modules/@babel/helper-string-parser": {
-			"version": "7.25.9",
-			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-			"integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+			"version": "7.23.4",
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
 			}
 		},
 		"node_modules/@babel/helper-validator-identifier": {
-			"version": "7.25.9",
-			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-			"integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+			"version": "7.22.20",
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -614,13 +612,8 @@
 			}
 		},
 		"node_modules/@babel/parser": {
-			"version": "7.26.3",
-			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz",
-			"integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==",
+			"version": "7.24.0",
 			"license": "MIT",
-			"dependencies": {
-				"@babel/types": "^7.26.3"
-			},
 			"bin": {
 				"parser": "bin/babel-parser.js"
 			},
@@ -2057,13 +2050,13 @@
 			}
 		},
 		"node_modules/@babel/types": {
-			"version": "7.26.3",
-			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
-			"integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==",
+			"version": "7.24.0",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@babel/helper-string-parser": "^7.25.9",
-				"@babel/helper-validator-identifier": "^7.25.9"
+				"@babel/helper-string-parser": "^7.23.4",
+				"@babel/helper-validator-identifier": "^7.22.20",
+				"to-fast-properties": "^2.0.0"
 			},
 			"engines": {
 				"node": ">=6.9.0"
@@ -7863,53 +7856,45 @@
 			"license": "MIT"
 		},
 		"node_modules/@vue/compiler-core": {
-			"version": "3.5.13",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
-			"integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
+			"version": "3.4.21",
 			"license": "MIT",
 			"dependencies": {
-				"@babel/parser": "^7.25.3",
-				"@vue/shared": "3.5.13",
+				"@babel/parser": "^7.23.9",
+				"@vue/shared": "3.4.21",
 				"entities": "^4.5.0",
 				"estree-walker": "^2.0.2",
-				"source-map-js": "^1.2.0"
+				"source-map-js": "^1.0.2"
 			}
 		},
 		"node_modules/@vue/compiler-dom": {
-			"version": "3.5.13",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
-			"integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
+			"version": "3.4.21",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/compiler-core": "3.5.13",
-				"@vue/shared": "3.5.13"
+				"@vue/compiler-core": "3.4.21",
+				"@vue/shared": "3.4.21"
 			}
 		},
 		"node_modules/@vue/compiler-sfc": {
-			"version": "3.5.13",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
-			"integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
+			"version": "3.4.21",
 			"license": "MIT",
 			"dependencies": {
-				"@babel/parser": "^7.25.3",
-				"@vue/compiler-core": "3.5.13",
-				"@vue/compiler-dom": "3.5.13",
-				"@vue/compiler-ssr": "3.5.13",
-				"@vue/shared": "3.5.13",
+				"@babel/parser": "^7.23.9",
+				"@vue/compiler-core": "3.4.21",
+				"@vue/compiler-dom": "3.4.21",
+				"@vue/compiler-ssr": "3.4.21",
+				"@vue/shared": "3.4.21",
 				"estree-walker": "^2.0.2",
-				"magic-string": "^0.30.11",
-				"postcss": "^8.4.48",
-				"source-map-js": "^1.2.0"
+				"magic-string": "^0.30.7",
+				"postcss": "^8.4.35",
+				"source-map-js": "^1.0.2"
 			}
 		},
 		"node_modules/@vue/compiler-ssr": {
-			"version": "3.5.13",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
-			"integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
+			"version": "3.4.21",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/compiler-dom": "3.5.13",
-				"@vue/shared": "3.5.13"
+				"@vue/compiler-dom": "3.4.21",
+				"@vue/shared": "3.4.21"
 			}
 		},
 		"node_modules/@vue/eslint-config-prettier": {
@@ -7949,53 +7934,42 @@
 			}
 		},
 		"node_modules/@vue/reactivity": {
-			"version": "3.5.13",
-			"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
-			"integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
+			"version": "3.4.21",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/shared": "3.5.13"
+				"@vue/shared": "3.4.21"
 			}
 		},
 		"node_modules/@vue/runtime-core": {
-			"version": "3.5.13",
-			"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
-			"integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
+			"version": "3.4.21",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/reactivity": "3.5.13",
-				"@vue/shared": "3.5.13"
+				"@vue/reactivity": "3.4.21",
+				"@vue/shared": "3.4.21"
 			}
 		},
 		"node_modules/@vue/runtime-dom": {
-			"version": "3.5.13",
-			"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
-			"integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
+			"version": "3.4.21",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/reactivity": "3.5.13",
-				"@vue/runtime-core": "3.5.13",
-				"@vue/shared": "3.5.13",
+				"@vue/runtime-core": "3.4.21",
+				"@vue/shared": "3.4.21",
 				"csstype": "^3.1.3"
 			}
 		},
 		"node_modules/@vue/server-renderer": {
-			"version": "3.5.13",
-			"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
-			"integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
+			"version": "3.4.21",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/compiler-ssr": "3.5.13",
-				"@vue/shared": "3.5.13"
+				"@vue/compiler-ssr": "3.4.21",
+				"@vue/shared": "3.4.21"
 			},
 			"peerDependencies": {
-				"vue": "3.5.13"
+				"vue": "3.4.21"
 			}
 		},
 		"node_modules/@vue/shared": {
-			"version": "3.5.13",
-			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
-			"integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
+			"version": "3.4.21",
 			"license": "MIT"
 		},
 		"node_modules/@yarnpkg/esbuild-plugin-pnp": {
@@ -18563,9 +18537,7 @@
 			}
 		},
 		"node_modules/picocolors": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+			"version": "1.0.0",
 			"license": "ISC"
 		},
 		"node_modules/picomatch": {
@@ -18723,9 +18695,9 @@
 			}
 		},
 		"node_modules/postcss": {
-			"version": "8.4.49",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
-			"integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+			"version": "8.4.38",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+			"integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
 			"funding": [
 				{
 					"type": "opencollective",
@@ -18740,11 +18712,10 @@
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
-			"license": "MIT",
 			"dependencies": {
 				"nanoid": "^3.3.7",
-				"picocolors": "^1.1.1",
-				"source-map-js": "^1.2.1"
+				"picocolors": "^1.0.0",
+				"source-map-js": "^1.2.0"
 			},
 			"engines": {
 				"node": "^10 || ^12 || >=14"
@@ -20589,10 +20560,9 @@
 			}
 		},
 		"node_modules/source-map-js": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-			"license": "BSD-3-Clause",
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+			"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -21265,6 +21235,14 @@
 			"dev": true,
 			"license": "BSD-3-Clause"
 		},
+		"node_modules/to-fast-properties": {
+			"version": "2.0.0",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/to-regex-range": {
 			"version": "5.0.1",
 			"license": "MIT",
@@ -23016,16 +22994,14 @@
 			}
 		},
 		"node_modules/vue": {
-			"version": "3.5.13",
-			"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
-			"integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
+			"version": "3.4.21",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/compiler-dom": "3.5.13",
-				"@vue/compiler-sfc": "3.5.13",
-				"@vue/runtime-dom": "3.5.13",
-				"@vue/server-renderer": "3.5.13",
-				"@vue/shared": "3.5.13"
+				"@vue/compiler-dom": "3.4.21",
+				"@vue/compiler-sfc": "3.4.21",
+				"@vue/runtime-dom": "3.4.21",
+				"@vue/server-renderer": "3.4.21",
+				"@vue/shared": "3.4.21"
 			},
 			"peerDependencies": {
 				"typescript": "*"
@@ -23584,7 +23560,7 @@
 				"vega": "^5.22.1",
 				"vega-embed": "^6.22.1",
 				"vega-lite": "^5.7.1",
-				"vue": "^3.5.0",
+				"vue": "^3.4.0",
 				"vue-dompurify-html": "^5.0.1"
 			},
 			"devDependencies": {
diff --git a/src/ui/package.json b/src/ui/package.json
index 4f515cee9..56ad32192 100644
--- a/src/ui/package.json
+++ b/src/ui/package.json
@@ -37,7 +37,7 @@
 		"vega": "^5.22.1",
 		"vega-embed": "^6.22.1",
 		"vega-lite": "^5.7.1",
-		"vue": "^3.5.0",
+		"vue": "^3.4.0",
 		"vue-dompurify-html": "^5.0.1"
 	},
 	"devDependencies": {
diff --git a/src/ui/src/builder/BuilderEmbeddedCodeEditor.vue b/src/ui/src/builder/BuilderEmbeddedCodeEditor.vue
index 96ca525c5..7c348f1ac 100644
--- a/src/ui/src/builder/BuilderEmbeddedCodeEditor.vue
+++ b/src/ui/src/builder/BuilderEmbeddedCodeEditor.vue
@@ -7,10 +7,10 @@
 <script setup lang="ts">
 import * as monaco from "monaco-editor";
 import "./builderEditorWorker";
-import { onMounted, onUnmounted, toRefs, useTemplateRef, watch } from "vue";
+import { onMounted, onUnmounted, ref, toRefs, watch } from "vue";
 
-const rootEl = useTemplateRef("rootEl");
-const editorContainerEl = useTemplateRef("editorContainerEl");
+const rootEl = ref<HTMLElement>(null);
+const editorContainerEl = ref<HTMLElement>(null);
 const resizeObserver = new ResizeObserver(updateDimensions);
 let editor: monaco.editor.IStandaloneCodeEditor = null;
 
diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/builder/BuilderSelect.vue
index 0f618b221..5eb9ca793 100644
--- a/src/ui/src/builder/BuilderSelect.vue
+++ b/src/ui/src/builder/BuilderSelect.vue
@@ -37,7 +37,6 @@ import {
 	nextTick,
 	PropType,
 	ref,
-	useTemplateRef,
 	watch,
 } from "vue";
 import { useFloating, autoPlacement } from "@floating-ui/vue";
@@ -58,8 +57,8 @@ const props = defineProps({
 
 const currentValue = defineModel({ type: String, required: false });
 const isOpen = ref(false);
-const trigger = useTemplateRef("trigger");
-const dropdown = useTemplateRef("dropdown");
+const trigger = ref<HTMLElement>();
+const dropdown = ref<HTMLElement>();
 
 const { floatingStyles, update: updateFloatingStyle } = useFloating(
 	trigger,
diff --git a/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue b/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue
index 248462ea7..75808ddfb 100644
--- a/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue
+++ b/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue
@@ -62,7 +62,7 @@
 <script setup lang="ts">
 import injectionKeys from "@/injectionKeys";
 import { Component } from "@/writerTypes";
-import { computed, inject, nextTick, ref, useTemplateRef, watch } from "vue";
+import { computed, inject, nextTick, ref, watch } from "vue";
 import BuilderSidebarComponentTreeBranch from "./BuilderSidebarComponentTreeBranch.vue";
 import { useEvaluator } from "@/renderer/useEvaluator";
 import { useDragDropComponent } from "../useDragDropComponent";
@@ -82,7 +82,7 @@ const {
 const { getComponentInfoFromDrag, removeInsertionCandidacy, isParentSuitable } =
 	useDragDropComponent(wf);
 const { isComponentVisible } = useEvaluator(wf);
-const rootEl = useTemplateRef("rootEl");
+const rootEl = ref<HTMLElement>(null);
 const emit = defineEmits(["expandBranch"]);
 
 const matched = computed(() => {
diff --git a/src/ui/src/components/core/base/BaseDropdown.vue b/src/ui/src/components/core/base/BaseDropdown.vue
index ef1635b31..32d62e905 100644
--- a/src/ui/src/components/core/base/BaseDropdown.vue
+++ b/src/ui/src/components/core/base/BaseDropdown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, PropType, ref, useId } from "vue";
+import { onMounted, onUnmounted, PropType, ref } from "vue";
 
 defineProps({
 	options: {
@@ -12,6 +12,13 @@ const emits = defineEmits({
 	selected: (key: string) => typeof key === "string",
 });
 
+/**
+ * @deprecated use `useId` from Vue 3.5 when we upgrade
+ */
+function useId() {
+	return Math.random().toString();
+}
+
 const trigger = ref<Element>();
 
 const popoverId = useId();
diff --git a/src/ui/src/components/core/base/BaseInputColor.vue b/src/ui/src/components/core/base/BaseInputColor.vue
index be5c5f4ab..770314eef 100644
--- a/src/ui/src/components/core/base/BaseInputColor.vue
+++ b/src/ui/src/components/core/base/BaseInputColor.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, inject, useTemplateRef } from "vue";
+import { PropType, computed, inject, ref } from "vue";
 import injectionKeys from "@/injectionKeys";
 
 const props = defineProps({
@@ -27,7 +27,7 @@ const emit = defineEmits({
 	change: (value: string) => typeof value === "string",
 });
 
-const pickerEl = useTemplateRef("pickerEl");
+const pickerEl = ref<HTMLInputElement | undefined>();
 
 const flattenedInstancePath = inject(injectionKeys.flattenedInstancePath);
 
diff --git a/src/ui/src/components/core/base/BaseInputSlider.vue b/src/ui/src/components/core/base/BaseInputSlider.vue
index f26625e4c..0baa0e6b6 100644
--- a/src/ui/src/components/core/base/BaseInputSlider.vue
+++ b/src/ui/src/components/core/base/BaseInputSlider.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, toRef, watch, useTemplateRef } from "vue";
+import { computed, PropType, ref, ComponentInstance, toRef, watch } from "vue";
 import BaseInputRangeThumb from "./BaseInputSliderThumb.vue";
 import BaseInputSliderLayout from "./BaseInputSliderLayout.vue";
 import { useBoundingClientRect } from "@/composables/useBoundingClientRect";
@@ -50,8 +50,8 @@ const props = defineProps({
 
 const model = defineModel("value", { type: Number, default: 50 });
 
-const slider = useTemplateRef("slider");
-const thumb = useTemplateRef("thumb");
+const slider = ref<HTMLElement>();
+const thumb = ref<ComponentInstance<typeof BaseInputRangeThumb>>();
 
 const displayValue = useNumberFormatByStep(model, toRef(props, "step"));
 
diff --git a/src/ui/src/components/core/base/BaseInputSliderRange.vue b/src/ui/src/components/core/base/BaseInputSliderRange.vue
index b70f39e04..738787c95 100644
--- a/src/ui/src/components/core/base/BaseInputSliderRange.vue
+++ b/src/ui/src/components/core/base/BaseInputSliderRange.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, toRef, useTemplateRef, watch } from "vue";
+import { ComponentInstance, computed, PropType, ref, toRef, watch } from "vue";
 import BaseInputRangeThumb from "./BaseInputSliderThumb.vue";
 import { useBoundingClientRect } from "@/composables/useBoundingClientRect";
 import BaseInputSliderLayout from "./BaseInputSliderLayout.vue";
@@ -64,8 +64,8 @@ function onUpdate(key: 0 | 1, value: number) {
 	model.value = copy.sort((a, b) => a - b);
 }
 
-const slider = useTemplateRef("slider");
-const thumbs = useTemplateRef("thumbs");
+const slider = ref<HTMLElement>();
+const thumbs = ref<ComponentInstance<typeof BaseInputRangeThumb>[]>();
 
 function handleMouseDown(e: MouseEvent) {
 	const thumb1 = thumbs.value[0];
diff --git a/src/ui/src/components/core/base/BaseInputSliderThumb.vue b/src/ui/src/components/core/base/BaseInputSliderThumb.vue
index 5d7fba373..f63ee1e59 100644
--- a/src/ui/src/components/core/base/BaseInputSliderThumb.vue
+++ b/src/ui/src/components/core/base/BaseInputSliderThumb.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, ref, toRef, useTemplateRef, watch } from "vue";
+import { computed, PropType, ref, toRef, watch } from "vue";
 import { useNumberFormatByStep } from "./BaseInputSlider.utils";
 
 const props = defineProps({
@@ -44,7 +44,7 @@ defineExpose({ handleMouseDown, getOffsetLeft });
 
 const model = defineModel("value", { type: Number, default: 50 });
 
-const thumb = useTemplateRef("thumb");
+const thumb = ref<HTMLElement>();
 
 const displayValue = useNumberFormatByStep(model, toRef(props, "step"));
 
diff --git a/src/ui/src/components/core/content/CoreDataframe.vue b/src/ui/src/components/core/content/CoreDataframe.vue
index 25699ebfa..0ea60d7ab 100644
--- a/src/ui/src/components/core/content/CoreDataframe.vue
+++ b/src/ui/src/components/core/content/CoreDataframe.vue
@@ -110,7 +110,7 @@
 </template>
 
 <script lang="ts">
-import { computed, inject, ref, shallowRef, useTemplateRef } from "vue";
+import { computed, inject, ref, shallowRef } from "vue";
 import { FieldCategory, FieldType } from "@/writerTypes";
 import CoreDataframeRow from "./CoreDataframe/CoreDataframeRow.vue";
 import {
@@ -320,9 +320,9 @@ type OrderSetting = {
 };
 
 const fields = inject(injectionKeys.evaluatedFields);
-const rootEl = useTemplateRef("rootEl");
-const toolsEl = useTemplateRef("toolsEl");
-const gridContainerEl = useTemplateRef("gridContainerEl");
+const rootEl = ref<HTMLElement>();
+const toolsEl = ref<HTMLElement>();
+const gridContainerEl = ref<HTMLElement>();
 let baseTable: aq.internal.ColumnTable = null;
 const table = shallowRef<aq.internal.ColumnTable | null>(null);
 const tableIndex = shallowRef([]);
diff --git a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellNumber.vue b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellNumber.vue
index 1eed49a09..048be1c7d 100644
--- a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellNumber.vue
+++ b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellNumber.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, ref, useTemplateRef } from "vue";
+import { nextTick, ref } from "vue";
 
 const props = defineProps({
 	value: {
@@ -13,8 +13,8 @@ const emits = defineEmits({
 	change: (value: string) => typeof value === "string",
 });
 
-const wrapper = useTemplateRef("wrapper");
-const input = useTemplateRef("input");
+const wrapper = ref<HTMLDivElement | undefined>();
+const input = ref<HTMLTextAreaElement | undefined>();
 const isEditing = ref(false);
 
 async function startEditing() {
diff --git a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellText.vue b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellText.vue
index f06c680fd..63be29a91 100644
--- a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellText.vue
+++ b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellText.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, ref, useTemplateRef } from "vue";
+import { nextTick, ref } from "vue";
 import BaseMarkdown from "../../base/BaseMarkdown.vue";
 
 const props = defineProps({
@@ -12,8 +12,8 @@ const emits = defineEmits({
 	change: (value: string) => typeof value === "string",
 });
 
-const wrapper = useTemplateRef("wrapper");
-const textarea = useTemplateRef("textarea");
+const wrapper = ref<HTMLDivElement | undefined>();
+const textarea = ref<HTMLTextAreaElement | undefined>();
 const isEditing = ref(false);
 const height = ref<number | undefined>();
 
diff --git a/src/ui/src/components/core/content/CoreProgressBar.vue b/src/ui/src/components/core/content/CoreProgressBar.vue
index 8b99c769a..a150ebcf3 100644
--- a/src/ui/src/components/core/content/CoreProgressBar.vue
+++ b/src/ui/src/components/core/content/CoreProgressBar.vue
@@ -103,13 +103,13 @@ export default { writer: definition };
 </script>
 
 <script setup lang="ts">
-import { CSSProperties, computed, inject, useTemplateRef } from "vue";
+import { CSSProperties, computed, inject, ref } from "vue";
 import injectionKeys from "@/injectionKeys";
 import { useFieldValueAsYesNo } from "@/composables/useFieldValue";
 import { getClick } from "@/renderer/syntheticEvents";
 import { usePercentageFormatter } from "@/composables/useFormatter";
 
-const rootEl = useTemplateRef("rootEl");
+const rootEl = ref<HTMLElement>();
 const fields = inject(injectionKeys.evaluatedFields);
 const componentId = inject(injectionKeys.componentId);
 const wf = inject(injectionKeys.core);
diff --git a/src/ui/src/components/workflows/base/WorkflowsNodeNamer.vue b/src/ui/src/components/workflows/base/WorkflowsNodeNamer.vue
index 8f290027a..6ac5426c3 100644
--- a/src/ui/src/components/workflows/base/WorkflowsNodeNamer.vue
+++ b/src/ui/src/components/workflows/base/WorkflowsNodeNamer.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, ref, useTemplateRef } from "vue";
+import { computed, inject, nextTick, ref } from "vue";
 import { useComponentActions } from "@/builder/useComponentActions";
 import { Component } from "@/writerTypes";
 import injectionKeys from "@/injectionKeys";
@@ -47,7 +47,7 @@ const aliasFieldValue = computed(
 	() => wf.getComponentById(props.componentId)?.content["alias"],
 );
 const isAliased = computed(() => Boolean(aliasFieldValue.value));
-const aliasEditorEl = useTemplateRef("aliasEditorEl");
+const aliasEditorEl = ref<HTMLInputElement>(null);
 const isAliasBeingEdited = ref(false);
 
 async function enableEditor() {
diff --git a/src/ui/src/wds/WdsDropdownMenu.vue b/src/ui/src/wds/WdsDropdownMenu.vue
index c91793576..6633d8b70 100644
--- a/src/ui/src/wds/WdsDropdownMenu.vue
+++ b/src/ui/src/wds/WdsDropdownMenu.vue
@@ -48,7 +48,7 @@ export type WdsDropdownMenuOption = {
 
 <script setup lang="ts">
 // from https://www.figma.com/design/jgLDtwVwg3hReC1t4Vw20D/.WDS-Writer-Design-System?node-id=128-396&t=9Gy9MYDycjVV8C2Y-1
-import { computed, PropType, ref, useTemplateRef, watch } from "vue";
+import { computed, PropType, ref, watch } from "vue";
 
 const props = defineProps({
 	options: {
@@ -65,7 +65,7 @@ const emits = defineEmits({
 	search: (value: string) => typeof value === "string",
 });
 
-const searchInput = useTemplateRef("searchInput");
+const searchInput = ref<HTMLElement>();
 const searchTerm = ref("");
 
 function getOptionIcon(option: WdsDropdownMenuOption) {
diff --git a/src/ui/src/wds/WdsTextInput.vue b/src/ui/src/wds/WdsTextInput.vue
index 2831c67f6..858df72f1 100644
--- a/src/ui/src/wds/WdsTextInput.vue
+++ b/src/ui/src/wds/WdsTextInput.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { useTemplateRef } from "vue";
+import { ref } from "vue";
 
 const model = defineModel({ type: String });
 
@@ -37,7 +37,7 @@ defineExpose({
 	setSelectionStart,
 });
 
-const input = useTemplateRef("input");
+const input = ref<HTMLInputElement>();
 
 function setSelectionStart(value: number) {
 	if (input.value) input.value.selectionStart = value;