diff --git a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
index 59f66dabd0..27a9b54abf 100644
--- a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
+++ b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
@@ -41,7 +41,6 @@ import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
 import { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
 import type { Range, Section } from './types';
 import { nonTakenRanges } from './utils';
-import { isEqual } from 'lodash-es';
 import {
 	autocompleteKeyMap,
 	enterKeyMap,
@@ -86,16 +85,6 @@ export default defineComponent({
 			editorState: null as EditorState | null,
 		};
 	},
-	watch: {
-		displayableSegments(segments, newSegments) {
-			if (isEqual(segments, newSegments)) return;
-
-			highlighter.removeColor(this.editor, this.plaintextSegments);
-			highlighter.addColor(this.editor, this.resolvableSegments);
-
-			this.$emit('update:modelValue', this.editor?.state.doc.toString());
-		},
-	},
 	computed: {
 		doc(): string {
 			return this.editor.state.doc.toString();
@@ -144,6 +133,10 @@ export default defineComponent({
 
 					// Force segments value update by keeping track of editor state
 					this.editorState = this.editor.state;
+					highlighter.removeColor(this.editor, this.plaintextSegments);
+					highlighter.addColor(this.editor, this.resolvableSegments);
+
+					this.$emit('update:modelValue', this.editor?.state.doc.toString());
 				}),
 			];
 		},
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
index 7f11ae7300..dfd4b78047 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
@@ -21,7 +21,6 @@ import {
 } from '@/plugins/codemirror/keymap';
 import { n8nAutocompletion, n8nLang } from '@/plugins/codemirror/n8nLang';
 import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
-import { isEqual } from 'lodash-es';
 import { createEventBus, type EventBus } from 'n8n-design-system/utils';
 import type { IDataObject } from 'n8n-workflow';
 import { inputTheme } from './theme';
@@ -83,17 +82,6 @@ export default defineComponent({
 				},
 			});
 		},
-		displayableSegments(segments, newSegments) {
-			if (isEqual(segments, newSegments)) return;
-
-			highlighter.removeColor(this.editor, this.plaintextSegments);
-			highlighter.addColor(this.editor, this.resolvableSegments);
-
-			this.$emit('change', {
-				value: this.unresolvedExpression,
-				segments: this.displayableSegments,
-			});
-		},
 	},
 	mounted() {
 		const extensions = [
@@ -122,6 +110,13 @@ export default defineComponent({
 
 				// Force segments value update by keeping track of editor state
 				this.editorState = this.editor.state;
+				highlighter.removeColor(this.editor, this.plaintextSegments);
+				highlighter.addColor(this.editor, this.resolvableSegments);
+
+				this.$emit('change', {
+					value: this.unresolvedExpression,
+					segments: this.displayableSegments,
+				});
 
 				setTimeout(() => {
 					try {
diff --git a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
index 9e041f0f9b..d7df84728c 100644
--- a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
+++ b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
@@ -48,7 +48,6 @@ import {
 } from '@n8n/codemirror-lang-sql';
 import { defineComponent } from 'vue';
 import { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
-import { isEqual } from 'lodash-es';
 import {
 	autocompleteKeyMap,
 	enterKeyMap,
@@ -182,22 +181,16 @@ export default defineComponent({
 
 						// Force segments value update by keeping track of editor state
 						this.editorState = this.editor.state;
+						highlighter.removeColor(this.editor, this.plaintextSegments);
+						highlighter.addColor(this.editor, this.resolvableSegments);
+
+						this.$emit('update:modelValue', this.editor?.state.doc.toString());
 					}),
 				);
 			}
 			return extensions;
 		},
 	},
-	watch: {
-		displayableSegments(segments, newSegments) {
-			if (isEqual(segments, newSegments)) return;
-
-			highlighter.removeColor(this.editor, this.plaintextSegments);
-			highlighter.addColor(this.editor, this.resolvableSegments);
-
-			this.$emit('update:modelValue', this.editor?.state.doc.toString());
-		},
-	},
 	mounted() {
 		if (!this.isReadOnly) codeNodeEditorEventBus.on('error-line-number', this.highlightLine);