Merge branch 'vue3' of github.com:n8n-io/n8n into vue3

cypress/e2e/16-webhook-node.cy.ts

@@ -121,13 +121,13 @@ describe('Webhook Trigger node', async () => {
 		workflowPage.actions.addNodeToCanvas('Set');
 		workflowPage.actions.openNode('Set');
 		cy.get('.add-option').click();
-		cy.get('.add-option').find('.el-select-dropdown__item').contains('Number').click();
+		getVisibleSelect().find('.el-select-dropdown__item').contains('Number').click();
 		cy.get('.fixed-collection-parameter')
 			.getByTestId('parameter-input-name')
 			.clear()
 			.type('MyValue');
 		cy.get('.fixed-collection-parameter').getByTestId('parameter-input-value').clear().type('1234');
-		ndv.getters.backToCanvas().click();
+		ndv.getters.backToCanvas().click({ force: true });
 
 		workflowPage.actions.addNodeToCanvas('Respond to Webhook');
 
@@ -173,10 +173,15 @@ describe('Webhook Trigger node', async () => {
 		getVisibleSelect().find('.el-select-dropdown__item').contains('Number').click();
 		cy.get('.fixed-collection-parameter')
 			.getByTestId('parameter-input-name')
+			.find('input')
 			.clear()
 			.type('MyValue');
-		cy.get('.fixed-collection-parameter').getByTestId('parameter-input-value').clear().type('1234');
-		ndv.getters.backToCanvas().click();
+		cy.get('.fixed-collection-parameter')
+			.getByTestId('parameter-input-value')
+			.find('input')
+			.clear()
+			.type('1234');
+		ndv.getters.backToCanvas().click({ force: true });
 
 		workflowPage.actions.executeWorkflow();
 		cy.wait(waitForWebhook);
@@ -216,11 +221,7 @@ describe('Webhook Trigger node', async () => {
 
 		workflowPage.actions.openNode('Move Binary Data');
 		cy.getByTestId('parameter-input-mode').click();
-		cy.getByTestId('parameter-input-mode')
-			.find('.el-select-dropdown')
-			.find('.option-headline')
-			.contains('JSON to Binary')
-			.click();
+		getVisibleSelect().find('.option-headline').contains('JSON to Binary').click();
 		ndv.getters.backToCanvas().click();
 
 		workflowPage.actions.executeWorkflow();
@@ -249,7 +250,7 @@ describe('Webhook Trigger node', async () => {
 		});
 	});
 
-	it('should listen for a GET request with Basic Authentication', () => {
+	it.only('should listen for a GET request with Basic Authentication', () => {
 		const webhookPath = uuid();
 		simpleWebhookCall({
 			method: 'GET',

packages/design-system/src/components/N8nFormBox/FormBox.stories.ts

@@ -13,7 +13,7 @@ export default {
 
 const methods = {
 	onSubmit: action('submit'),
-	onChange: action('change'),
+	onChange: action('update'),
 };
 
 const Template: StoryFn = (args, { argTypes }) => ({
@@ -22,7 +22,7 @@ const Template: StoryFn = (args, { argTypes }) => ({
 	components: {
 		N8nFormBox,
 	},
-	template: '<n8n-form-box v-bind="args" @submit="onSubmit" @change="onChange" />',
+	template: '<n8n-form-box v-bind="args" @submit="onSubmit" @update="onUpdate" />',
 	methods,
 });
 

packages/design-system/src/components/N8nFormBox/FormBox.vue

@@ -10,7 +10,7 @@
 				:inputs="inputs"
 				:eventBus="formBus"
 				:columnView="true"
-				@update:modelValue="onUpdateModelValue"
+				@update="onUpdateModelValue"
 				@submit="onSubmit"
 			/>
 		</div>
@@ -88,7 +88,7 @@ export default defineComponent({
 	},
 	methods: {
 		onUpdateModelValue(e: { name: string; value: string }) {
-			this.$emit('change', e);
+			this.$emit('update', e);
 		},
 		onSubmit(e: { [key: string]: string }) {
 			this.$emit('submit', e);

packages/design-system/src/components/N8nFormInputs/FormInputs.vue

@@ -117,7 +117,7 @@ export default defineComponent({
 				...this.values,
 				[name]: value,
 			};
-			this.$emit('change', { name, value });
+			this.$emit('update', { name, value });
 		},
 		onValidate(name: string, valid: boolean) {
 			this.validity = {

packages/editor-ui/src/components/BreakpointsObserver.vue

@@ -42,7 +42,7 @@ export default defineComponent({
 			void this.callDebounced('onResizeEnd', { debounceTime: 50 });
 		},
 		onResizeEnd() {
-			this.$data.width = window.innerWidth;
+			this.width = window.innerWidth;
 			this.$nextTick(async () => {
 				const bannerHeight = await getBannerRowHeight();
 				useUIStore().updateBannersHeight(bannerHeight);
@@ -51,19 +51,19 @@ export default defineComponent({
 	},
 	computed: {
 		bp(): string {
-			if (this.$data.width < BREAKPOINT_SM) {
+			if (this.width < BREAKPOINT_SM) {
 				return 'XS';
 			}
 
-			if (this.$data.width >= BREAKPOINT_XL) {
+			if (this.width >= BREAKPOINT_XL) {
 				return 'XL';
 			}
 
-			if (this.$data.width >= BREAKPOINT_LG) {
+			if (this.width >= BREAKPOINT_LG) {
 				return 'LG';
 			}
 
-			if (this.$data.width >= BREAKPOINT_MD) {
+			if (this.width >= BREAKPOINT_MD) {
 				return 'MD';
 			}
 
@@ -71,19 +71,19 @@ export default defineComponent({
 		},
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		value(): any | undefined {
-			if (this.valueXS !== undefined && this.$data.width < BREAKPOINT_SM) {
+			if (this.valueXS !== undefined && this.width < BREAKPOINT_SM) {
 				return this.valueXS;
 			}
 
-			if (this.valueXL !== undefined && this.$data.width >= BREAKPOINT_XL) {
+			if (this.valueXL !== undefined && this.width >= BREAKPOINT_XL) {
 				return this.valueXL;
 			}
 
-			if (this.valueLG !== undefined && this.$data.width >= BREAKPOINT_LG) {
+			if (this.valueLG !== undefined && this.width >= BREAKPOINT_LG) {
 				return this.valueLG;
 			}
 
-			if (this.valueMD !== undefined && this.$data.width >= BREAKPOINT_MD) {
+			if (this.valueMD !== undefined && this.width >= BREAKPOINT_MD) {
 				return this.valueMD;
 			}
 

packages/editor-ui/src/components/ChangePasswordModal.vue

@@ -12,7 +12,7 @@
 				:inputs="config"
 				:eventBus="formBus"
 				:columnView="true"
-				@change="onInput"
+				@update="onInput"
 				@submit="onSubmit"
 			/>
 		</template>

packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue

@@ -332,7 +332,7 @@ export default defineComponent({
 			return this.credentialsStore.allUsableCredentialsByType[type];
 		},
 		onDataChange(event: { name: string; value: string | number | boolean | Date | null }): void {
-			this.$emit('change', event);
+			this.$emit('update', event);
 		},
 		onDocumentationUrlClick(): void {
 			this.$telemetry.track('User clicked credential modal docs link', {

packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue

@@ -73,7 +73,7 @@
 						:mode="mode"
 						:selectedCredential="selectedCredential"
 						:showAuthTypeSelector="requiredCredentials"
-						@change="onDataChange"
+						@update="onDataChange"
 						@oauth="oAuthCredentialAuthorize"
 						@retest="retestCredential"
 						@scrollToTop="scrollToTop"

packages/editor-ui/src/components/InlineTextEdit.vue

@@ -75,7 +75,7 @@ export default defineComponent({
 				return;
 			}
 
-			this.$data.newValue = this.modelValue;
+			this.newValue = this.modelValue;
 			this.$emit('toggle');
 		},
 		onBlur() {
@@ -83,10 +83,10 @@ export default defineComponent({
 				return;
 			}
 
-			if (!this.$data.escPressed) {
+			if (!this.escPressed) {
 				this.submit();
 			}
-			this.$data.escPressed = false;
+			this.escPressed = false;
 		},
 		submit() {
 			if (this.disabled) {
@@ -94,14 +94,14 @@ export default defineComponent({
 			}
 
 			const onSubmit = (updated: boolean) => {
-				this.$data.disabled = false;
+				this.disabled = false;
 
 				if (!updated) {
-					this.$data.inputBus.emit('focus');
+					this.inputBus.emit('focus');
 				}
 			};
 
-			this.$data.disabled = true;
+			this.disabled = true;
 			this.$emit('submit', this.newValue, onSubmit);
 		},
 		onEscape() {
@@ -109,7 +109,7 @@ export default defineComponent({
 				return;
 			}
 
-			this.$data.escPressed = true;
+			this.escPressed = true;
 			this.$emit('toggle');
 		},
 	},

packages/editor-ui/src/components/IntersectionObserver.vue

@@ -63,7 +63,7 @@ export default defineComponent({
 	},
 	beforeUnmount() {
 		if (this.enabled) {
-			this.$data.observer.disconnect();
+			this.observer.disconnect();
 		}
 	},
 });

packages/editor-ui/src/components/InviteUsersModal.vue

@@ -35,7 +35,7 @@
 				:inputs="config"
 				:eventBus="formBus"
 				:columnView="true"
-				@change="onInput"
+				@update="onInput"
 				@submit="onSubmit"
 			/>
 		</template>

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -364,31 +364,31 @@ export default defineComponent({
 			});
 		},
 		onTagsEditEnable() {
-			this.$data.appliedTagIds = this.currentWorkflowTagIds;
-			this.$data.isTagsEditEnabled = true;
+			this.appliedTagIds = this.currentWorkflowTagIds;
+			this.isTagsEditEnabled = true;
 
 			setTimeout(() => {
 				// allow name update to occur before disabling name edit
-				this.$data.isNameEditEnabled = false;
-				this.$data.tagsEditBus.emit('focus');
+				this.isNameEditEnabled = false;
+				this.tagsEditBus.emit('focus');
 			}, 0);
 		},
 		async onTagsUpdate(tags: string[]) {
-			this.$data.appliedTagIds = tags;
+			this.appliedTagIds = tags;
 		},
 
 		async onTagsBlur() {
 			const current = this.currentWorkflowTagIds;
-			const tags = this.$data.appliedTagIds;
+			const tags = this.appliedTagIds;
 			if (!hasChanged(current, tags)) {
-				this.$data.isTagsEditEnabled = false;
+				this.isTagsEditEnabled = false;
 
 				return;
 			}
-			if (this.$data.tagsSaving) {
+			if (this.tagsSaving) {
 				return;
 			}
-			this.$data.tagsSaving = true;
+			this.tagsSaving = true;
 
 			const saved = await this.saveCurrentWorkflow({ tags });
 			this.$telemetry.track('User edited workflow tags', {
@@ -396,23 +396,23 @@ export default defineComponent({
 				new_tag_count: tags.length,
 			});
 
-			this.$data.tagsSaving = false;
+			this.tagsSaving = false;
 			if (saved) {
-				this.$data.isTagsEditEnabled = false;
+				this.isTagsEditEnabled = false;
 			}
 		},
 		onTagsEditEsc() {
-			this.$data.isTagsEditEnabled = false;
+			this.isTagsEditEnabled = false;
 		},
 		onNameToggle() {
-			this.$data.isNameEditEnabled = !this.$data.isNameEditEnabled;
-			if (this.$data.isNameEditEnabled) {
-				if (this.$data.isTagsEditEnabled) {
+			this.isNameEditEnabled = !this.isNameEditEnabled;
+			if (this.isNameEditEnabled) {
+				if (this.isTagsEditEnabled) {
 					// @ts-ignore
 					void this.onTagsBlur();
 				}
 
-				this.$data.isTagsEditEnabled = false;
+				this.isTagsEditEnabled = false;
 			}
 		},
 		async onNameSubmit(name: string, cb: (saved: boolean) => void) {
@@ -429,7 +429,7 @@ export default defineComponent({
 			}
 
 			if (newName === this.workflowName) {
-				this.$data.isNameEditEnabled = false;
+				this.isNameEditEnabled = false;
 
 				cb(true);
 				return;
@@ -437,7 +437,7 @@ export default defineComponent({
 
 			const saved = await this.saveCurrentWorkflow({ name });
 			if (saved) {
-				this.$data.isNameEditEnabled = false;
+				this.isNameEditEnabled = false;
 			}
 			cb(saved);
 		},
@@ -602,8 +602,8 @@ export default defineComponent({
 	},
 	watch: {
 		currentWorkflowId() {
-			this.$data.isTagsEditEnabled = false;
-			this.$data.isNameEditEnabled = false;
+			this.isTagsEditEnabled = false;
+			this.isNameEditEnabled = false;
 		},
 	},
 });

packages/editor-ui/src/components/NodeSettings.vue

@@ -605,6 +605,8 @@ export default defineComponent({
 		valueChanged(parameterData: IUpdateInformation) {
 			let newValue: NodeParameterValue;
 
+			console.log(parameterData);
+
 			if (parameterData.hasOwnProperty('value')) {
 				// New value is given
 				newValue = parameterData.value as string | number;
@@ -768,6 +770,8 @@ export default defineComponent({
 					}
 				}
 
+				console.log('after set', nodeParameters);
+
 				// Get the parameters with the now new defaults according to the
 				// from the user actually defined parameters
 				nodeParameters = NodeHelpers.getNodeParameters(
@@ -778,6 +782,8 @@ export default defineComponent({
 					node,
 				);
 
+				console.log('after getNodeParameters', nodeParameters);
+
 				for (const key of Object.keys(nodeParameters as object)) {
 					if (nodeParameters && nodeParameters[key] !== null && nodeParameters[key] !== undefined) {
 						this.setValue(`parameters.${key}`, nodeParameters[key] as string);

packages/editor-ui/src/components/ParameterInput.vue

@@ -131,14 +131,14 @@
 
 				<n8n-input
 					v-else
-					:modelValue="tempValue"
+					v-model="tempValue"
 					ref="inputField"
 					:class="{ 'input-with-opener': true, 'ph-no-capture': shouldRedactValue }"
 					:size="inputSize"
 					:type="getStringInputType"
 					:rows="getArgument('rows')"
 					:disabled="isReadOnly"
-					@update:modelValue="onUpdateTextInput"
+					@update:modelValue="valueChanged($event) && onUpdateTextInput($event)"
 					@keydown.stop
 					@focus="setFocus"
 					@blur="onBlur"

packages/editor-ui/src/components/ParameterInputExpanded.vue

@@ -35,7 +35,7 @@
 			@focus="onFocus"
 			@blur="onBlur"
 			@textInput="valueChanged"
-			@update:modelValue="valueChanged"
+			@update="valueChanged"
 		/>
 		<div :class="$style.errors" v-if="showRequiredErrors">
 			<n8n-text color="danger" size="small">

packages/editor-ui/src/components/PersonalizationModal.vue

@@ -630,7 +630,7 @@ export default defineComponent({
 			this.formBus.emit('submit');
 		},
 		async onSubmit(values: IPersonalizationLatestVersion): Promise<void> {
-			this.$data.isSaving = true;
+			this.isSaving = true;
 
 			try {
 				const survey: Record<string, GenericValue> = {
@@ -653,7 +653,7 @@ export default defineComponent({
 				this.showError(e, 'Error while submitting results');
 			}
 
-			this.$data.isSaving = false;
+			this.isSaving = false;
 			this.closeDialog();
 		},
 		async fetchOnboardingPrompt() {

packages/editor-ui/src/components/TagsContainer.vue

@@ -79,7 +79,7 @@ export default defineComponent({
 			let toDisplay: TagEl[] = limit ? tags.slice(0, limit) : tags;
 			toDisplay = toDisplay.map((tag: ITag) => ({
 				...tag,
-				hidden: this.responsive && !this.$data.visibility[tag.id],
+				hidden: this.responsive && !this.visibility[tag.id],
 			}));
 
 			let visibleCount = toDisplay.length;
@@ -111,7 +111,7 @@ export default defineComponent({
 	methods: {
 		onObserved({ el, isIntersecting }: { el: HTMLElement; isIntersecting: boolean }) {
 			if (el.dataset.id) {
-				this.$data.visibility = { ...this.$data.visibility, [el.dataset.id]: isIntersecting };
+				this.visibility = { ...this.visibility, [el.dataset.id]: isIntersecting };
 			}
 		},
 		onClick(e: MouseEvent, tag: TagEl) {

packages/editor-ui/src/components/TagsDropdown.vue

@@ -118,7 +118,7 @@ export default defineComponent({
 					if (keyboardEvent.key === 'Escape') {
 						this.$emit('esc');
 					} else if (keyboardEvent.key === 'Enter' && this.filter.length === 0) {
-						this.$data.preventUpdate = true;
+						this.preventUpdate = true;
 						this.$emit('blur');
 
 						if (typeof selectRef?.blur === 'function') {
@@ -146,7 +146,7 @@ export default defineComponent({
 		},
 		options(): ITag[] {
 			return this.allTags.filter(
-				(tag: ITag) => tag && tag.name.toLowerCase().includes(this.$data.filter.toLowerCase()),
+				(tag: ITag) => tag && tag.name.toLowerCase().includes(this.filter.toLowerCase()),
 			);
 		},
 		appliedTags(): string[] {
@@ -159,17 +159,17 @@ export default defineComponent({
 			this.focusOnTopOption();
 		},
 		filterOptions(filter = '') {
-			this.$data.filter = filter.trim();
+			this.filter = filter.trim();
 			this.$nextTick(() => this.focusOnTopOption());
 		},
 		async onCreate() {
-			const name = this.$data.filter;
+			const name = this.filter;
 			try {
 				const newTag = await this.tagsStore.create(name);
 				this.$emit('update', [...this.currentTagIds, newTag.id]);
 				this.$nextTick(() => this.focusOnTag(newTag.id));
 
-				this.$data.filter = '';
+				this.filter = '';
 			} catch (error) {
 				this.showError(
 					error,
@@ -181,16 +181,16 @@ export default defineComponent({
 		onTagsUpdated(selected: string[]) {
 			const ops = selected.find((value) => value === MANAGE_KEY || value === CREATE_KEY);
 			if (ops === MANAGE_KEY) {
-				this.$data.filter = '';
+				this.filter = '';
 				this.uiStore.openModal(TAGS_MANAGER_MODAL_KEY);
 			} else if (ops === CREATE_KEY) {
 				void this.onCreate();
 			} else {
 				setTimeout(() => {
-					if (!this.$data.preventUpdate) {
+					if (!this.preventUpdate) {
 						this.$emit('update', selected);
 					}
-					this.$data.preventUpdate = false;
+					this.preventUpdate = false;
 				}, 0);
 			}
 		},
@@ -221,7 +221,7 @@ export default defineComponent({
 		},
 		onVisibleChange(visible: boolean) {
 			if (!visible) {
-				this.$data.filter = '';
+				this.filter = '';
 				this.focused = false;
 			} else {
 				this.focused = true;

packages/editor-ui/src/components/TagsManager/TagsManager.vue

@@ -71,9 +71,7 @@ export default defineComponent({
 			return this.tagsStore.isLoading;
 		},
 		tags(): ITag[] {
-			return this.$data.tagIds
-				.map((tagId: string) => this.tagsStore.getTagById(tagId))
-				.filter(Boolean); // if tag is deleted from store
+			return this.tagIds.map((tagId: string) => this.tagsStore.getTagById(tagId)).filter(Boolean); // if tag is deleted from store
 		},
 		hasTags(): boolean {
 			return this.tags.length > 0;
@@ -81,11 +79,11 @@ export default defineComponent({
 	},
 	methods: {
 		onEnableCreate() {
-			this.$data.isCreating = true;
+			this.isCreating = true;
 		},
 
 		onDisableCreate() {
-			this.$data.isCreating = false;
+			this.isCreating = false;
 		},
 
 		async onCreate(name: string, cb: (tag: ITag | null, error?: Error) => void) {
@@ -95,7 +93,7 @@ export default defineComponent({
 				}
 
 				const newTag = await this.tagsStore.create(name);
-				this.$data.tagIds = [newTag.id].concat(this.$data.tagIds);
+				this.tagIds = [newTag.id].concat(this.tagIds);
 				cb(newTag);
 			} catch (error) {
 				const escapedName = escape(name);
@@ -154,7 +152,7 @@ export default defineComponent({
 					throw new Error(this.$locale.baseText('tagsManager.couldNotDeleteTag'));
 				}
 
-				this.$data.tagIds = this.$data.tagIds.filter((tagId: string) => tagId !== id);
+				this.tagIds = this.tagIds.filter((tagId: string) => tagId !== id);
 
 				cb(deleted);
 

packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue

@@ -52,7 +52,7 @@ export default defineComponent({
 	computed: {
 		...mapStores(useUsersStore),
 		isCreateEnabled(): boolean {
-			return (this.tags || []).length === 0 || this.$data.createEnabled;
+			return (this.tags || []).length === 0 || this.createEnabled;
 		},
 		rows(): ITagRow[] {
 			const getUsage = (count: number | undefined) =>
@@ -60,16 +60,16 @@ export default defineComponent({
 					? this.$locale.baseText('tagsView.inUse', { adjustToNumber: count })
 					: this.$locale.baseText('tagsView.notBeingUsed');
 
-			const disabled = this.isCreateEnabled || this.$data.updateId || this.$data.deleteId;
+			const disabled = this.isCreateEnabled || this.updateId || this.deleteId;
 			const tagRows = (this.tags || [])
-				.filter((tag: ITag) => this.stickyIds.has(tag.id) || matches(tag.name, this.$data.search))
+				.filter((tag: ITag) => this.stickyIds.has(tag.id) || matches(tag.name, this.search))
 				.map(
 					(tag: ITag): ITagRow => ({
 						tag,
 						usage: getUsage(tag.usageCount),
-						disable: disabled && tag.id !== this.deleteId && tag.id !== this.$data.updateId,
-						update: disabled && tag.id === this.$data.updateId,
-						delete: disabled && tag.id === this.$data.deleteId,
+						disable: disabled && tag.id !== this.deleteId && tag.id !== this.updateId,
+						update: disabled && tag.id === this.updateId,
+						delete: disabled && tag.id === this.deleteId,
 						canDelete: this.usersStore.canUserDeleteTags,
 					}),
 				);
@@ -82,13 +82,11 @@ export default defineComponent({
 			this.newName = name;
 		},
 		onSearchChange(search: string): void {
-			this.$data.stickyIds.clear();
-			this.$data.search = search;
+			this.stickyIds.clear();
+			this.search = search;
 		},
 		isHeaderDisabled(): boolean {
-			return (
-				this.isLoading || !!(this.isCreateEnabled || this.$data.updateId || this.$data.deleteId)
-			);
+			return this.isLoading || !!(this.isCreateEnabled || this.updateId || this.deleteId);
 		},
 
 		onUpdateEnable(updateId: string): void {
@@ -99,10 +97,10 @@ export default defineComponent({
 			this.newName = '';
 		},
 		updateTag(): void {
-			this.$data.isSaving = true;
+			this.isSaving = true;
 			const name = this.newName.trim();
 			const onUpdate = (updated: boolean) => {
-				this.$data.isSaving = false;
+				this.isSaving = false;
 				if (updated) {
 					this.stickyIds.add(this.updateId);
 					this.disableUpdate();
@@ -119,58 +117,58 @@ export default defineComponent({
 			this.deleteId = '';
 		},
 		deleteTag(): void {
-			this.$data.isSaving = true;
+			this.isSaving = true;
 			const onDelete = (deleted: boolean) => {
 				if (deleted) {
 					this.disableDelete();
 				}
-				this.$data.isSaving = false;
+				this.isSaving = false;
 			};
 
 			this.$emit('delete', this.deleteId, onDelete);
 		},
 
 		onCreateEnable(): void {
-			this.$data.createEnabled = true;
-			this.$data.newName = '';
+			this.createEnabled = true;
+			this.newName = '';
 		},
 		disableCreate(): void {
-			this.$data.createEnabled = false;
+			this.createEnabled = false;
 			this.$emit('disableCreate');
 		},
 		createTag(): void {
-			this.$data.isSaving = true;
-			const name = this.$data.newName.trim();
+			this.isSaving = true;
+			const name = this.newName.trim();
 			const onCreate = (created: ITag | null, error?: Error) => {
 				if (created) {
 					this.stickyIds.add(created.id);
 					this.disableCreate();
 				}
-				this.$data.isSaving = false;
+				this.isSaving = false;
 			};
 
 			this.$emit('create', name, onCreate);
 		},
 
 		applyOperation(): void {
-			if (this.$data.isSaving) {
+			if (this.isSaving) {
 				return;
 			} else if (this.isCreateEnabled) {
 				this.createTag();
-			} else if (this.$data.updateId) {
+			} else if (this.updateId) {
 				this.updateTag();
-			} else if (this.$data.deleteId) {
+			} else if (this.deleteId) {
 				this.deleteTag();
 			}
 		},
 		cancelOperation(): void {
-			if (this.$data.isSaving) {
+			if (this.isSaving) {
 				return;
 			} else if (this.isCreateEnabled) {
 				this.disableCreate();
-			} else if (this.$data.updateId) {
+			} else if (this.updateId) {
 				this.disableUpdate();
-			} else if (this.$data.deleteId) {
+			} else if (this.deleteId) {
 				this.disableDelete();
 			}
 		},

packages/editor-ui/src/views/AuthView.vue

@@ -13,7 +13,7 @@
 				:buttonLoading="formLoading"
 				@secondaryClick="onSecondaryClick"
 				@submit="onSubmit"
-				@change="onChange"
+				@update="onUpdate"
 			>
 				<SSOLogin v-if="withSso" />
 			</n8n-form-box>
@@ -48,8 +48,8 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		onChange(e: { name: string; value: string }) {
-			this.$emit('change', e);
+		onUpdate(e: { name: string; value: string }) {
+			this.$emit('update', e);
 		},
 		onSubmit(values: { [key: string]: string }) {
 			this.$emit('submit', values);

packages/editor-ui/src/views/ChangePasswordView.vue

@@ -4,7 +4,7 @@
 		:form="config"
 		:formLoading="loading"
 		@submit="onSubmit"
-		@change="onInput"
+		@update="onInput"
 	/>
 </template>
 

packages/editor-ui/src/views/SettingsCommunityNodesView.vue

@@ -92,7 +92,7 @@ export default defineComponent({
 		this.pushConnect();
 
 		try {
-			this.$data.loading = true;
+			this.loading = true;
 			await this.communityNodesStore.fetchInstalledPackages();
 
 			const installedPackages: PublicInstalledPackage[] =
@@ -126,12 +126,12 @@ export default defineComponent({
 				this.$locale.baseText('settings.communityNodes.fetchError.message'),
 			);
 		} finally {
-			this.$data.loading = false;
+			this.loading = false;
 		}
 		try {
 			await this.communityNodesStore.fetchAvailableCommunityPackageCount();
 		} finally {
-			this.$data.loading = false;
+			this.loading = false;
 		}
 	},
 	beforeUnmount() {

packages/editor-ui/src/views/SettingsLdapView.vue

@@ -39,7 +39,7 @@
 					:eventBus="formBus"
 					:columnView="true"
 					verticalSpacing="l"
-					@change="onInput"
+					@update="onInput"
 					@ready="onReadyToSubmit"
 					@submit="onSubmit"
 				/>

packages/editor-ui/src/views/SettingsPersonalView.vue

@@ -26,7 +26,7 @@
 					v-if="formInputs"
 					:inputs="formInputs"
 					:eventBus="formBus"
-					@change="onInput"
+					@update="onInput"
 					@ready="onReadyToSubmit"
 					@submit="onSubmit"
 				/>