diff --git a/src/FormsSubmit.vue b/src/FormsSubmit.vue
index b47beb5a7..db486c8e4 100644
--- a/src/FormsSubmit.vue
+++ b/src/FormsSubmit.vue
@@ -20,6 +20,7 @@ import type { FormsForm } from './models/Entities.d.ts'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import { defineComponent } from 'vue'
+import { nextTick, onMounted, onUnmounted } from 'vue'
 import NcContent from '@nextcloud/vue/components/NcContent'
 import Submit from './views/Submit.vue'
 
@@ -33,45 +34,14 @@ export default defineComponent({
 		Submit,
 	},
 
-	data() {
-		return {
-			form: loadState(formsAppName, 'form') as FormsForm,
-			isLoggedIn: loadState(formsAppName, 'isLoggedIn') as boolean,
-			isEmbedded: loadState(formsAppName, 'isEmbedded', false) as boolean,
-			shareHash: loadState(formsAppName, 'shareHash') as string,
-		}
-	},
-
-	unmounted() {
-		unsubscribe('forms:last-updated:set', this.onSubmitMessageEvent)
-	},
-
-	mounted() {
-		if (this.isEmbedded) {
-			subscribe('forms:last-updated:set', this.onSubmitMessageEvent)
-
-			// Communicate window size to parent window in iframes
-			const resizeObserver = new ResizeObserver((entries) => {
-				this.emitResizeMessage(entries[0].target as HTMLElement)
-			})
-			this.$nextTick(() => {
-				const formEl = document.querySelector('.app-forms-embedded form')
-				if (formEl) {
-					resizeObserver.observe(formEl)
-				}
-			})
-		}
-	},
+	setup() {
+		const form = loadState(formsAppName, 'form') as FormsForm
+		const isLoggedIn = loadState(formsAppName, 'isLoggedIn') as boolean
+		const isEmbedded = loadState(formsAppName, 'isEmbedded', false) as boolean
+		const shareHash = loadState(formsAppName, 'shareHash') as string
+		let resizeObserver: ResizeObserver | undefined
 
-	methods: {
-		onSubmitMessageEvent(event: unknown): void {
-			const id = Number(event)
-			if (Number.isFinite(id)) {
-				this.emitSubmitMessage(id)
-			}
-		},
-
-		emitSubmitMessage(id: number): void {
+		const emitSubmitMessage = (id: number): void => {
 			window.parent?.postMessage(
 				{
 					type: 'form-saved',
@@ -81,12 +51,19 @@ export default defineComponent({
 				},
 				'*',
 			)
-		},
+		}
+
+		const onSubmitMessageEvent = (event: unknown): void => {
+			const id = Number(event)
+			if (Number.isFinite(id)) {
+				emitSubmitMessage(id)
+			}
+		}
 
 		/**
 		 * @param target Target of which the size should be communicated
 		 */
-		emitResizeMessage(target: HTMLElement): void {
+		const emitResizeMessage = (target: HTMLElement): void => {
 			const rect = target.getBoundingClientRect()
 			let height = rect.top + target.scrollHeight
 			let width = target.scrollWidth
@@ -117,7 +94,38 @@ export default defineComponent({
 				},
 				'*',
 			)
-		},
+		}
+
+		onMounted(() => {
+			if (!isEmbedded) {
+				return
+			}
+
+			subscribe('forms:last-updated:set', onSubmitMessageEvent)
+
+			// Communicate window size to parent window in iframes
+			resizeObserver = new ResizeObserver((entries) => {
+				emitResizeMessage(entries[0].target as HTMLElement)
+			})
+			void nextTick(() => {
+				const formEl = document.querySelector('.app-forms-embedded form')
+				if (formEl) {
+					resizeObserver?.observe(formEl)
+				}
+			})
+		})
+
+		onUnmounted(() => {
+			unsubscribe('forms:last-updated:set', onSubmitMessageEvent)
+			resizeObserver?.disconnect()
+		})
+
+		return {
+			form,
+			isLoggedIn,
+			isEmbedded,
+			shareHash,
+		}
 	},
 })
 </script>
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 50ebf9a75..4d8293c01 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -214,21 +214,20 @@
 </template>
 
 <script lang="ts">
-import type { ComponentPublicInstance } from 'vue'
-import type { FormsQuestion } from '../models/Entities.d.ts'
+import type { ComponentPublicInstance, PropType } from 'vue'
+import type { FormsForm, FormsQuestion } from '../models/Entities.d.ts'
 
 import IconLock from '@material-symbols/svg-400/outlined/lock.svg?raw'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
+import { emit as emitEvent } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
 import { useIsMobile } from '@nextcloud/vue'
 import debounce from 'debounce'
-import { ref } from 'vue'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue'
 import { VueDraggable as Draggable } from 'vue-draggable-plus'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
@@ -281,7 +280,7 @@ export default defineComponent({
 		},
 
 		form: {
-			type: Object,
+			type: Object as PropType<FormsForm>,
 			required: true,
 		},
 
@@ -294,302 +293,333 @@ export default defineComponent({
 	emits: ['update:form', 'open-sharing'],
 
 	setup(props, { emit }) {
-		const title = ref(null)
+		const title = ref<HTMLTextAreaElement | null>(null)
+		const description = ref<HTMLTextAreaElement | null>(null)
 		const viewForm = useViewForm({
 			form: () => props.form,
 			emit,
 			titleRef: title,
 		})
 
-		return {
-			...viewForm,
-			title,
-			IconLock,
-			isMobile: useIsMobile(),
-			t,
+		// Various states
+		const isLoadingQuestions = ref<boolean>(false)
+		const isDragging = ref<boolean>(false)
+		const maxStringLengths = loadState(
+			formsAppName,
+			'maxStringLengths',
+		) as Record<string, number>
+		const questionMenuOpened = ref<boolean>(false)
+		const activeQuestionType = ref<string | null>(null)
+		const questionRefsMap = ref<Record<number, QuestionRefInstance>>({})
+		// when set to a number, the next created question will be inserted at this index
+		const insertMenuOpenedIndex = ref<number | null>(null)
+		// controls per-question insert menu visibility
+		const insertMenuOpened = ref<boolean>(false)
+
+		// Helper functions
+		const setQuestionRef = (
+			el: QuestionRefInstance | null,
+			question: FormsQuestion,
+		): void => {
+			if (el) {
+				questionRefsMap.value[question.id] = el
+			} else {
+				delete questionRefsMap.value[question.id]
+			}
 		}
-	},
 
-	data() {
-		return {
-			answerTypes,
+		const registerQuestionRef = (
+			question: FormsQuestion,
+		): ((el: Element | ComponentPublicInstance | null) => void) => {
+			return (el) => {
+				setQuestionRef(el as QuestionRefInstance | null, question)
+			}
+		}
 
-			// Various states
-			isLoadingQuestions: false as boolean,
-			isDragging: false as boolean,
+		/**
+		 * Auto adjust the title height based its scroll height
+		 */
+		const resizeTitle = (): void => {
+			nextTick(() => {
+				const textarea = title.value
+				if (textarea) {
+					textarea.style.cssText = 'height: 0'
+					// include 2px border
+					textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px`
+				}
+			})
+		}
 
-			maxStringLengths: loadState(formsAppName, 'maxStringLengths') as Record<
-				string,
-				number
-			>,
+		/**
+		 * Auto adjust the description height based on its scroll height
+		 */
+		const resizeDescription = (): void => {
+			// nextTick to ensure textarea is attached to DOM
+			nextTick(() => {
+				const textarea = description.value
+				if (textarea) {
+					textarea.style.cssText = 'height: 0'
+					// include 2px border
+					textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px`
+				}
+			})
+		}
 
-			questionMenuOpened: false as boolean,
-			activeQuestionType: null as string | null,
-			questionRefsMap: {} as Record<number, QuestionRefInstance>,
+		/**
+		 * Title & description save methods
+		 */
+		const saveTitle = debounce(async () => {
+			await viewForm.saveFormProperty('title')
+		}, INPUT_DEBOUNCE_MS)
 
-			// when set to a number, the next created question will be inserted at this index
-			insertMenuOpenedIndex: null as number | null,
-			// controls per-question insert menu visibility
-			insertMenuOpened: false as boolean,
-		}
-	},
+		const saveDescription = debounce(async () => {
+			await viewForm.saveFormProperty('description')
+		}, INPUT_DEBOUNCE_MS)
 
-	computed: {
-		hasQuestions(): boolean {
-			return this.form.questions.length === 0
-		},
+		// Computed properties
+		const hasQuestions = computed<boolean>(
+			() => props.form.questions.length === 0,
+		)
 
-		isRequiredUsed(): boolean {
-			return this.form.questions.reduce(
+		const isRequiredUsed = computed<boolean>(() =>
+			props.form.questions.reduce(
 				(isUsed: boolean, question: FormsQuestion) =>
 					isUsed || Boolean(question.isRequired),
 				false,
-			)
-		},
+			),
+		)
 
 		/**
 		 * Check if form is expired
 		 */
-		isExpired(): boolean {
-			return this.form.expires > 0 && moment().unix() > this.form.expires
-		},
+		const isExpired = computed<boolean>(
+			() => props.form.expires > 0 && moment().unix() > props.form.expires,
+		)
 
 		/**
 		 * Check if the form was archived
 		 */
-		isFormArchived(): boolean {
-			return this.form.state === FormState.FormArchived
-		},
+		const isFormArchived = computed<boolean>(
+			() => props.form.state === FormState.FormArchived,
+		)
 
-		infoMessage(): string {
+		const infoMessage = computed<string>(() => {
 			let message = ''
-			if (this.form.isAnonymous) {
+			if (props.form.isAnonymous) {
 				message += t('forms', 'Responses are anonymous.')
 			}
 
 			// On Submit, this is dependent on `isLoggedIn`. Create-view is always logged in and the variable isLoggedIn does not exist.
-			if (!this.form.isAnonymous && true) {
+			if (!props.form.isAnonymous && true) {
 				message += t('forms', 'Responses are connected to your account.')
 			}
 
-			if (this.isRequiredUsed) {
+			if (isRequiredUsed.value) {
 				message +=
 					' '
 					+ t('forms', 'An asterisk (*) indicates mandatory questions.')
 			}
 
 			return message
-		},
+		})
 
-		expirationMessage(): string {
-			const relativeDate = moment(this.form.expires, 'X')
+		const expirationMessage = computed<string>(() => {
+			const relativeDate = moment(props.form.expires, 'X')
 				.locale(window.OC.getLanguage())
 				.fromNow()
-			if (this.isExpired) {
+			if (isExpired.value) {
 				return t('forms', 'Expired {relativeDate}.', { relativeDate })
 			}
 			return t('forms', 'Expires {relativeDate}.', { relativeDate })
-		},
+		})
 
 		// Remove properties from answerTypes for create button
-		answerTypesFilter(): Omit<typeof answerTypes, 'datetime'> {
-			// Remove 'datetime' from answerTypes for create button
-			// eslint-disable-next-line @typescript-eslint/no-unused-vars
-			const { datetime, ...filteredAnswerTypes } = answerTypes
-			return filteredAnswerTypes
-		},
-
-		hasSubtypes(): (
-			answer: { subtypes?: Record<string, unknown> } | null | undefined,
-		) => boolean {
+		const answerTypesFilter = computed<Omit<typeof answerTypes, 'datetime'>>(
+			() => {
+				// Remove 'datetime' from answerTypes for create button
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
+				const { datetime, ...filteredAnswerTypes } = answerTypes
+				return filteredAnswerTypes
+			},
+		)
+
+		const hasSubtypes = computed<
+			(
+				answer: { subtypes?: Record<string, unknown> } | null | undefined,
+			) => boolean
+		>(() => {
 			return (answer) =>
 				Boolean(answer?.subtypes)
 				&& Object.keys(answer?.subtypes ?? {}).length > 0
-		},
-
-		lockedUntilFormatted(): string {
-			return moment(this.form.lockedUntil, 'X').fromNow()
-		},
-	},
-
-	watch: {
-		// Fetch full form on change
-		hash() {
-			this.fetchFullForm(this.form.id)
-		},
-
-		// Update Window-Title on title change
-		'form.title': function () {
-			SetWindowTitle(this.formTitle)
-		},
-
-		// resize description if form is loaded
-		isLoadingForm(value: boolean): void {
-			if (!value) {
-				this.resizeTitle()
-				this.resizeDescription()
-			}
-		},
-	},
+		})
 
-	mounted() {
-		this.fetchFullForm(this.form.id)
-		SetWindowTitle(this.formTitle)
-	},
+		const lockedUntilFormatted = computed<string>(() =>
+			moment(props.form.lockedUntil, 'X').fromNow(),
+		)
 
-	methods: {
-		onDragStart(): void {
-			this.isDragging = true
-		},
+		// Event handlers
+		const onDragStart = (): void => {
+			isDragging.value = true
+		}
 
-		onDragEnd(): void {
-			this.$nextTick(() => {
-				this.isDragging = false
+		const onDragEnd = (): void => {
+			nextTick(() => {
+				isDragging.value = false
 			})
-		},
-
-		setQuestionRef(
-			el: QuestionRefInstance | null,
-			question: FormsQuestion,
-		): void {
-			if (el) {
-				this.questionRefsMap[question.id] = el
-			} else {
-				delete this.questionRefsMap[question.id]
-			}
-		},
-
-		registerQuestionRef(
-			question: FormsQuestion,
-		): (el: Element | ComponentPublicInstance | null) => void {
-			return (el) => {
-				this.setQuestionRef(el as QuestionRefInstance | null, question)
-			}
-		},
+		}
 
-		updateQuestionProperty<K extends keyof FormsQuestion>(
+		const updateQuestionProperty = <K extends keyof FormsQuestion>(
 			index: number,
 			property: K,
 			value: FormsQuestion[K],
-		): void {
-			const questions = [...this.form.questions]
+		): void => {
+			const questions = [...props.form.questions]
 			questions[index] = { ...questions[index], [property]: value }
-			this.$emit('update:form', { ...this.form, questions })
-		},
+			emit('update:form', { ...props.form, questions })
+		}
 
-		updateQuestionText(index: number, value: string): void {
-			this.updateQuestionProperty(index, 'text', value)
-		},
+		const updateQuestionText = (index: number, value: string): void => {
+			updateQuestionProperty(index, 'text', value)
+		}
 
-		updateQuestionDescription(index: number, value: string): void {
-			this.updateQuestionProperty(index, 'description', value)
-		},
+		const updateQuestionDescription = (index: number, value: string): void => {
+			updateQuestionProperty(index, 'description', value)
+		}
 
-		updateQuestionIsRequired(index: number, value: boolean): void {
-			this.updateQuestionProperty(index, 'isRequired', value)
-		},
+		const updateQuestionIsRequired = (index: number, value: boolean): void => {
+			updateQuestionProperty(index, 'isRequired', value)
+		}
 
-		updateQuestionName(index: number, value: string): void {
-			this.updateQuestionProperty(index, 'name', value)
-		},
+		const updateQuestionName = (index: number, value: string): void => {
+			updateQuestionProperty(index, 'name', value)
+		}
 
-		updateQuestionExtraSettings(
+		const updateQuestionExtraSettings = (
 			index: number,
 			value: Record<string, unknown> | null,
-		): void {
-			this.updateQuestionProperty(index, 'extraSettings', value)
-		},
+		): void => {
+			updateQuestionProperty(index, 'extraSettings', value)
+		}
 
-		updateQuestionOptions(index: number, value: unknown[]): void {
-			this.updateQuestionProperty(index, 'options', value)
-		},
+		const updateQuestionOptions = (index: number, value: unknown[]): void => {
+			updateQuestionProperty(index, 'options', value)
+		}
+
+		/**
+		 * Reorder questions on dragEnd
+		 *
+		 * @param questions the freshly reordered questions (avoids reading the not-yet-updated `form` prop)
+		 */
+		const onQuestionOrderChange = async (
+			questions: FormsQuestion[],
+		): Promise<void> => {
+			isLoadingQuestions.value = true
+			const newOrder = questions.map((question: FormsQuestion) => question.id)
+
+			try {
+				await axios.patch(
+					generateOcsUrl('apps/forms/api/v3/forms/{id}/questions', {
+						id: props.form.id,
+					}),
+					{
+						newOrder,
+					},
+				)
+				emitEvent('forms:last-updated:set', props.form.id)
+			} catch (error) {
+				logger.error('Error while saving form', { error })
+				showError(t('forms', 'Error while saving form'))
+			} finally {
+				isLoadingQuestions.value = false
+			}
+		}
 
-		onMoveUp(index: number): void {
+		const onMoveUp = (index: number): void => {
 			if (index > 0) {
-				const questions = [...this.form.questions]
+				const questions = [...props.form.questions]
 				;[questions[index - 1], questions[index]] = [
 					questions[index],
 					questions[index - 1],
 				]
-				this.$emit('update:form', { ...this.form, questions })
-				this.onQuestionOrderChange(questions)
+				emit('update:form', { ...props.form, questions })
+				onQuestionOrderChange(questions)
 			}
-		},
+		}
 
-		onMoveDown(index: number): void {
+		const onMoveDown = (index: number): void => {
 			// only if not the last one
-			if (index < this.form.questions.length - 1) {
-				this.onMoveUp(index + 1)
+			if (index < props.form.questions.length - 1) {
+				onMoveUp(index + 1)
 			}
-		},
+		}
 
-		onTitleChange(): void {
-			this.resizeTitle()
-			this.saveTitle()
-		},
+		const insertQuestion = (
+			questionData: FormsQuestion,
+			defaultFields: Partial<FormsQuestion> = {},
+			position: number | null = null,
+		): void => {
+			const newQuestionObj = {
+				...defaultFields,
+				...questionData,
+			}
 
-		/**
-		 * Auto adjust the title height based its scroll height
-		 */
-		resizeTitle(): void {
-			this.$nextTick(() => {
-				const textarea = this.$refs.title as HTMLTextAreaElement
-				textarea.style.cssText = 'height: 0'
-				// include 2px border
-				textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px`
-			})
-		},
+			let insertAt = null
+			if (
+				questionData
+				&& questionData.order !== undefined
+				&& questionData.order !== null
+			) {
+				insertAt = Number(questionData.order) - 1
+			} else if (position !== null) {
+				insertAt = position
+			}
 
-		/**
-		 * Auto adjust the description height based on its scroll height
-		 */
-		resizeDescription(): void {
-			// nextTick to ensure textarea is attached to DOM
-			this.$nextTick(() => {
-				const textarea = this.$refs.description as HTMLTextAreaElement
-				textarea.style.cssText = 'height: 0'
-				// include 2px border
-				textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px`
-			})
-		},
+			const questions = [...props.form.questions]
+			if (insertAt !== null && insertAt <= questions.length) {
+				questions.splice(insertAt, 0, newQuestionObj)
+				emit('update:form', { ...props.form, questions })
+				nextTick(() => {
+					// Prefer ref by id when available, fallback to positional refs
+					questionRefsMap.value[newQuestionObj.id]?.focus?.()
+				})
+			} else {
+				questions.push(newQuestionObj)
+				emit('update:form', { ...props.form, questions })
+				nextTick(() => {
+					questionRefsMap.value[newQuestionObj.id]?.focus?.()
+				})
+			}
+
+			emitEvent('forms:last-updated:set', props.form.id)
+		}
+
+		const onTitleChange = (): void => {
+			resizeTitle()
+			saveTitle()
+		}
 
-		onTitleInput(event: Event): void {
-			this.$emit('update:form', {
-				...this.form,
+		const onTitleInput = (event: Event): void => {
+			emit('update:form', {
+				...props.form,
 				title: (event.target as HTMLTextAreaElement).value,
 			})
-			this.onTitleChange()
-		},
+			onTitleChange()
+		}
 
 		/**
 		 * Update the description
 		 *
 		 * @param event The input event of the textarea
 		 */
-		updateDescription(event: Event): void {
+		const updateDescription = (event: Event): void => {
 			const target = event.target as HTMLTextAreaElement | null
 			if (!target) {
 				return
 			}
-			this.$emit('update:form', { ...this.form, description: target.value })
-			this.resizeDescription()
-			this.saveDescription()
-		},
-
-		/**
-		 * Title & description save methods
-		 */
-		saveTitle: debounce(async function (this: {
-			saveFormProperty: (key: 'title') => void
-		}) {
-			this.saveFormProperty('title')
-		}, INPUT_DEBOUNCE_MS),
-
-		saveDescription: debounce(async function (this: {
-			saveFormProperty: (key: 'description') => void
-		}) {
-			this.saveFormProperty('description')
-		}, INPUT_DEBOUNCE_MS),
+			emit('update:form', { ...props.form, description: target.value })
+			resizeDescription()
+			saveDescription()
+		}
 
 		/**
 		 * Add a new question to the current form
@@ -598,14 +628,14 @@ export default defineComponent({
 		 * @param subtype the question subtype, see AnswerTypes.subtypes
 		 * @param position where the new question should be added
 		 */
-		async addQuestion(
+		const addQuestion = async (
 			type: string,
 			subtype: string | null = null,
 			position: number | null = null,
-		): Promise<void> {
-			this.activeQuestionType = null
+		): Promise<void> => {
+			activeQuestionType.value = null
 			const text = ''
-			this.isLoadingQuestions = true
+			isLoadingQuestions.value = true
 
 			try {
 				const body: {
@@ -621,47 +651,47 @@ export default defineComponent({
 
 				const response = await axios.post(
 					generateOcsUrl('apps/forms/api/v3/forms/{id}/questions', {
-						id: this.form.id,
+						id: props.form.id,
 					}),
 					body,
 				)
 				const question = OcsResponse2Data<FormsQuestion>(response)
 
 				// Delegate insertion & focus handling to helper
-				this.insertQuestion(question, { text, type, answers: [] }, position)
+				insertQuestion(question, { text, type, answers: [] }, position)
 			} catch (error) {
 				logger.error('Error while adding new question', { error })
 				showError(
 					t('forms', 'There was an error while adding the new question'),
 				)
 			} finally {
-				this.isLoadingQuestions = false
+				isLoadingQuestions.value = false
 			}
-		},
+		}
 
 		/**
 		 * Delete a question
 		 *
 		 * @param questionId the question id to delete
 		 */
-		async deleteQuestion(questionId: number): Promise<void> {
-			this.isLoadingQuestions = true
+		const deleteQuestion = async (questionId: number): Promise<void> => {
+			isLoadingQuestions.value = true
 
 			try {
 				await axios.delete(
 					generateOcsUrl(
 						'apps/forms/api/v3/forms/{id}/questions/{questionId}',
 						{
-							id: this.form.id,
+							id: props.form.id,
 							questionId,
 						},
 					),
 				)
-				const questions = this.form.questions.filter(
+				const questions = props.form.questions.filter(
 					(search: FormsQuestion) => search.id !== questionId,
 				)
-				this.$emit('update:form', { ...this.form, questions })
-				emit('forms:last-updated:set', this.form.id)
+				emit('update:form', { ...props.form, questions })
+				emitEvent('forms:last-updated:set', props.form.id)
 			} catch (error) {
 				logger.error(`Error while removing question ${questionId}`, {
 					error,
@@ -670,49 +700,9 @@ export default defineComponent({
 					t('forms', 'There was an error while removing the question'),
 				)
 			} finally {
-				this.isLoadingQuestions = false
+				isLoadingQuestions.value = false
 			}
-		},
-
-		insertQuestion(
-			questionData: FormsQuestion,
-			defaultFields: Partial<FormsQuestion> = {},
-			position: number | null = null,
-		): void {
-			const newQuestionObj = {
-				...defaultFields,
-				...questionData,
-			}
-
-			let insertAt = null
-			if (
-				questionData
-				&& questionData.order !== undefined
-				&& questionData.order !== null
-			) {
-				insertAt = Number(questionData.order) - 1
-			} else if (position !== null) {
-				insertAt = position
-			}
-
-			const questions = [...this.form.questions]
-			if (insertAt !== null && insertAt <= questions.length) {
-				questions.splice(insertAt, 0, newQuestionObj)
-				this.$emit('update:form', { ...this.form, questions })
-				this.$nextTick(() => {
-					// Prefer ref by id when available, fallback to positional refs
-					this.questionRefsMap[newQuestionObj.id]?.focus?.()
-				})
-			} else {
-				questions.push(newQuestionObj)
-				this.$emit('update:form', { ...this.form, questions })
-				this.$nextTick(() => {
-					this.questionRefsMap[newQuestionObj.id]?.focus?.()
-				})
-			}
-
-			emit('forms:last-updated:set', this.form.id)
-		},
+		}
 
 		/**
 		 * Clone a question
@@ -721,17 +711,17 @@ export default defineComponent({
 		 * @param question.id the question id to clone in the current form
 		 * @param position where the cloned question should be added
 		 */
-		async cloneQuestion(
+		const cloneQuestion = async (
 			question: Pick<FormsQuestion, 'id'>,
 			position: number | null,
-		): Promise<void> {
-			this.isLoadingQuestions = true
+		): Promise<void> => {
+			isLoadingQuestions.value = true
 
 			try {
 				const url = generateOcsUrl(
 					'apps/forms/api/v3/forms/{id}/questions?fromId={questionId}',
 					{
-						id: this.form.id,
+						id: props.form.id,
 						questionId: question.id,
 					},
 				)
@@ -746,48 +736,104 @@ export default defineComponent({
 				const clonedQuestion = OcsResponse2Data<FormsQuestion>(response)
 
 				// Delegate insertion & focus handling to helper
-				this.insertQuestion(clonedQuestion, { answers: [] })
+				insertQuestion(clonedQuestion, { answers: [] })
 			} catch (error) {
 				logger.error(`Error while duplicating question ${question.id}`, {
 					error,
 				})
 				showError('There was an error while duplicating the question')
 			} finally {
-				this.isLoadingQuestions = false
+				isLoadingQuestions.value = false
 			}
-		},
+		}
 
-		onUpdateQuestions(questions: FormsQuestion[]): void {
-			this.$emit('update:form', { ...this.form, questions })
-			this.onQuestionOrderChange(questions)
-		},
+		const onUpdateQuestions = (questions: FormsQuestion[]): void => {
+			emit('update:form', { ...props.form, questions })
+			onQuestionOrderChange(questions)
+		}
 
-		/**
-		 * Reorder questions on dragEnd
-		 *
-		 * @param questions the freshly reordered questions (avoids reading the not-yet-updated `form` prop)
-		 */
-		async onQuestionOrderChange(questions: FormsQuestion[]): Promise<void> {
-			this.isLoadingQuestions = true
-			const newOrder = questions.map((question: FormsQuestion) => question.id)
+		// Watchers
+		// Fetch full form on change
+		watch(
+			() => props.hash,
+			() => {
+				viewForm.fetchFullForm(props.form.id)
+			},
+		)
 
-			try {
-				await axios.patch(
-					generateOcsUrl('apps/forms/api/v3/forms/{id}/questions', {
-						id: this.form.id,
-					}),
-					{
-						newOrder,
-					},
-				)
-				emit('forms:last-updated:set', this.form.id)
-			} catch (error) {
-				logger.error('Error while saving form', { error })
-				showError(t('forms', 'Error while saving form'))
-			} finally {
-				this.isLoadingQuestions = false
-			}
-		},
+		// Update Window-Title on title change
+		watch(
+			() => props.form.title,
+			() => {
+				SetWindowTitle(viewForm.formTitle)
+			},
+		)
+
+		// resize description if form is loaded
+		watch(
+			() => viewForm.isLoadingForm.value,
+			(value: boolean) => {
+				if (!value) {
+					resizeTitle()
+					resizeDescription()
+				}
+			},
+		)
+
+		// Lifecycle
+		onMounted(() => {
+			viewForm.fetchFullForm(props.form.id)
+			SetWindowTitle(viewForm.formTitle)
+		})
+
+		return {
+			...viewForm,
+			answerTypes,
+			title,
+			description,
+			isLoadingQuestions,
+			isDragging,
+			maxStringLengths,
+			questionMenuOpened,
+			activeQuestionType,
+			questionRefsMap,
+			insertMenuOpenedIndex,
+			insertMenuOpened,
+			hasQuestions,
+			isRequiredUsed,
+			isExpired,
+			isFormArchived,
+			infoMessage,
+			expirationMessage,
+			answerTypesFilter,
+			hasSubtypes,
+			lockedUntilFormatted,
+			onDragStart,
+			onDragEnd,
+			setQuestionRef,
+			registerQuestionRef,
+			updateQuestionText,
+			updateQuestionDescription,
+			updateQuestionIsRequired,
+			updateQuestionName,
+			updateQuestionExtraSettings,
+			updateQuestionOptions,
+			onMoveUp,
+			onMoveDown,
+			onTitleInput,
+			updateDescription,
+			resizeTitle,
+			resizeDescription,
+			addQuestion,
+			deleteQuestion,
+			insertQuestion,
+			cloneQuestion,
+			onUpdateQuestions,
+			onQuestionOrderChange,
+			IconLock,
+			isMobile: useIsMobile(),
+			t,
+		}
 	},
 })
 </script>
diff --git a/src/views/Results.vue b/src/views/Results.vue
index 20ba0e4d9..2c5c653f4 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -285,14 +285,15 @@ import IconTable from '@material-symbols/svg-400/outlined/table_chart.svg?raw'
 import { getCurrentUser, getRequestToken } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { getFilePickerBuilder, showError, showSuccess } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
+import { emit as emitEvent } from '@nextcloud/event-bus'
 import { FileType } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 import { useIsSmallMobile } from '@nextcloud/vue'
 import debounce from 'debounce'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, nextTick, onBeforeMount, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
@@ -419,201 +420,120 @@ export default defineComponent({
 	emits: ['update:form', 'open-sharing'],
 
 	setup(props, { emit }) {
+		const route = useRoute()
+		const router = useRouter()
 		const viewForm = useViewForm({ form: () => props.form, emit })
 
-		return {
-			...viewForm,
-			isMobile: useIsSmallMobile(),
-			t,
-			responseViews,
-			IconChevronLeft,
-			IconDelete,
-			IconDownload,
-			IconFileDelimited,
-			IconFileExcelOutline,
-			IconFolder,
-			IconLink,
-			IconLinkVariantOff,
-			IconPoll,
-			IconRefresh,
-			IconShareVariant,
-			IconTable,
-			IconMagnify,
-		}
-	},
-
-	data(): ResultsViewData {
-		return {
-			questions: [] as FormsQuestion[],
-			submissions: [] as SubmissionRecord[],
-			filteredSubmissionsCount: 0 as number,
-			isDownloadActionOpened: false as boolean,
-			loadingResults: true as boolean,
-			skipReloadOnOffsetChange: false as boolean,
-			picker: null as PickerLike | null,
-			showConfirmDeleteDialog: false as boolean,
-			submissionSearch: '' as string,
-			limit: 20 as number,
-			offset: 0 as number,
-			linkedFileNotAvailableButtons: [
-				{
-					label: t('forms', 'Unlink spreadsheet'),
-					icon: IconLinkVariantOff,
-					variant: 'error',
-					callback: () => {
-						this.onUnlinkFile()
-					},
+		const questions = ref<FormsQuestion[]>([])
+		const submissions = ref<SubmissionRecord[]>([])
+		const filteredSubmissionsCount = ref(0)
+		const isDownloadActionOpened = ref(false)
+		const loadingResults = ref(true)
+		const skipReloadOnOffsetChange = ref(false)
+		const picker = ref<PickerLike | null>(null)
+		const showConfirmDeleteDialog = ref(false)
+		const submissionSearch = ref('')
+		const limit = ref(20)
+		const offset = ref(0)
+		const isMobile = useIsSmallMobile()
+
+		const linkedFileNotAvailableButtons = computed<DialogButton[]>(() => [
+			{
+				label: t('forms', 'Unlink spreadsheet'),
+				icon: IconLinkVariantOff,
+				variant: 'error',
+				callback: () => {
+					void onUnlinkFile()
 				},
-				{
-					label: t('forms', 'Create spreadsheet'),
-					icon: IconLink,
-					variant: 'primary',
-					callback: () => {
-						this.onLinkFile()
-					},
+			},
+			{
+				label: t('forms', 'Create spreadsheet'),
+				icon: IconLink,
+				variant: 'primary',
+				callback: () => {
+					void onLinkFile()
 				},
-			] as DialogButton[],
-
-			confirmDeleteButtons: [
-				{
-					label: t('forms', 'Cancel'),
-					icon: IconCancel,
-					variant: 'tertiary',
-					callback: () => {
-						this.closeDeleteConfirmation()
-					},
+			},
+		])
+
+		const confirmDeleteButtons = computed<DialogButton[]>(() => [
+			{
+				label: t('forms', 'Cancel'),
+				icon: IconCancel,
+				variant: 'tertiary',
+				callback: () => {
+					closeDeleteConfirmation()
 				},
-				{
-					label: t('forms', 'Delete responses'),
-					icon: IconDelete,
-					variant: 'error',
-					callback: () => {
-						this.deleteAllSubmissionsConfirmed()
-					},
+			},
+			{
+				label: t('forms', 'Delete responses'),
+				icon: IconDelete,
+				variant: 'error',
+				callback: () => {
+					void deleteAllSubmissionsConfirmed()
 				},
-			] as DialogButton[],
-		}
-	},
-
-	computed: {
-		isSummaryView(): boolean {
-			return this.$route.name === 'results.summary'
-		},
-
-		activeResponseView(): ResponseView {
-			return this.isSummaryView ? summaryResponseView : responsesResponseView
-		},
-
-		isFormArchived(): boolean {
-			return this.form.state === FormState.FormArchived
-		},
-
-		canExportSubmissions(): boolean {
-			return this.form.permissions.includes(
+			},
+		])
+
+		const isSummaryView = computed<boolean>(
+			() => route.name === 'results.summary',
+		)
+		const activeResponseView = computed<ResponseView>(() => {
+			return isSummaryView.value ? summaryResponseView : responsesResponseView
+		})
+		const isFormArchived = computed<boolean>(() => {
+			return props.form.state === FormState.FormArchived
+		})
+		const canExportSubmissions = computed<boolean>(() => {
+			return props.form.permissions.includes(
 				PERMISSION_TYPES.PERMISSION_RESULTS,
 			)
-		},
-
-		canDeleteSubmissions(): boolean {
+		})
+		const canDeleteSubmissions = computed<boolean>(() => {
 			return (
-				this.form.permissions.includes(
+				props.form.permissions.includes(
 					PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
-				) && !this.isFormArchived
+				) && !isFormArchived.value
 			)
-		},
-
-		canEditForm(): boolean {
-			return this.form.permissions.includes(PERMISSION_TYPES.PERMISSION_EDIT)
-		},
-
-		noSubmissions(): boolean {
-			return this.form.submissionCount === 0
-		},
-
-		noFilteredSubmissions(): boolean {
-			return this.submissions.length === 0
-		},
-
-		fileUrl(): string {
-			if (this.form.fileId) {
-				return generateUrl('/f/{fileId}', { fileId: this.form.fileId })
+		})
+		const canEditForm = computed<boolean>(() => {
+			return props.form.permissions.includes(PERMISSION_TYPES.PERMISSION_EDIT)
+		})
+		const noSubmissions = computed<boolean>(() => {
+			return props.form.submissionCount === 0
+		})
+		const noFilteredSubmissions = computed<boolean>(() => {
+			return submissions.value.length === 0
+		})
+		const fileUrl = computed<string>(() => {
+			if (props.form.fileId) {
+				return generateUrl('/f/{fileId}', { fileId: props.form.fileId })
 			}
 			return window.location.href
-		},
-
-		showLinkedFileNotAvailableDialog(): boolean {
-			if (this.form.partial) {
+		})
+		const showLinkedFileNotAvailableDialog = computed<boolean>(() => {
+			if (props.form.partial) {
 				return false
 			}
 
 			return (
-				this.canEditForm
-				&& Boolean(this.form.fileId)
-				&& !this.form.filePath
-				&& !this.isFormLocked
+				canEditForm.value
+				&& Boolean(props.form.fileId)
+				&& !props.form.filePath
+				&& !viewForm.isFormLocked.value
 			)
-		},
-	},
-
-	watch: {
-		async hash(): Promise<void> {
-			await this.fetchFullForm(this.form.id)
-			await this.loadFormResults()
-			SetWindowTitle(this.formTitle)
-		},
-
-		'$route.name': {
-			handler(): void {
-				const viewId = this.isSummaryView ? 'summary' : 'responses'
-				this.saveActiveResponseViewToLocalStorage(viewId)
-				this.loadFormResults()
-			},
-		},
-
-		limit(): void {
-			this.loadFormResults()
-		},
+		})
 
-		offset(): void {
-			if (!this.skipReloadOnOffsetChange) {
-				this.loadFormResults()
-			}
-		},
-
-		submissionSearch: debounce(function (
-			this: ResultsViewData & {
-				$nextTick: (callback: () => void) => void
-				loadFormResults: () => void
-			},
-		) {
-			this.skipReloadOnOffsetChange = true
-			this.offset = 0
-			this.$nextTick(() => {
-				this.skipReloadOnOffsetChange = false
-			})
-			this.loadFormResults()
-		}, INPUT_DEBOUNCE_MS),
-	},
-
-	async beforeMount(): Promise<void> {
-		// Determine the initial viewId based on the route
-		const viewId = this.isSummaryView ? 'summary' : 'responses'
-		this.saveActiveResponseViewToLocalStorage(viewId)
-
-		await this.fetchFullForm(this.form.id)
-		this.loadFormResults()
-		SetWindowTitle(this.formTitle)
-	},
-
-	methods: {
 		/**
 		 * Save the active response view preference to localStorage for the current form.
 		 *
 		 * @param viewId - The ID of the view ('summary' or 'responses')
 		 */
-		saveActiveResponseViewToLocalStorage(viewId: ResponseView['id']): void {
+		function saveActiveResponseViewToLocalStorage(
+			viewId: ResponseView['id'],
+		): void {
 			try {
-				const storageKey = this.getActiveResponseViewStorageKey()
+				const storageKey = getActiveResponseViewStorageKey()
 				if (!storageKey) {
 					return
 				}
@@ -624,48 +544,54 @@ export default defineComponent({
 					error: err,
 				})
 			}
-		},
+		}
 
-		getActiveResponseViewStorageKey(): string | null {
-			const formHash = this.form.hash
+		/**
+		 * Get storage key for active response view
+		 */
+		function getActiveResponseViewStorageKey(): string | null {
+			const formHash = props.form.hash
 			if (!formHash) {
 				return null
 			}
 
 			return `nextcloud_forms_${formHash}_activeResponseView`
-		},
+		}
 
 		/**
 		 * Navigate to an explicit route for the selected response view.
 		 *
 		 * @param view The selected response view object
 		 */
-		async onViewChange(view: ResponseView): Promise<void> {
+		async function onViewChange(view: ResponseView): Promise<void> {
 			if (!view?.id) {
 				return
 			}
 			const targetName = `results.${view.id}`
-			if (this.$route.name === targetName) {
-				this.loadFormResults()
+			if (route.name === targetName) {
+				await loadFormResults()
 				return
 			}
 
 			try {
-				await this.$router.push({
+				await router.push({
 					name: targetName,
 					params: {
-						hash: this.form.hash,
+						hash: props.form.hash,
 					},
 				})
 			} catch (error) {
 				logger.debug('Navigation cancelled', { error })
 			}
-		},
+		}
 
-		async onUnlinkFile(): Promise<void> {
+		/**
+		 * Unlink the results file
+		 */
+		async function onUnlinkFile(): Promise<void> {
 			await axios.patch(
 				generateOcsUrl('apps/forms/api/v3/forms/{formId}', {
-					formId: this.form.id,
+					formId: props.form.id,
 				}),
 				{
 					keyValuePairs: {
@@ -676,25 +602,28 @@ export default defineComponent({
 			)
 
 			const updatedForm = {
-				...this.form,
+				...props.form,
 				fileFormat: null,
 				fileId: null,
 				filePath: null,
 			}
-			this.$emit('update:form', updatedForm)
-			emit('forms:last-updated:set', this.form.id)
-		},
+			emit('update:form', updatedForm)
+			emitEvent('forms:last-updated:set', props.form.id)
+		}
 
-		async loadFormResults(): Promise<void> {
-			this.loadingResults = true
-			logger.debug(`Loading responses for form ${this.form.hash}`)
+		/**
+		 * Load form results
+		 */
+		async function loadFormResults(): Promise<void> {
+			loadingResults.value = true
+			logger.debug(`Loading responses for form ${props.form.hash}`)
 
 			try {
 				let response = null
-				if (this.isSummaryView) {
+				if (isSummaryView.value) {
 					response = await axios.get(
 						generateOcsUrl('apps/forms/api/v3/forms/{id}/submissions', {
-							id: this.form.id,
+							id: props.form.id,
 						}),
 					)
 				} else {
@@ -702,34 +631,41 @@ export default defineComponent({
 						generateOcsUrl(
 							'apps/forms/api/v3/forms/{id}/submissions?limit={limit}&offset={offset}&query={query}',
 							{
-								id: this.form.id,
-								limit: this.limit,
-								offset: this.offset,
-								query: this.submissionSearch,
+								id: props.form.id,
+								limit: limit.value,
+								offset: offset.value,
+								query: submissionSearch.value,
 							},
 						),
 					)
 				}
 				const data = OcsResponse2Data<ResultsResponse>(response)
 
-				this.submissions = this.formatDateAnswers(
+				submissions.value = formatDateAnswers(
 					data.submissions,
 					data.questions,
 				)
-				this.questions = data.questions
-				this.filteredSubmissionsCount = data.filteredSubmissionsCount
+				questions.value = data.questions
+				filteredSubmissionsCount.value = data.filteredSubmissionsCount
 			} catch (error) {
 				logger.error('Error while loading responses', { error })
 				showError(t('forms', 'An error occurred while loading responses'))
 			} finally {
-				this.loadingResults = false
+				loadingResults.value = false
 			}
-		},
+		}
 
-		async onDownloadFile(nextFileFormat: SupportedFileFormat): Promise<void> {
+		/**
+		 * Download the results file
+		 *
+		 * @param nextFileFormat the file format
+		 */
+		async function onDownloadFile(
+			nextFileFormat: SupportedFileFormat,
+		): Promise<void> {
 			const exportUrl =
 				generateOcsUrl('apps/forms/api/v3/forms/{id}/submissions', {
-					id: this.form.id,
+					id: props.form.id,
 				})
 				+ '?requesttoken='
 				+ encodeURIComponent(getRequestToken() ?? '')
@@ -737,15 +673,18 @@ export default defineComponent({
 				+ nextFileFormat
 
 			window.open(exportUrl, '_self')
-		},
+		}
 
-		async onLinkFile(): Promise<void> {
+		/**
+		 * Link a file for exporting submissions
+		 */
+		async function onLinkFile(): Promise<void> {
 			try {
-				const path = await this.getPicker().pick()
+				const path = await getPicker().pick()
 				try {
 					await axios.patch(
 						generateOcsUrl('apps/forms/api/v3/forms/{id}', {
-							id: this.form.id,
+							id: props.form.id,
 						}),
 						{
 							keyValuePairs: {
@@ -754,15 +693,15 @@ export default defineComponent({
 							},
 						},
 					)
-					await this.fetchFullForm(this.form.id)
-					await this.loadFormResults()
+					await viewForm.fetchFullForm(props.form.id)
+					await loadFormResults()
 
 					showSuccess(
 						t('forms', 'File {file} successfully linked', {
-							file: this.form.filePath?.split('/').pop() ?? '',
+							file: props.form.filePath?.split('/').pop() ?? '',
 						}),
 					)
-					emit('forms:last-updated:set', this.form.id)
+					emitEvent('forms:last-updated:set', props.form.id)
 				} catch (error) {
 					logger.error('Error while exporting to Files and linking', {
 						error,
@@ -774,17 +713,20 @@ export default defineComponent({
 			} catch (error) {
 				logger.debug('No file selected', { error })
 			}
-		},
+		}
 
-		async onStoreToFiles(): Promise<void> {
+		/**
+		 * Store results to files
+		 */
+		async function onStoreToFiles(): Promise<void> {
 			try {
-				const path = await this.getPicker().pick()
+				const path = await getPicker().pick()
 				try {
 					const response = await axios.post(
 						generateOcsUrl(
 							'apps/forms/api/v3/forms/{id}/submissions/export',
 							{
-								id: this.form.id,
+								id: props.form.id,
 							},
 						),
 						{
@@ -807,10 +749,13 @@ export default defineComponent({
 			} catch (error) {
 				logger.debug('No file selected', { error })
 			}
-		},
+		}
 
-		async onReExport(): Promise<void> {
-			if (!this.form.fileId) {
+		/**
+		 * Re-export the results
+		 */
+		async function onReExport(): Promise<void> {
+			if (!props.form.fileId) {
 				showError(t('forms', 'File is not linked'))
 				return
 			}
@@ -820,12 +765,12 @@ export default defineComponent({
 					generateOcsUrl(
 						'apps/forms/api/v3/forms/{id}/submissions/export',
 						{
-							id: this.form.id,
+							id: props.form.id,
 						},
 					),
 					{
-						path: this.form.filePath,
-						fileFormat: this.form.fileFormat,
+						path: props.form.filePath,
+						fileFormat: props.form.fileFormat,
 					},
 				)
 
@@ -838,16 +783,21 @@ export default defineComponent({
 				logger.error('Error while exporting to Files', { error })
 				showError(t('forms', 'There was an error, while exporting to Files'))
 			}
-		},
+		}
 
-		canDeleteSubmission(submissionUser: string): boolean {
+		/**
+		 * If user can delete a submission
+		 *
+		 * @param submissionUser the user who submitted the response
+		 */
+		function canDeleteSubmission(submissionUser: string): boolean {
 			const currentUser = getCurrentUser()
 			return (
-				this.canDeleteSubmissions
-				|| (this.form.allowEditSubmissions
+				canDeleteSubmissions.value
+				|| (props.form.allowEditSubmissions
 					&& currentUser?.uid === submissionUser)
 			)
-		},
+		}
 
 		/**
 		 * Determines if a submission can be edited.
@@ -858,77 +808,99 @@ export default defineComponent({
 		 *                      - The user has the `canDeleteSubmissions` permission, or
 		 *                      - The form allows editing (`form.allowEditSubmissions`) and the current user is the owner of the submission.
 		 */
-		canEditSubmission(submissionUser: string): boolean {
+		function canEditSubmission(submissionUser: string): boolean {
 			const currentUser = getCurrentUser()
 			return (
-				this.canDeleteSubmissions
-				|| (this.form.allowEditSubmissions
+				canDeleteSubmissions.value
+				|| (props.form.allowEditSubmissions
 					&& currentUser?.uid === submissionUser)
 			)
-		},
+		}
 
-		async deleteSubmission(id: number): Promise<void> {
-			this.loadingResults = true
+		/**
+		 * Delete the submission
+		 *
+		 * @param id the id of the submission
+		 */
+		async function deleteSubmission(id: number): Promise<void> {
+			loadingResults.value = true
 
 			try {
 				await axios.delete(
 					generateOcsUrl(
 						'apps/forms/api/v3/forms/{id}/submissions/{submissionId}',
 						{
-							id: this.form.id,
+							id: props.form.id,
 							submissionId: id,
 						},
 					),
 				)
 
 				showSuccess(t('forms', 'Response deleted'))
-				const index = this.submissions.findIndex(
+				const index = submissions.value.findIndex(
 					(search: SubmissionRecord) => search.id === id,
 				)
-				this.submissions.splice(index, 1)
-				emit('forms:last-updated:set', this.form.id)
+				if (index >= 0) {
+					submissions.value.splice(index, 1)
+				}
+				emitEvent('forms:last-updated:set', props.form.id)
 			} catch (error) {
 				logger.error(`Error while deleting response ${id}`, { error })
 				showError(
 					t('forms', 'An error occurred while deleting this response'),
 				)
 			} finally {
-				this.loadingResults = false
+				loadingResults.value = false
 			}
-		},
+		}
 
-		deleteAllSubmissions(): void {
-			this.showConfirmDeleteDialog = true
-		},
+		/**
+		 * Show confirmation dialog for deletion
+		 */
+		function deleteAllSubmissions(): void {
+			showConfirmDeleteDialog.value = true
+		}
 
-		closeDeleteConfirmation(): void {
-			this.showConfirmDeleteDialog = false
-		},
+		/**
+		 * Close the confirmation dialog for deletion
+		 */
+		function closeDeleteConfirmation(): void {
+			showConfirmDeleteDialog.value = false
+		}
 
-		async deleteAllSubmissionsConfirmed(): Promise<void> {
-			this.showConfirmDeleteDialog = false
-			this.loadingResults = true
+		/**
+		 * Deletion confirmed, delete all submissions
+		 */
+		async function deleteAllSubmissionsConfirmed(): Promise<void> {
+			showConfirmDeleteDialog.value = false
+			loadingResults.value = true
 
 			try {
 				await axios.delete(
 					generateOcsUrl('apps/forms/api/v3/forms/{id}/submissions', {
-						id: this.form.id,
+						id: props.form.id,
 					}),
 				)
 
-				this.submissions = []
-				const updatedForm = { ...this.form, submissionCount: 0 }
-				this.$emit('update:form', updatedForm)
-				emit('forms:last-updated:set', this.form.id)
+				submissions.value = []
+				const updatedForm = { ...props.form, submissionCount: 0 }
+				emit('update:form', updatedForm)
+				emitEvent('forms:last-updated:set', props.form.id)
 			} catch (error) {
 				logger.error('Error while deleting responses', { error })
 				showError(t('forms', 'An error occurred while deleting responses'))
 			} finally {
-				this.loadingResults = false
+				loadingResults.value = false
 			}
-		},
+		}
 
-		formatDateAnswers(
+		/**
+		 * Format date answers
+		 *
+		 * @param submissions array of responses
+		 * @param questions array of questions
+		 */
+		function formatDateAnswers(
 			submissions: SubmissionRecord[],
 			questions: FormsQuestion[],
 		): SubmissionRecord[] {
@@ -958,14 +930,17 @@ export default defineComponent({
 			})
 
 			return submissions
-		},
+		}
 
-		getPicker(): PickerLike {
-			if (this.picker !== null) {
-				return this.picker
+		/**
+		 * Get a file picker
+		 */
+		function getPicker(): PickerLike {
+			if (picker.value !== null) {
+				return picker.value
 			}
 
-			this.picker = getFilePickerBuilder(
+			picker.value = getFilePickerBuilder(
 				t('forms', 'Choose spreadsheet location'),
 			)
 				.setMultiSelect(false)
@@ -1035,8 +1010,117 @@ export default defineComponent({
 				})
 				.build() as PickerLike
 
-			return this.picker
-		},
+			return picker.value
+		}
+
+		watch(
+			() => props.hash,
+			async () => {
+				await viewForm.fetchFullForm(props.form.id)
+				await loadFormResults()
+				SetWindowTitle(viewForm.formTitle.value)
+			},
+		)
+
+		watch(
+			() => route.name,
+			() => {
+				const viewId = isSummaryView.value ? 'summary' : 'responses'
+				saveActiveResponseViewToLocalStorage(viewId)
+				void loadFormResults()
+			},
+		)
+
+		watch(limit, () => {
+			void loadFormResults()
+		})
+
+		watch(offset, () => {
+			if (!skipReloadOnOffsetChange.value) {
+				void loadFormResults()
+			}
+		})
+
+		watch(
+			submissionSearch,
+			debounce(() => {
+				skipReloadOnOffsetChange.value = true
+				offset.value = 0
+				nextTick(() => {
+					skipReloadOnOffsetChange.value = false
+				})
+				void loadFormResults()
+			}, INPUT_DEBOUNCE_MS),
+		)
+
+		onBeforeMount(async (): Promise<void> => {
+			// Determine the initial viewId based on the route
+			const viewId = isSummaryView.value ? 'summary' : 'responses'
+			saveActiveResponseViewToLocalStorage(viewId)
+
+			await viewForm.fetchFullForm(props.form.id)
+			await loadFormResults()
+			SetWindowTitle(viewForm.formTitle.value)
+		})
+
+		return {
+			...viewForm,
+			isMobile,
+			t,
+			responseViews,
+			questions,
+			submissions,
+			filteredSubmissionsCount,
+			isDownloadActionOpened,
+			loadingResults,
+			skipReloadOnOffsetChange,
+			showConfirmDeleteDialog,
+			submissionSearch,
+			limit,
+			offset,
+			linkedFileNotAvailableButtons,
+			confirmDeleteButtons,
+			isSummaryView,
+			activeResponseView,
+			isFormArchived,
+			canExportSubmissions,
+			canDeleteSubmissions,
+			canEditForm,
+			noSubmissions,
+			noFilteredSubmissions,
+			fileUrl,
+			showLinkedFileNotAvailableDialog,
+			saveActiveResponseViewToLocalStorage,
+			getActiveResponseViewStorageKey,
+			onViewChange,
+			onUnlinkFile,
+			loadFormResults,
+			onDownloadFile,
+			onLinkFile,
+			onStoreToFiles,
+			onReExport,
+			canDeleteSubmission,
+			canEditSubmission,
+			deleteSubmission,
+			deleteAllSubmissions,
+			closeDeleteConfirmation,
+			deleteAllSubmissionsConfirmed,
+			formatDateAnswers,
+			getPicker,
+			IconChevronLeft,
+			IconDelete,
+			IconDownload,
+			IconFileDelimited,
+			IconFileExcelOutline,
+			IconFolder,
+			IconLink,
+			IconLinkVariantOff,
+			IconPoll,
+			IconRefresh,
+			IconShareVariant,
+			IconTable,
+			IconMagnify,
+		}
 	},
 })
 </script>
diff --git a/src/views/Sidebar.vue b/src/views/Sidebar.vue
index 6ef7f0218..0d6df054e 100644
--- a/src/views/Sidebar.vue
+++ b/src/views/Sidebar.vue
@@ -58,16 +58,17 @@
 </template>
 
 <script lang="ts">
-import type { FormsShare } from '../models/Entities.d.ts'
+import type { FormsForm, FormsShare } from '../models/Entities.d.ts'
 
 import IconComment from '@material-symbols/svg-400/outlined/comment.svg?raw'
 import IconSettings from '@material-symbols/svg-400/outlined/settings.svg?raw'
 import IconShareVariant from '@material-symbols/svg-400/outlined/share.svg?raw'
 import { getCurrentUser } from '@nextcloud/auth'
-import { emit } from '@nextcloud/event-bus'
+import { emit as emitEvent } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { defineComponent } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import NcAppSidebar from '@nextcloud/vue/components/NcAppSidebar'
 import NcAppSidebarTab from '@nextcloud/vue/components/NcAppSidebarTab'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
@@ -117,151 +118,72 @@ export default defineComponent({
 
 	setup(props, { emit }) {
 		const viewForm = useViewForm({ form: () => props.form, emit })
-
-		return {
-			...viewForm,
-			t,
-			IconComment,
-			IconSettings,
-			IconShareVariant,
-		}
-	},
-
-	data() {
-		return {
-			commentsView: null as CommentsViewLike | null,
-			localShares: [...this.form.shares] as FormsShare[],
-			localFormOverrides: {} as Record<string, unknown>,
-		}
-	},
-
-	computed: {
-		canEdit(): boolean {
-			return this.form?.permissions?.includes(PERMISSION_TYPES.PERMISSION_EDIT)
-		},
-
-		sidebarForm(): Record<string, unknown> {
-			return {
-				...this.form,
-				...this.localFormOverrides,
-				shares: this.localShares,
-			}
-		},
-
-		sidebarAllowComments(): boolean {
-			return Boolean(this.sidebarForm.allowComments)
-		},
-
-		isSidebarLocked(): boolean {
-			const lockedUntil = this.sidebarForm.lockedUntil
-			const lockedBy = this.sidebarForm.lockedBy
+		const commentsEl = ref<Element | null>(null)
+		const commentsView = ref<CommentsViewLike | null>(null)
+		const localShares = ref<FormsShare[]>([
+			...(props.form as unknown as FormsForm).shares,
+		])
+		const localFormOverrides = ref<Record<string, unknown>>({})
+
+		const canEdit = computed<boolean>(() =>
+			(props.form as unknown as FormsForm)?.permissions?.includes(
+				PERMISSION_TYPES.PERMISSION_EDIT,
+			),
+		)
+
+		const sidebarForm = computed<Record<string, unknown>>(() => ({
+			...props.form,
+			...localFormOverrides.value,
+			shares: localShares.value,
+		}))
+
+		const sidebarAllowComments = computed<boolean>(() =>
+			Boolean(sidebarForm.value.allowComments),
+		)
+
+		const isSidebarLocked = computed<boolean>(() => {
+			const lockedUntil = sidebarForm.value.lockedUntil
+			const lockedBy = sidebarForm.value.lockedBy
 			return (
 				lockedUntil === 0
 				|| (Number(lockedUntil || 0) > moment().unix()
-					&& lockedBy !== getCurrentUser().uid)
+					&& lockedBy !== getCurrentUser()?.uid)
 			)
-		},
+		})
 
-		lockedUntilFormatted(): string {
-			const lockedUntil = this.sidebarForm.lockedUntil
+		const lockedUntilFormatted = computed<string>(() => {
+			const lockedUntil = sidebarForm.value.lockedUntil
 			if (lockedUntil === 0 || lockedUntil === null) {
 				return ''
 			}
 			return moment(lockedUntil, 'X').locale(window.OC.getLanguage()).fromNow()
-		},
-
-		sidebarTitle(): string {
-			if (this.active === 'forms-comments') {
-				return t('forms', 'Form comments')
-			} else {
-				return t('forms', 'Form settings')
-			}
-		},
-	},
-
-	watch: {
-		form: function (nextForm: Record<string, unknown>) {
-			const nextOverrides = Object.fromEntries(
-				Object.entries(this.localFormOverrides).filter(
-					([key, value]) => nextForm[key] !== value,
-				),
-			)
-			this.localFormOverrides = nextOverrides
-		},
-
-		'form.shares': function (shares: FormsShare[]) {
-			this.localShares = [...shares]
-		},
-
-		'form.id': function (newId: number) {
-			this.localShares = [...this.form.shares]
-			this.localFormOverrides = {}
-
-			// Only update comments when the Comments tab is active
-			if (this.active !== 'forms-comments') {
-				return
-			}
-
-			// Only update comments when commentsView is instantiated, else setup commentsView
-			if (this.commentsView) {
-				this.commentsView.update(newId)
-			} else {
-				this.setupComments()
-			}
-		},
-
-		active(newVal: string) {
-			if (newVal === 'forms-comments') {
-				this.setupComments()
-			} else {
-				this.teardownComments()
-			}
-		},
-	},
-
-	mounted() {
-		this.$nextTick(() => {
-			if (this.active === 'forms-comments') {
-				this.setupComments()
-			}
-
-			// If the user cannot edit, prefer the comments tab when available
-			// Use the mounted comments element as the availability check rather than
-			// consulting `form.allowComments` (the tab is rendered with v-if).
-			if (
-				!this.canEdit
-				&& this.$refs.commentsEl
-				&& this.active !== 'forms-comments'
-			) {
-				this.onUpdateActive('forms-comments')
-			}
 		})
-	},
 
-	beforeUnmount() {
-		this.teardownComments()
-	},
+		const sidebarTitle = computed<string>(() =>
+			props.active === 'forms-comments'
+				? t('forms', 'Form comments')
+				: t('forms', 'Form settings'),
+		)
 
-	methods: {
-		onUpdateActive(active: string): void {
-			this.$emit('update:active', active)
-		},
+		const onUpdateActive = (active: string): void => {
+			emit('update:active', active)
+		}
 
 		// Mount or update the Comments view inside the sidebar
-		async setupComments(): Promise<void> {
+		const setupComments = async (): Promise<void> => {
 			// comments disabled for this form
-			if (!this.sidebarForm.allowComments) {
+			if (!sidebarForm.value.allowComments) {
 				return
 			}
 
 			// comments element missing
-			const el = this.$refs.commentsEl as Element | undefined
+			const el = commentsEl.value
 			if (!el) {
 				logger.debug('setupComments: no comments element found')
 				return
 			}
 
-			if (!this.commentsView) {
+			if (!commentsView.value) {
 				const commentsCtor = (
 					window as unknown as {
 						OCA?: {
@@ -280,17 +202,17 @@ export default defineComponent({
 					return
 				}
 
-				this.commentsView = new commentsCtor('forms', {
-					propsData: { resourceId: this.sidebarForm.id },
+				commentsView.value = new commentsCtor('forms', {
+					propsData: { resourceId: sidebarForm.value.id as number },
 				})
 			}
-			await this.commentsView.update(this.sidebarForm.id)
-			this.commentsView.$mount(el)
-		},
+			await commentsView.value.update(sidebarForm.value.id as number)
+			commentsView.value.$mount(el)
+		}
 
-		teardownComments(): void {
-			this.commentsView = null
-		},
+		const teardownComments = (): void => {
+			commentsView.value = null
+		}
 
 		/**
 		 * Save Form-Properties
@@ -298,55 +220,146 @@ export default defineComponent({
 		 * @param property The Name of the Property to update
 		 * @param newVal The new Property value
 		 */
-		onPropertyChange(property: string, newVal: unknown): void {
-			this.localFormOverrides = {
-				...this.localFormOverrides,
+		const onPropertyChange = (property: string, newVal: unknown): void => {
+			localFormOverrides.value = {
+				...localFormOverrides.value,
 				[property]: newVal,
 			}
 
-			this.$emit('update:form', {
-				...this.form,
-				...this.localFormOverrides,
-				shares: this.localShares,
+			emit('update:form', {
+				...props.form,
+				...localFormOverrides.value,
+				shares: localShares.value,
 			})
 
-			this.saveFormPropertyValue(property, newVal)
-		},
+			void viewForm.saveFormPropertyValue(property, newVal)
+		}
 
 		/**
 		 * Adding/Removing Share from the reactive object. API-Request is done in sharing-tab.
 		 *
 		 * @param share The respective share object
 		 */
-		onAddShare(share: FormsShare): void {
-			const newShares = [...this.localShares, share]
-			this.localShares = newShares
-			this.$emit('update:form', { ...this.form, shares: newShares })
-			emit('forms:last-updated:set', this.form.id)
-		},
+		const onAddShare = (share: FormsShare): void => {
+			const newShares = [...localShares.value, share]
+			localShares.value = newShares
+			emit('update:form', { ...props.form, shares: newShares })
+			emitEvent('forms:last-updated:set', props.form.id)
+		}
 
-		onRemoveShare(share: ShareWithId): void {
-			const newShares = this.localShares.filter(
+		const onRemoveShare = (share: ShareWithId): void => {
+			const newShares = localShares.value.filter(
 				(search): boolean =>
 					!('id' in (search as unknown as Record<string, unknown>))
 					|| (search as ShareWithId).id !== share.id,
 			)
-			this.localShares = newShares
-			this.$emit('update:form', { ...this.form, shares: newShares })
-			emit('forms:last-updated:set', this.form.id)
-		},
+			localShares.value = newShares
+			emit('update:form', { ...props.form, shares: newShares })
+			emitEvent('forms:last-updated:set', props.form.id)
+		}
 
-		onUpdateShare(share: ShareWithId): void {
-			const newShares = this.localShares.map((s) =>
-				'id' in (s as unknown as Record<string, unknown>)
-				&& (s as ShareWithId).id === share.id
+		const onUpdateShare = (share: ShareWithId): void => {
+			const newShares = localShares.value.map((currentShare) =>
+				'id' in (currentShare as unknown as Record<string, unknown>)
+				&& (currentShare as ShareWithId).id === share.id
 					? share
-					: s,
+					: currentShare,
 			)
-			this.localShares = newShares
-			this.$emit('update:form', { ...this.form, shares: newShares })
-			emit('forms:last-updated:set', this.form.id)
-		},
+			localShares.value = newShares
+			emit('update:form', { ...props.form, shares: newShares })
+			emitEvent('forms:last-updated:set', props.form.id)
+		}
+
+		watch(
+			() => props.form,
+			(nextForm) => {
+				const nextOverrides = Object.fromEntries(
+					Object.entries(localFormOverrides.value).filter(
+						([key, value]) => nextForm[key] !== value,
+					),
+				)
+				localFormOverrides.value = nextOverrides
+			},
+		)
+
+		watch(
+			() => (props.form as unknown as FormsForm).shares,
+			(shares) => {
+				localShares.value = [...shares]
+			},
+		)
+
+		watch(
+			() => (props.form as unknown as FormsForm).id,
+			(newId) => {
+				localShares.value = [...(props.form as unknown as FormsForm).shares]
+				localFormOverrides.value = {}
+
+				// Only update comments when the Comments tab is active
+				if (props.active !== 'forms-comments') {
+					return
+				}
+
+				// Only update comments when commentsView is instantiated, else setup commentsView
+				if (commentsView.value) {
+					void commentsView.value.update(newId)
+				} else {
+					void setupComments()
+				}
+			},
+		)
+
+		watch(
+			() => props.active,
+			(active) => {
+				if (active === 'forms-comments') {
+					void setupComments()
+				} else {
+					teardownComments()
+				}
+			},
+		)
+
+		onMounted(() => {
+			void nextTick(() => {
+				if (props.active === 'forms-comments') {
+					void setupComments()
+				}
+
+				// If the user cannot edit, prefer the comments tab when available
+				// Use the mounted comments element as the availability check rather than
+				// consulting `form.allowComments` (the tab is rendered with v-if).
+				if (
+					!canEdit.value
+					&& commentsEl.value
+					&& props.active !== 'forms-comments'
+				) {
+					onUpdateActive('forms-comments')
+				}
+			})
+		})
+
+		onUnmounted(teardownComments)
+
+		return {
+			...viewForm,
+			t,
+			IconComment,
+			IconSettings,
+			IconShareVariant,
+			commentsEl,
+			canEdit,
+			sidebarForm,
+			sidebarAllowComments,
+			isSidebarLocked,
+			lockedUntilFormatted,
+			sidebarTitle,
+			onUpdateActive,
+			onPropertyChange,
+			onAddShare,
+			onRemoveShare,
+			onUpdateShare,
+		}
 	},
 })
 </script>
diff --git a/src/views/Submit.vue b/src/views/Submit.vue
index e5b3f60a0..3478d892b 100644
--- a/src/views/Submit.vue
+++ b/src/views/Submit.vue
@@ -126,12 +126,12 @@
 			</NcEmptyContent>
 
 			<!-- Questions list -->
-			<form v-else ref="form" @submit.prevent="onSubmit">
+			<form v-else ref="formElement" @submit.prevent="onSubmit">
 				<ul>
 					<component
 						:is="answerTypes[question.type].component"
 						v-for="(question, index) in validQuestions"
-						ref="questions"
+						ref="questionRefs"
 						:key="question.id"
 						v-bind="question"
 						readOnly
@@ -227,13 +227,14 @@ import IconRefresh from '@material-symbols/svg-400/outlined/refresh.svg?raw'
 import IconSend from '@material-symbols/svg-400/outlined/send.svg?raw'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
+import { emit as emitEvent } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
-import { ref } from 'vue'
+import { computed, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue'
 import { defineComponent } from 'vue'
+import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute } from 'vue-router'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
@@ -333,28 +334,6 @@ export default defineComponent({
 		TopBar,
 	},
 
-	async beforeRouteUpdate() {
-		// This navigation guard is called when the route parameters changed (e.g. form hash)
-		// continue with the navigation if there are no changes or the user confirms to leave the form
-		if (await this.confirmLeaveForm()) {
-			return
-		} else {
-			// Otherwise cancel the navigation
-			return false
-		}
-	},
-
-	async beforeRouteLeave() {
-		// This navigation guard is called when the route changed and a new view should be shown
-		// continue with the navigation if there are no changes or the user confirms to leave the form
-		if (await this.confirmLeaveForm()) {
-			return
-		} else {
-			// Otherwise cancel the navigation
-			return false
-		}
-	},
-
 	props: {
 		isLoggedIn: {
 			type: Boolean,
@@ -391,48 +370,31 @@ export default defineComponent({
 	emits: ['update:form', 'open-sharing'],
 
 	setup(props, { emit }) {
+		const route = useRoute()
 		const title = ref(null)
+		const formElement = ref<HTMLFormElement | null>(null)
+		const questionRefs = ref<
+			QuestionComponentRef[] | QuestionComponentRef | null
+		>(null)
 		const viewForm = useViewForm({
 			form: () => props.form,
 			emit,
 			titleRef: title,
 		})
 
-		// Non reactive properties
-		return {
-			...viewForm,
-			title,
-			IconCheckSvg: IconCheck,
-			IconRefreshSvg: IconRefresh,
-			IconSendSvg: IconSend,
-			t,
-
-			maxStringLengths: loadState(formsAppName, 'maxStringLengths') as Record<
-				string,
-				number
-			>,
-		}
-	},
-
-	data() {
-		return {
-			answerTypes,
-			answers: {} as AnswersMap,
-			loading: false as boolean,
-			success: false as boolean,
-			successAnnouncement: '' as string,
-			submitForm: false as boolean,
-			showConfirmEmptyModal: false as boolean,
-			showConfirmLeaveDialog: false as boolean,
-			showClearFormDialog: false as boolean,
-			showClearFormDueToChangeDialog: false as boolean,
-			confirmButtonCallback: () => {},
-		}
-	},
-
-	computed: {
-		validQuestions(): SubmitQuestion[] {
-			return this.form.questions.filter((question) => {
+		const answers = ref<AnswersMap>({})
+		const loading = ref(false)
+		const success = ref(false)
+		const successAnnouncement = ref('')
+		const submitForm = ref(false)
+		const showConfirmEmptyModal = ref(false)
+		const showConfirmLeaveDialog = ref(false)
+		const showClearFormDialog = ref(false)
+		const showClearFormDueToChangeDialog = ref(false)
+		const confirmButtonCallback = ref<(val: boolean) => void>(() => {})
+
+		const validQuestions = computed<SubmitQuestion[]>(() => {
+			return props.form.questions.filter((question) => {
 				// All questions must have a valid title
 				if (question.text?.trim() === '') {
 					return false
@@ -445,90 +407,90 @@ export default defineComponent({
 				}
 				return true
 			}) as SubmitQuestion[]
-		},
+		})
 
-		validQuestionsIds(): Set<number> {
-			return new Set(this.validQuestions.map((question) => question.id))
-		},
+		const validQuestionsIds = computed<Set<number>>(() => {
+			return new Set(validQuestions.value.map((question) => question.id))
+		})
 
-		isRequiredUsed(): boolean {
-			return this.form.questions.some((question) =>
+		const isRequiredUsed = computed<boolean>(() => {
+			return props.form.questions.some((question) =>
 				Boolean(question.isRequired),
 			)
-		},
+		})
 
 		/**
 		 * Check if form is expired
 		 */
-		isExpired(): boolean {
-			return this.form.expires > 0 && moment().unix() > this.form.expires
-		},
+		const isExpired = computed<boolean>(() => {
+			return props.form.expires > 0 && moment().unix() > props.form.expires
+		})
 
-		isArchived(): boolean {
-			return this.form.state === FormState.FormArchived
-		},
+		const isArchived = computed<boolean>(() => {
+			return props.form.state === FormState.FormArchived
+		})
 
-		isClosed(): boolean {
-			return this.form.state === FormState.FormClosed
-		},
+		const isClosed = computed<boolean>(() => {
+			return props.form.state === FormState.FormClosed
+		})
 
-		isMaxSubmissionsReached(): boolean {
-			return this.form.isMaxSubmissionsReached === true
-		},
+		const isMaxSubmissionsReached = computed<boolean>(() => {
+			return props.form.isMaxSubmissionsReached === true
+		})
 
 		/**
 		 * Checks if the current state is active.
 		 *
 		 * @return - Returns true if active, otherwise false.
 		 */
-		isActive(): boolean {
-			return !this.isArchived && !this.isClosed && !this.isExpired
-		},
+		const isActive = computed<boolean>(() => {
+			return !isArchived.value && !isClosed.value && !isExpired.value
+		})
 
-		infoMessage(): string {
+		const infoMessage = computed<string>(() => {
 			let message = ''
-			if (this.form.isAnonymous) {
+			if (props.form.isAnonymous) {
 				message += t('forms', 'Responses are anonymous.')
 			}
-			if (!this.form.isAnonymous && this.isLoggedIn) {
+			if (!props.form.isAnonymous && props.isLoggedIn) {
 				message += t('forms', 'Responses are connected to your account.')
 			}
-			if (this.isRequiredUsed) {
+			if (isRequiredUsed.value) {
 				message +=
 					' '
 					+ t('forms', 'An asterisk (*) indicates mandatory questions.')
 			}
 
 			return message
-		},
+		})
 
 		/**
 		 * Rendered HTML of the custom submission message
 		 */
-		submissionMessageHTML(): string {
+		const submissionMessageHTML = computed<string>(() => {
 			if (
-				this.form.submissionMessage
-				&& (this.success || !this.form.canSubmit)
+				props.form.submissionMessage
+				&& (success.value || !props.form.canSubmit)
 			) {
-				return this.markdownit.render(this.form.submissionMessage)
+				return viewForm.markdownit.render(props.form.submissionMessage)
 			}
 			return ''
-		},
+		})
 
-		expirationMessage(): string {
-			const relativeDate = moment(this.form.expires, 'X')
+		const expirationMessage = computed<string>(() => {
+			const relativeDate = moment(props.form.expires, 'X')
 				.locale(window.OC.getLanguage())
 				.fromNow()
-			if (this.isExpired) {
+			if (isExpired.value) {
 				return t('forms', 'Expired {relativeDate}.', { relativeDate })
 			}
 			return t('forms', 'Expires {relativeDate}.', { relativeDate })
-		},
+		})
 
 		/**
 		 * Buttons for the "confirm submit empty form" dialog
 		 */
-		confirmEmptyModalButtons(): DialogButton[] {
+		const confirmEmptyModalButtons = computed<DialogButton[]>(() => {
 			return [
 				{
 					label: t('forms', 'Abort'),
@@ -539,34 +501,36 @@ export default defineComponent({
 					label: t('forms', 'Submit'),
 					icon: IconCheck,
 					variant: 'primary',
-					callback: () => this.onConfirmedSubmit(),
+					callback: () => {
+						void onConfirmedSubmit()
+					},
 				},
 			]
-		},
+		})
 
 		/**
 		 * Buttons for the "confirm leave unsubmitted form" dialog
 		 */
-		confirmLeaveFormButtons(): DialogButton[] {
+		const confirmLeaveFormButtons = computed<DialogButton[]>(() => {
 			return [
 				{
 					label: t('forms', 'Abort'),
 					icon: IconCancel,
-					callback: () => this.confirmButtonCallback(false),
+					callback: () => confirmButtonCallback.value(false),
 				},
 				{
 					label: t('forms', 'Leave'),
 					icon: IconCheck,
 					variant: 'primary',
-					callback: () => this.confirmButtonCallback(true),
+					callback: () => confirmButtonCallback.value(true),
 				},
 			]
-		},
+		})
 
 		/**
 		 * Buttons for the "confirm clear form" dialog
 		 */
-		confirmClearFormButtons(): DialogButton[] {
+		const confirmClearFormButtons = computed<DialogButton[]>(() => {
 			return [
 				{
 					label: t('forms', 'Abort'),
@@ -577,181 +541,123 @@ export default defineComponent({
 					label: t('forms', 'Clear'),
 					icon: IconCheck,
 					variant: 'primary',
-					callback: () => this.onResetSubmission(),
+					callback: () => onResetSubmission(),
 				},
 			]
-		},
+		})
 
-		hasAnswers(): boolean {
-			return Object.keys(this.answers).length > 0
-		},
+		const hasAnswers = computed<boolean>(() => {
+			return Object.keys(answers.value).length > 0
+		})
 
-		submissionId(): number | null {
+		const submissionId = computed<number | null>(() => {
+			const routeSubmissionId = Array.isArray(route.params.submissionId)
+				? route.params.submissionId[0]
+				: route.params.submissionId
 			const id =
-				this.$route?.params.submissionId
-				|| loadState(formsAppName, 'submissionId', null)
+				routeSubmissionId || loadState(formsAppName, 'submissionId', null)
 			return id ? parseInt(String(id), 10) : null
-		},
-	},
-
-	watch: {
-		success(newVal: boolean): void {
-			if (newVal) {
-				// Delay populating the live region to avoid the announcement being
-				// swallowed by the simultaneous large DOM change (form replaced by
-				// success view). Screen readers need a moment to process the new DOM
-				// before a polite live region update registers.
-				setTimeout(() => {
-					this.successAnnouncement =
-						this.form.submissionMessage
-						|| t('forms', 'Thank you for completing the form!')
-				}, 100)
-			} else {
-				this.successAnnouncement = ''
-			}
-		},
-
-		hash(): void {
-			// If public view, abort. Should normally not occur.
-			if (this.publicView) {
-				logger.error('Hash changed on public view. Aborting.')
-				return
-			}
-			this.resetData()
-			// Fetch full form on change
-			this.fetchFullForm(this.form.id)
-			this.initFromLocalStorage()
-			SetWindowTitle(this.formTitle)
-		},
-	},
-
-	beforeUnmount(): void {
-		window.removeEventListener('beforeunload', this.beforeWindowUnload)
-	},
-
-	created(): void {
-		window.addEventListener('beforeunload', this.beforeWindowUnload)
-	},
-
-	async beforeMount(): Promise<void> {
-		// Public Views get their form by initial-state from parent. No fetch necessary.
-		if (this.publicView) {
-			this.isLoadingForm = false
-		} else {
-			await this.fetchFullForm(this.form.id)
-		}
-
-		if (this.isLoggedIn) {
-			if (
-				this.submissionId
-				&& (this.form.allowEditSubmissions
-					|| this.form.permissions.includes(
-						PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
-					))
-			) {
-				this.fetchSubmission()
-			} else {
-				this.initFromLocalStorage()
-			}
-		}
-
-		SetWindowTitle(this.formTitle)
-	},
+		})
 
-	methods: {
 		/**
 		 * Load saved values for current form from LocalStorage
 		 *
 		 * @return
 		 */
-		getFormValuesFromLocalStorage(): StoredAnswersMap | null {
+		function getFormValuesFromLocalStorage(): StoredAnswersMap | null {
 			const fromLocalStorage = localStorage.getItem(
-				`nextcloud_forms_${this.publicView ? this.shareHash : this.hash}`,
+				`nextcloud_forms_${props.publicView ? props.shareHash : props.hash}`,
 			)
 			if (fromLocalStorage) {
 				return JSON.parse(fromLocalStorage)
 			}
 			return null
-		},
+		}
 
 		/**
 		 * Initialize answers from saved state in LocalStorage
 		 */
-		initFromLocalStorage(): void {
-			const savedState = this.getFormValuesFromLocalStorage()
+		function initFromLocalStorage(): void {
+			const savedState = getFormValuesFromLocalStorage()
 			if (!savedState) {
 				return
 			}
 
-			const answers: AnswersMap = {}
+			const localAnswers: AnswersMap = {}
 			for (const [questionId, answer] of Object.entries(savedState)) {
 				// Clean up answers for questions that do not exist anymore
-				if (!this.validQuestionsIds.has(parseInt(questionId, 10))) {
-					this.showClearFormDueToChangeDialog = true
+				if (!validQuestionsIds.value.has(parseInt(questionId, 10))) {
+					showClearFormDueToChangeDialog.value = true
 					logger.debug('Question does not exist anymore', {
 						questionId,
 					})
 					continue
 				}
 
-				answers[parseInt(questionId, 10)] = [
+				localAnswers[parseInt(questionId, 10)] = [
 					'QuestionMultiple',
 					'QuestionRanking',
 				].includes(answer.type)
 					? answer.value.map(String)
 					: answer.value
 			}
-			this.answers = answers
-		},
+			answers.value = localAnswers
+		}
 
 		/**
 		 * Save updated answers for question to LocalStorage in case of browser crash / closes / etc
 		 *
 		 * @param question Question to update
 		 */
-		addFormFieldToLocalStorage(question: SubmitQuestion): void {
-			if (!this.isLoggedIn) {
+		function addFormFieldToLocalStorage(question: SubmitQuestion): void {
+			if (!props.isLoggedIn) {
 				return
 			}
 			// We make sure the values are updated by the `values.sync` handler
 			const state = {
-				...(this.getFormValuesFromLocalStorage() ?? {}),
+				...(getFormValuesFromLocalStorage() ?? {}),
 				[`${question.id}`]: {
-					value: this.answers[question.id],
+					value: answers.value[question.id],
 					type: answerTypes[question.type].component.name,
 				},
 			}
 			const stringified = JSON.stringify(state)
 			localStorage.setItem(
-				`nextcloud_forms_${this.publicView ? this.shareHash : this.hash}`,
+				`nextcloud_forms_${props.publicView ? props.shareHash : props.hash}`,
 				stringified,
 			)
-		},
+		}
 
-		deleteFormFieldFromLocalStorage(): void {
-			if (!this.isLoggedIn) {
+		/**
+		 * Deletes a non-existing field from local storage
+		 */
+		function deleteFormFieldFromLocalStorage(): void {
+			if (!props.isLoggedIn) {
 				return
 			}
 			localStorage.removeItem(
-				`nextcloud_forms_${this.publicView ? this.shareHash : this.hash}`,
+				`nextcloud_forms_${props.publicView ? props.shareHash : props.hash}`,
 			)
-		},
+		}
 
-		async fetchSubmission(): Promise<void> {
-			logger.debug(`Loading response ${this.submissionId}`)
+		/**
+		 * Fetches the submission data for the given id from the server
+		 */
+		async function fetchSubmission(): Promise<void> {
+			logger.debug(`Loading response ${submissionId.value}`)
 
 			try {
 				const response = await axios.get(
 					generateOcsUrl(
 						'apps/forms/api/v3/forms/{id}/submissions/{submissionId}',
 						{
-							id: this.form.id,
-							submissionId: this.submissionId,
+							id: props.form.id,
+							submissionId: submissionId.value,
 						},
 					),
 				)
 
-				const answers: AnswersMap = {}
+				const loaded: AnswersMap = {}
 				const loadedAnswers =
 					OcsResponse2Data<LoadedSubmissionResponse>(response).answers
 				for (const answer of loadedAnswers) {
@@ -759,21 +665,21 @@ export default defineComponent({
 					const text = answer.text
 
 					// Only initialize once, don't overwrite previous answers
-					if (!answers[questionId]) {
-						answers[questionId] = []
+					if (!loaded[questionId]) {
+						loaded[questionId] = []
 					}
 
 					logger.debug(`questionId: ${questionId}, answerId: ${answer.id}`)
 					// Clean up answers for questions that do not exist anymore
-					if (!this.validQuestionsIds.has(questionId)) {
-						this.showClearFormDueToChangeDialog = true
+					if (!validQuestionsIds.value.has(questionId)) {
+						showClearFormDueToChangeDialog.value = true
 						logger.debug('Question does not exist anymore', {
 							questionId,
 						})
 						continue
 					}
 
-					const question = this.form.questions.find(
+					const question = props.form.questions.find(
 						(question) => question.id === questionId,
 					) as SubmitQuestion | undefined
 					if (!question) {
@@ -781,7 +687,7 @@ export default defineComponent({
 					}
 					if (question.type === 'ranking') {
 						try {
-							answers[questionId].push(...JSON.parse(text).map(String))
+							loaded[questionId].push(...JSON.parse(text).map(String))
 						} catch (error) {
 							logger.debug(
 								`Could not parse ranking answer ${text} for question ${questionId}`,
@@ -797,16 +703,16 @@ export default defineComponent({
 							(option) => option.text === text,
 						)
 						if (option.length > 0) {
-							answers[questionId].push(String(option[0].id))
+							loaded[questionId].push(String(option[0].id))
 						} else if (
 							question.extraSettings?.allowOtherAnswer
-							&& !answers[questionId].some((answer) =>
-								String(answer).startsWith(
+							&& !loaded[questionId].some((localAnswer) =>
+								String(localAnswer).startsWith(
 									QUESTION_EXTRASETTINGS_OTHER_PREFIX,
 								),
 							)
 						) {
-							answers[questionId].push(
+							loaded[questionId].push(
 								QUESTION_EXTRASETTINGS_OTHER_PREFIX + text,
 							)
 						} else {
@@ -824,18 +730,18 @@ export default defineComponent({
 							`Skipping file answer for question ${questionId} — cannot restore uploaded files`,
 						)
 					} else {
-						answers[questionId].push(text)
+						loaded[questionId].push(text)
 					}
 				}
 
-				this.answers = answers
+				answers.value = loaded
 			} catch (error) {
 				logger.error('Error while loading response', { error })
 				showError(
 					t('forms', 'There was an error while loading the response'),
 				)
 			}
-		},
+		}
 
 		/**
 		 * Update answers of a give value
@@ -843,14 +749,26 @@ export default defineComponent({
 		 * @param question The question to answer
 		 * @param values The new values
 		 */
-		onUpdate(question: SubmitQuestion, values: AnswerValue): void {
-			this.answers = { ...this.answers, [question.id]: values }
-			this.addFormFieldToLocalStorage(question)
-		},
+		function onUpdate(question: SubmitQuestion, values: unknown[]): void {
+			answers.value = {
+				...answers.value,
+				[question.id]: values as AnswerValue,
+			}
+			addFormFieldToLocalStorage(question)
+		}
 
-		updateQuestionValues(question: SubmitQuestion, values: AnswerValue): void {
-			this.onUpdate(question, values)
-		},
+		/**
+		 * Proxy for update events emitted by question components.
+		 *
+		 * @param question The question being updated.
+		 * @param values The updated question values.
+		 */
+		function updateQuestionValues(
+			question: SubmitQuestion,
+			values: unknown[],
+		): void {
+			onUpdate(question, values)
+		}
 
 		/**
 		 * On Enter, focus next form-element
@@ -858,11 +776,11 @@ export default defineComponent({
 		 *
 		 * @param event The fired event.
 		 */
-		onKeydownEnter(
+		function onKeydownEnter(
 			event: KeyboardEvent & { originalTarget?: EventTarget | null },
 		): void {
 			const formInputs = Array.from(
-				(this.$refs.form as HTMLFormElement).elements,
+				formElement.value?.elements ?? [],
 			) as HTMLElement[]
 			const sourceInputIndex = formInputs.findIndex(
 				(input) => input === (event.originalTarget ?? event.target),
@@ -870,30 +788,35 @@ export default defineComponent({
 
 			// Focus next form element
 			formInputs[sourceInputIndex + 1]?.focus()
-		},
+		}
 
 		/**
 		 * Ctrl+Enter typically fires submit on forms.
 		 * Some inputs do automatically, while some need explicit handling
 		 */
-		onKeydownCtrlEnter(): void {
-			;(this.$refs.form as HTMLFormElement | undefined)?.requestSubmit()
-		},
+		function onKeydownCtrlEnter(): void {
+			formElement.value?.requestSubmit()
+		}
 
 		/*
 		 * Methods for catching unwanted unload events
 		 */
-		beforeWindowUnload(e: BeforeUnloadEvent): void {
+		/**
+		 * Block closing or reloading while there are unsaved answers.
+		 *
+		 * @param e The beforeunload browser event.
+		 */
+		function beforeWindowUnload(e: BeforeUnloadEvent): void {
 			if (
-				this.isActive
-				&& !this.submitForm
-				&& Object.keys(this.answers).length !== 0
+				isActive.value
+				&& !submitForm.value
+				&& Object.keys(answers.value).length !== 0
 			) {
 				// Cancel the window unload event
 				e.preventDefault()
 				e.returnValue = ''
 			}
-		},
+		}
 
 		/**
 		 * Checks if the user is attempting to leave the form under certain conditions
@@ -910,34 +833,32 @@ export default defineComponent({
 		 * @return - Returns a promise that resolves with the value
 		 * passed to the confirm button callback if the dialog is shown, otherwise returns true.
 		 */
-		confirmLeaveForm(): Promise<boolean> | boolean {
+		function confirmLeaveForm(): Promise<boolean> | boolean {
 			if (
-				this.isActive
-				&& !this.submitForm
-				&& Object.keys(this.answers).length !== 0
+				isActive.value
+				&& !submitForm.value
+				&& Object.keys(answers.value).length !== 0
 			) {
-				this.showConfirmLeaveDialog = true
+				showConfirmLeaveDialog.value = true
 				return new Promise((resolve) => {
-					this.confirmButtonCallback = (val: boolean) => {
-						this.showConfirmLeaveDialog = false
+					confirmButtonCallback.value = (val: boolean) => {
+						showConfirmLeaveDialog.value = false
 						resolve(val)
 					}
 				})
 			}
 
 			return true
-		},
+		}
 
 		/**
 		 * Submit the form after the browser validated it 🚀 or show confirmation modal if empty
 		 */
-		async onSubmit(): Promise<void> {
-			const questionRefs = (
-				Array.isArray(this.$refs.questions)
-					? this.$refs.questions
-					: [this.$refs.questions].filter(Boolean)
-			) as QuestionComponentRef[]
-			const validation = questionRefs.map(
+		async function onSubmit(): Promise<void> {
+			const rawQuestionRefs = Array.isArray(questionRefs.value)
+				? questionRefs.value
+				: [questionRefs.value].filter(Boolean)
+			const validation = (rawQuestionRefs as QuestionComponentRef[]).map(
 				async (question) => await question.validate(),
 			)
 
@@ -950,58 +871,58 @@ export default defineComponent({
 
 				// in case no answer is set or all are empty show the confirmation dialog
 				if (
-					Object.keys(this.answers).length === 0
-					|| Object.values(this.answers).every(
-						(answers) => answers.length === 0,
+					Object.keys(answers.value).length === 0
+					|| Object.values(answers.value).every(
+						(localAnswers) => localAnswers.length === 0,
 					)
 				) {
-					this.showConfirmEmptyModal = true
+					showConfirmEmptyModal.value = true
 				} else {
 					// otherwise do the real submit
-					this.onConfirmedSubmit()
+					await onConfirmedSubmit()
 				}
 			} catch (error) {
 				logger.debug('One question is not valid', { error })
 				showError(t('forms', 'Some answers are not valid'))
 			}
-		},
+		}
 
 		/**
 		 * Handle the real submit of the form, this is only called if the form is not empty or user confirmed to submit
 		 */
-		async onConfirmedSubmit(): Promise<void> {
-			this.showConfirmEmptyModal = false
-			this.loading = true
+		async function onConfirmedSubmit(): Promise<void> {
+			showConfirmEmptyModal.value = false
+			loading.value = true
 
 			try {
-				if (this.submissionId) {
+				if (submissionId.value) {
 					await axios.put(
 						generateOcsUrl(
 							'apps/forms/api/v3/forms/{id}/submissions/{submissionId}',
 							{
-								id: this.form.id,
-								submissionId: this.submissionId,
+								id: props.form.id,
+								submissionId: submissionId.value,
 							},
 						),
 						{
-							answers: this.answers,
+							answers: answers.value,
 						},
 					)
 				} else {
 					await axios.post(
 						generateOcsUrl('apps/forms/api/v3/forms/{id}/submissions', {
-							id: this.form.id,
+							id: props.form.id,
 						}),
 						{
-							answers: this.answers,
-							shareHash: this.shareHash,
+							answers: answers.value,
+							shareHash: props.shareHash,
 						},
 					)
 				}
-				this.submitForm = true
-				this.success = true
-				this.deleteFormFieldFromLocalStorage()
-				emit('forms:last-updated:set', this.form.id)
+				submitForm.value = true
+				success.value = true
+				deleteFormFieldFromLocalStorage()
+				emitEvent('forms:last-updated:set', props.form.id)
 			} catch (error) {
 				const errorMessage = (
 					error as {
@@ -1025,30 +946,164 @@ export default defineComponent({
 					showError(t('forms', 'There was an error submitting the form'))
 				}
 			} finally {
-				this.loading = false
-				if (!this.publicView) {
-					this.fetchFullForm(this.form.id)
+				loading.value = false
+				if (!props.publicView) {
+					await viewForm.fetchFullForm(props.form.id)
 				}
 			}
-		},
+		}
 
-		onResetSubmission(): void {
-			this.deleteFormFieldFromLocalStorage()
-			this.resetData()
-		},
+		/**
+		 *
+		 */
+		function onResetSubmission(): void {
+			deleteFormFieldFromLocalStorage()
+			resetData()
+		}
 
 		/**
 		 * Reset View-Data
 		 */
-		resetData(): void {
-			this.answers = {}
-			this.loading = false
-			this.showConfirmLeaveDialog = false
-			this.showClearFormDialog = false
-			this.showClearFormDueToChangeDialog = false
-			this.success = false
-			this.submitForm = false
-		},
+		function resetData(): void {
+			answers.value = {}
+			loading.value = false
+			showConfirmLeaveDialog.value = false
+			showClearFormDialog.value = false
+			showClearFormDueToChangeDialog.value = false
+			success.value = false
+			submitForm.value = false
+		}
+
+		watch(success, (newVal: boolean): void => {
+			if (newVal) {
+				// Delay populating the live region to avoid the announcement being
+				// swallowed by the simultaneous large DOM change (form replaced by
+				// success view). Screen readers need a moment to process the new DOM
+				// before a polite live region update registers.
+				setTimeout(() => {
+					successAnnouncement.value =
+						props.form.submissionMessage
+						|| t('forms', 'Thank you for completing the form!')
+				}, 100)
+			} else {
+				successAnnouncement.value = ''
+			}
+		})
+
+		watch(
+			() => props.hash,
+			(): void => {
+				// If public view, abort. Should normally not occur.
+				if (props.publicView) {
+					logger.error('Hash changed on public view. Aborting.')
+					return
+				}
+				resetData()
+				// Fetch full form on change
+				void viewForm.fetchFullForm(props.form.id)
+				initFromLocalStorage()
+				SetWindowTitle(viewForm.formTitle.value)
+			},
+		)
+
+		onBeforeRouteUpdate(async () => {
+			// This navigation guard is called when the route parameters changed (e.g. form hash)
+			// continue with the navigation if there are no changes or the user confirms to leave the form
+			if (await confirmLeaveForm()) {
+				return
+			} else {
+				// Otherwise cancel the navigation
+				return false
+			}
+		})
+
+		onBeforeRouteLeave(async () => {
+			// This navigation guard is called when the route changed and a new view should be shown
+			// continue with the navigation if there are no changes or the user confirms to leave the form
+			if (await confirmLeaveForm()) {
+				return
+			} else {
+				// Otherwise cancel the navigation
+				return false
+			}
+		})
+
+		onMounted((): void => {
+			window.addEventListener('beforeunload', beforeWindowUnload)
+		})
+
+		onUnmounted((): void => {
+			window.removeEventListener('beforeunload', beforeWindowUnload)
+		})
+
+		onBeforeMount(async (): Promise<void> => {
+			// Public Views get their form by initial-state from parent. No fetch necessary.
+			if (props.publicView) {
+				viewForm.isLoadingForm.value = false
+			} else {
+				await viewForm.fetchFullForm(props.form.id)
+			}
+
+			if (props.isLoggedIn) {
+				if (
+					submissionId.value
+					&& (props.form.allowEditSubmissions
+						|| props.form.permissions.includes(
+							PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
+						))
+				) {
+					await fetchSubmission()
+				} else {
+					initFromLocalStorage()
+				}
+			}
+
+			SetWindowTitle(viewForm.formTitle.value)
+		})
+
+		// Non reactive properties
+		return {
+			...viewForm,
+			answerTypes,
+			answers,
+			confirmClearFormButtons,
+			confirmEmptyModalButtons,
+			confirmLeaveFormButtons,
+			expirationMessage,
+			formElement,
+			hasAnswers,
+			infoMessage,
+			isArchived,
+			isClosed,
+			isExpired,
+			isMaxSubmissionsReached,
+			loading,
+			onKeydownCtrlEnter,
+			onKeydownEnter,
+			onSubmit,
+			onUpdate,
+			questionRefs,
+			showClearFormDialog,
+			showClearFormDueToChangeDialog,
+			showConfirmEmptyModal,
+			showConfirmLeaveDialog,
+			submissionId,
+			submissionMessageHTML,
+			success,
+			successAnnouncement,
+			updateQuestionValues,
+			validQuestions,
+			title,
+			IconCheckSvg: IconCheck,
+			IconRefreshSvg: IconRefresh,
+			IconSendSvg: IconSend,
+			t,
+
+			maxStringLengths: loadState(formsAppName, 'maxStringLengths') as Record<
+				string,
+				number
+			>,
+		}
 	},
 })
 </script>