diff --git a/src/Forms.vue b/src/Forms.vue
index 794543e85..10fd066d6 100644
--- a/src/Forms.vue
+++ b/src/Forms.vue
@@ -133,6 +133,7 @@
 				:form="selectedForm"
 				:sidebarOpened="sidebarOpened"
 				:active="sidebarActive"
+				@update:form="updateSelectedForm"
 				@update:sidebarOpened="sidebarOpened = $event"
 				@update:active="sidebarActive = $event" />
 		</template>
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/components/AddQuestionMenu.vue b/src/components/AddQuestionMenu.vue
index 6c9859157..4333fc723 100644
--- a/src/components/AddQuestionMenu.vue
+++ b/src/components/AddQuestionMenu.vue
@@ -65,7 +65,7 @@
 import IconPlus from '@material-symbols/svg-400/outlined/add.svg?raw'
 import IconChevronLeft from '@material-symbols/svg-400/outlined/chevron_left.svg?raw'
 import { t } from '@nextcloud/l10n'
-import { defineComponent, ref, toRef, watch } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
@@ -101,11 +101,13 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const activeQuestionType = ref<string | null>(null)
 		const openLocal = ref<boolean>(props.open)
-		const open = toRef(props, 'open')
 
-		watch(open, (value: boolean) => {
-			openLocal.value = value
-		})
+		watch(
+			() => props.open,
+			(value: boolean) => {
+				openLocal.value = value
+			},
+		)
 
 		watch(openLocal, (value: boolean) => {
 			emit('update:open', value)
diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
index 9e83edc02..00913a525 100644
--- a/src/components/AppNavigationForm.vue
+++ b/src/components/AppNavigationForm.vue
@@ -115,7 +115,8 @@ import { showConfirmation, showError } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionRouter from '@nextcloud/vue/components/NcActionRouter'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
@@ -161,98 +162,77 @@ export default defineComponent({
 
 	emits: ['mobileCloseNavigation', 'openSharing', 'clone', 'delete'],
 
-	setup() {
-		return {
-			t,
-			FormsIcon,
-			IconArchive,
-			IconArchiveOff,
-			IconCheck,
-			IconContentCopy,
-			IconDelete,
-			IconPencil,
-			IconPoll,
-			IconShareVariant,
-		}
-	},
-
-	data() {
-		return {
-			loading: false as boolean,
-		}
-	},
+	setup(props, { emit }) {
+		const route = useRoute()
+		const loading = ref(false)
 
-	computed: {
-		canEdit(): boolean {
-			return this.form.permissions.includes(PERMISSION_TYPES.PERMISSION_EDIT)
-		},
-
-		canSeeResults(): boolean {
-			return (
-				this.form.permissions.includes(PERMISSION_TYPES.PERMISSION_RESULTS)
-				|| (this.form.submissionCount ?? 0) > 0
-			)
-		},
+		const canEdit = computed(() => {
+			return props.form.permissions.includes(PERMISSION_TYPES.PERMISSION_EDIT)
+		})
+		const canSeeResults = computed(
+			() =>
+				props.form.permissions.includes(PERMISSION_TYPES.PERMISSION_RESULTS)
+				|| (props.form.submissionCount ?? 0) > 0,
+		)
 
 		/**
 		 * Check if form is current form and set active
 		 */
-		isActive(): boolean {
-			return this.form.hash === String(this.$route.params.hash)
-		},
+		const isActive = computed(
+			() => props.form.hash === String(route.params.hash),
+		)
 
 		/**
 		 * Check if the form is archived
 		 */
-		isArchived(): boolean {
-			return this.form.state === FormState.FormArchived
-		},
+		const isArchived = computed(
+			() => props.form.state === FormState.FormArchived,
+		)
 
 		/**
 		 * Check if form is expired
 		 */
-		isExpired(): boolean {
-			return Boolean(this.form.expires && moment().unix() > this.form.expires)
-		},
+		const isExpired = computed(() =>
+			Boolean(props.form.expires && moment().unix() > props.form.expires),
+		)
 
 		/**
 		 * Check if form is locked
 		 */
-		isFormLocked(): boolean {
+		const isFormLocked = computed(() => {
 			const currentUserUid = getCurrentUser()?.uid ?? ''
-			const lockedUntil = this.form.lockedUntil ?? -1
+			const lockedUntil = props.form.lockedUntil ?? -1
 			return (
 				lockedUntil === 0
 				|| (lockedUntil > moment().unix()
-					&& this.form.lockedBy !== currentUserUid)
+					&& props.form.lockedBy !== currentUserUid)
 			)
-		},
+		})
 
 		/**
 		 * Return form title, or placeholder if not set
 		 *
 		 * @return
 		 */
-		formTitle(): string {
-			if (this.form.title) {
-				return this.form.title
+		const formTitle = computed(() => {
+			if (props.form.title) {
+				return props.form.title
 			}
 			return t('forms', 'New form')
-		},
+		})
 
 		/**
 		 * Return expiration details for subtitle
 		 */
-		formSubtitle(): string {
-			if (this.form.state === FormState.FormClosed) {
-				// TRANSLATORS: The form was closed manually so it does not take new submissions
+		const formSubtitle = computed(() => {
+			if (props.form.state === FormState.FormClosed) {
 				return t('forms', 'Form closed')
 			}
-			if (this.form.expires) {
-				const relativeDate = moment(this.form.expires, 'X')
+			if (props.form.expires) {
+				const relativeDate = moment(props.form.expires, 'X')
 					.locale(window.OC.getLanguage())
 					.fromNow()
-				if (this.isExpired) {
+				if (isExpired.value) {
 					return t('forms', 'Expired {relativeDate}', {
 						relativeDate,
 					})
@@ -260,77 +240,97 @@ export default defineComponent({
 				return t('forms', 'Expires {relativeDate}', { relativeDate })
 			}
 			return ''
-		},
+		})
 
 		/**
 		 * Return, if form has Subtitle
 		 */
-		hasSubtitle(): boolean {
-			return this.formSubtitle !== ''
-		},
+		const hasSubtitle = computed(() => formSubtitle.value !== '')
 
 		/**
 		 * Route to use, depending on readOnly
 		 *
 		 * @return Route to 'submit' or 'formRoot'
 		 */
-		routerTarget(): NavigationTarget {
-			if (this.readOnly) {
+		const routerTarget = computed<NavigationTarget>(() => {
+			if (props.readOnly) {
 				return 'submit'
 			}
 
 			return 'formRoot'
-		},
-	},
+		})
 
-	methods: {
 		/**
 		 * Closes the App-Navigation on mobile-devices
 		 */
-		mobileCloseNavigation(): void {
-			this.$emit('mobileCloseNavigation')
-		},
+		const mobileCloseNavigation = (): void => {
+			emit('mobileCloseNavigation')
+		}
 
-		onShareForm(): void {
-			this.$emit('openSharing', this.form.hash)
-		},
+		const onShareForm = (): void => {
+			emit('openSharing', props.form.hash)
+		}
 
-		onCloneForm(): void {
-			this.$emit('clone', this.form.id)
-		},
+		const onCloneForm = (): void => {
+			emit('clone', props.form.id)
+		}
+
+		const onDeleteForm = async (): Promise<void> => {
+			loading.value = true
+			try {
+				await axios.delete(
+					generateOcsUrl('apps/forms/api/v3/forms/{id}', {
+						id: props.form.id,
+					}),
+				)
+				emit('delete', props.form.id)
+			} catch (error) {
+				const response = (error as { response?: unknown }).response
+				logger.error(`Error while deleting ${formTitle.value}`, {
+					error: response,
+				})
+				showError(
+					t('forms', 'Error while deleting {title}', {
+						title: formTitle.value,
+					}),
+				)
+			} finally {
+				loading.value = false
+			}
+		}
 
-		async onConfirmDelete(): Promise<void> {
+		const onConfirmDelete = async (): Promise<void> => {
 			const shouldDelete = await showConfirmation({
 				name: t('forms', 'Delete form'),
 				text: t('forms', 'Are you sure you want to delete {title}?', {
-					title: this.formTitle,
+					title: formTitle.value,
 				}),
 				labelConfirm: t('forms', 'Delete form'),
 				labelReject: t('forms', 'Cancel'),
 			})
 
 			if (shouldDelete) {
-				await this.onDeleteForm()
+				await onDeleteForm()
 			}
-		},
+		}
 
-		async onToggleArchive(): Promise<void> {
+		const onToggleArchive = async (): Promise<void> => {
 			try {
 				// TODO: add loading status feedback ?
 				await axios.patch(
 					generateOcsUrl('apps/forms/api/v3/forms/{id}', {
-						id: this.form.id,
+						id: props.form.id,
 					}),
 					{
 						keyValuePairs: {
-							state: this.isArchived
+							state: isArchived.value
 								? FormState.FormClosed
 								: FormState.FormArchived,
 						},
 					},
 				)
 
-				;(this.form as FormsForm).state = this.isArchived
+				;(props.form as FormsForm).state = isArchived.value
 					? FormState.FormClosed
 					: FormState.FormArchived
 			} catch (error) {
@@ -339,31 +339,37 @@ export default defineComponent({
 				})
 				showError(t('forms', 'Error changing archived state of form'))
 			}
-		},
+		}
 
-		async onDeleteForm(): Promise<void> {
-			this.loading = true
-			try {
-				await axios.delete(
-					generateOcsUrl('apps/forms/api/v3/forms/{id}', {
-						id: this.form.id,
-					}),
-				)
-				this.$emit('delete', this.form.id)
-			} catch (error) {
-				const response = (error as { response?: unknown }).response
-				logger.error(`Error while deleting ${this.formTitle}`, {
-					error: response,
-				})
-				showError(
-					t('forms', 'Error while deleting {title}', {
-						title: this.formTitle,
-					}),
-				)
-			} finally {
-				this.loading = false
-			}
-		},
+		return {
+			t,
+			FormsIcon,
+			IconArchive,
+			IconArchiveOff,
+			IconCheck,
+			IconContentCopy,
+			IconDelete,
+			IconPencil,
+			IconPoll,
+			IconShareVariant,
+			loading,
+			canEdit,
+			canSeeResults,
+			isActive,
+			isArchived,
+			isExpired,
+			isFormLocked,
+			formTitle,
+			formSubtitle,
+			hasSubtitle,
+			routerTarget,
+			mobileCloseNavigation,
+			onShareForm,
+			onCloneForm,
+			onConfirmDelete,
+			onToggleArchive,
+			onDeleteForm,
+		}
 	},
 })
 </script>
diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index f8ce9a6b2..93f6c2160 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/src/components/Questions/AnswerInput.vue
@@ -80,6 +80,7 @@
 </template>
 
 <script lang="ts">
+import type { PropType } from 'vue'
 import type { FormsOption } from '../../models/Entities.d.ts'
 
 import IconPlus from '@material-symbols/svg-400/outlined/add.svg?raw'
@@ -97,8 +98,7 @@ import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
 import PQueue from 'p-queue'
-import { markRaw } from 'vue'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, markRaw, nextTick, ref, watch } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcButton from '@nextcloud/vue/components/NcButton'
@@ -119,7 +119,7 @@ export default defineComponent({
 
 	props: {
 		answer: {
-			type: Object,
+			type: Object as PropType<FormsOption>,
 			required: true,
 		},
 
@@ -174,319 +174,278 @@ export default defineComponent({
 		'moveUp',
 	],
 
-	setup() {
-		return {
-			IconArrowDown,
-			IconArrowUp,
-			IconDelete,
-			IconDragIndicator,
-			IconPlus,
-			t,
-		}
-	},
-
-	data() {
-		return {
-			queue: null as PQueue | null,
-			debounceOnInput: undefined as ((event: InputEvent) => void) | undefined,
-			isIMEComposing: false as boolean,
-			localText: (this.answer as FormsOption | undefined)?.text ?? '',
+	setup(props, { emit }) {
+		// markRaw: PQueue relies on private class fields, which break when Vue wraps it in a reactive proxy
+		const queue = ref(markRaw(new PQueue({ concurrency: 1 })))
+		const input = ref<HTMLInputElement | null>(null)
+		const buttonOptionDown = ref<{ $el?: HTMLElement } | null>(null)
+		const buttonOptionUp = ref<{ $el?: HTMLElement } | null>(null)
+		const isIMEComposing = ref(false)
+		const answer = computed(() => props.answer)
+		const localText = ref(answer.value.text ?? '')
+
+		const getInputTarget = (
+			event: Event | { target: EventTarget | null },
+		): HTMLInputElement | null => {
+			return event.target instanceof HTMLInputElement ? event.target : null
 		}
-	},
 
-	computed: {
-		canCreateLocalAnswer(): boolean {
-			if ((this.answer as FormsOption).local) {
-				return !!this.localText?.trim()
+		const canCreateLocalAnswer = computed(() => {
+			if (answer.value.local) {
+				return !!localText.value.trim()
 			}
-			return !!(this.answer as FormsOption).text?.trim()
-		},
+			return !!answer.value.text?.trim()
+		})
 
-		ariaLabel(): string {
-			const answer = this.answer as FormsOption
-			if (answer.local) {
-				if (this.optionType === OptionType.Column) {
+		const ariaLabel = computed(() => {
+			if (answer.value.local) {
+				if (props.optionType === OptionType.Column) {
 					return t('forms', 'Add a new column')
 				}
-				if (this.optionType === OptionType.Row) {
+				if (props.optionType === OptionType.Row) {
 					return t('forms', 'Add a new row')
 				}
 
 				return t('forms', 'Add a new answer option')
 			}
 
-			if (this.optionType === OptionType.Column) {
+			if (props.optionType === OptionType.Column) {
 				return t('forms', 'The text of column {index}', {
-					index: this.index + 1,
+					index: props.index + 1,
 				})
 			}
 
-			if (this.optionType === OptionType.Row) {
+			if (props.optionType === OptionType.Row) {
 				return t('forms', 'The text of row {index}', {
-					index: this.index + 1,
+					index: props.index + 1,
 				})
 			}
 
 			return t('forms', 'The text of option {index}', {
-				index: this.index + 1,
+				index: props.index + 1,
 			})
-		},
+		})
 
-		optionDragMenuId(): string {
-			const answer = this.answer as FormsOption
-			return `q${answer.questionId}o${answer.id}o${this.optionType}__drag_menu`
-		},
+		const optionDragMenuId = computed(() => {
+			return `q${answer.value.questionId}o${answer.value.id}o${props.optionType}__drag_menu`
+		})
 
-		placeholder(): string {
-			const answer = this.answer as FormsOption
-			if (answer.local) {
-				if (this.optionType === OptionType.Column) {
+		const placeholder = computed(() => {
+			if (answer.value.local) {
+				if (props.optionType === OptionType.Column) {
 					return t('forms', 'Add a new column')
 				}
 
-				if (this.optionType === OptionType.Row) {
+				if (props.optionType === OptionType.Row) {
 					return t('forms', 'Add a new row')
 				}
 
 				return t('forms', 'Add a new answer option')
 			}
 
-			if (this.optionType === OptionType.Column) {
-				return t('forms', 'Column number {index}', { index: this.index + 1 })
+			if (props.optionType === OptionType.Column) {
+				return t('forms', 'Column number {index}', {
+					index: props.index + 1,
+				})
 			}
 
-			if (this.optionType === OptionType.Row) {
-				return t('forms', 'Row number {index}', { index: this.index + 1 })
+			if (props.optionType === OptionType.Row) {
+				return t('forms', 'Row number {index}', { index: props.index + 1 })
 			}
 
-			return t('forms', 'Answer number {index}', { index: this.index + 1 })
-		},
+			return t('forms', 'Answer number {index}', { index: props.index + 1 })
+		})
 
-		pseudoIcon(): string {
-			const answer = this.answer as FormsOption
-			if (answer.local) {
+		const pseudoIcon = computed(() => {
+			if (answer.value.local) {
 				return IconPlus
 			}
 
-			if (this.optionType === OptionType.Column) {
+			if (props.optionType === OptionType.Column) {
 				return IconTableColumn
 			}
 
-			if (this.optionType === OptionType.Row) {
+			if (props.optionType === OptionType.Row) {
 				return IconTableRow
 			}
 
-			if (this.isRanking) {
+			if (props.isRanking) {
 				return IconDragIndicator
 			}
 
-			return this.isUnique ? IconRadioboxBlank : IconCheckboxBlankOutline
-		},
-	},
+			return props.isUnique ? IconRadioboxBlank : IconCheckboxBlankOutline
+		})
 
-	watch: {
 		// Keep localText in sync when the parent replaces/updates the answer prop
-		answer: {
-			handler(newVal: FormsOption) {
-				this.localText = newVal?.text ?? ''
+		watch(
+			() => props.answer,
+			(newVal: FormsOption) => {
+				localText.value = newVal?.text ?? ''
 			},
-
-			deep: true,
-		},
-	},
-
-	created(): void {
-		this.queue = markRaw(new PQueue({ concurrency: 1 }))
+			{ deep: true },
+		)
 
 		// As data instead of method, to have a separate debounce per AnswerInput
-		this.debounceOnInput = debounce((event: InputEvent) => {
-			const queue = this.queue
-			if (!queue) {
-				return
-			}
-			return queue.add(() => this.onInput(event))
+		const debounceOnInput = debounce((event: InputEvent) => {
+			void queue.value.add(() => onInput(event))
 		}, INPUT_DEBOUNCE_MS)
-	},
 
-	methods: {
-		handleTabbing(): void {
-			this.$emit('tabbedOut', this.optionType)
-		},
+		const handleTabbing = (): void => {
+			emit('tabbedOut', props.optionType)
+		}
 
 		/**
-		 * Focus the input
+		 * Focus the current answer input.
 		 */
-		focus(): void {
-			const input = this.$refs.input as unknown as HTMLInputElement | undefined
-			input?.focus()
-		},
+		const focus = (): void => {
+			input.value?.focus()
+		}
 
 		/**
-		 * Option changed, processing the data
+		 * Handle text input change from the form field.
 		 *
-		 * @param event The input event that triggered adding a new entry
+		 * @param event The input event that triggered the save.
 		 */
-		async onInput(
+		async function onInput(
 			event: InputEvent | { target: HTMLInputElement; isComposing?: boolean },
 		): Promise<void> {
-			const target = event.target as HTMLInputElement | null
+			const target = getInputTarget(event)
 			if (!target) {
 				return
 			}
 
-			const answer = this.answer as FormsOption
-			if (answer.local) {
-				this.localText = target.value
+			if (answer.value.local) {
+				localText.value = target.value
 				return
 			}
 
-			if (!event.isComposing && !this.isIMEComposing && target.value !== '') {
+			if (!event.isComposing && !isIMEComposing.value && target.value !== '') {
 				// clone answer
-				const answerCopy = { ...answer }
-				const input = this.$refs.input as unknown as
-					HTMLInputElement | undefined
-				if (!input) {
+				const answerCopy = { ...answer.value }
+				if (!input.value) {
 					return
 				}
-				answerCopy.text = input.value
+				answerCopy.text = input.value.value
 
-				await this.updateAnswer(answerCopy)
+				await updateAnswer(answerCopy)
 
 				// Forward changes, but use current answer.text to avoid erasing
 				// any in-between changes while updating the answer
-				answerCopy.text = input.value
-				this.$emit('update:answer', this.index, answerCopy)
+				answerCopy.text = input.value.value
+				emit('update:answer', props.index, answerCopy)
 			}
-		},
+		}
 
 		/**
 		 * Handle Enter key: create local answer or move focus
 		 *
-		 * @param e the keydown event
+		 * @param e The keyboard event.
 		 */
-		onEnter(e: KeyboardEvent): void {
-			if ((this.answer as FormsOption).local) {
-				this.createLocalAnswer(e)
+		const onEnter = (e: KeyboardEvent): void => {
+			if (answer.value.local) {
+				void createLocalAnswer(e)
 				return
 			}
-			this.focusNextInput(e)
-		},
+			focusNextInput(e)
+		}
 
 		/**
-		 * Create a new local answer option from the current input
+		 * Create a new local answer option from the current input value.
 		 *
-		 * @param e the triggering event
+		 * @param e The triggering event, if any.
 		 */
-		async createLocalAnswer(
+		async function createLocalAnswer(
 			e?: Event & { isComposing?: boolean },
 		): Promise<void> {
-			if (this.isIMEComposing || e?.isComposing) {
+			if (isIMEComposing.value || e?.isComposing) {
 				return
 			}
 
-			const value = this.localText ?? ''
+			const value = localText.value ?? ''
 			if (!value.trim()) {
 				return
 			}
 
-			const answer = {
-				...(this.answer as FormsOption),
+			const answerValue = {
+				...answer.value,
 				text: value,
 				local: false,
 			}
 
-			// Prevent any queued debounced PATCHes from running while creating
-			const queue = this.queue
-			if (!queue) {
-				return
-			}
-			queue.pause()
+			queue.value.pause()
 			try {
-				const newAnswer = await this.createAnswer(answer)
-
 				// Forward changes, but use current answer.text to avoid erasing
 				// any in-between changes while creating the answer
-				const input = this.$refs.input as unknown as
-					HTMLInputElement | undefined
-				if (!input) {
+				const newAnswer = await createAnswer(answerValue)
+				if (!input.value) {
 					return
 				}
-				newAnswer.text = input.value
-				this.localText = ''
-
-				this.$emit('createAnswer', this.index, newAnswer)
+				newAnswer.text = input.value.value
+				localText.value = ''
+				emit('createAnswer', props.index, newAnswer)
 			} finally {
 				// Clear pending update tasks (stale PATCHes) before resuming processing
-				queue.clear()
-				queue.start()
+				queue.value.clear()
+				queue.value.start()
 			}
-		},
+		}
 
 		/**
-		 * Request a new answer
+		 * Move focus to the next answer input when Enter is pressed.
 		 *
-		 * @param e the triggering event
+		 * @param e The keyboard event.
 		 */
-		focusNextInput(e: Event & { isComposing?: boolean }): void {
-			if (this.isIMEComposing || e?.isComposing) {
+		function focusNextInput(e: Event & { isComposing?: boolean }): void {
+			if (isIMEComposing.value || e?.isComposing) {
 				return
 			}
-			if (this.index <= this.maxIndex) {
-				this.$emit('focusNext', this.index, this.optionType)
+			if (props.index <= props.maxIndex) {
+				emit('focusNext', props.index, props.optionType)
 			}
-		},
+		}
 
 		/**
-		 * Emit a delete request for this answer
-		 * when pressing the delete key on an empty input
+		 * Remove the current option when the delete action is triggered.
 		 *
-		 * @param e the event
+		 * @param e The input or button event.
 		 */
-		async deleteEntry(
+		const deleteEntry = async (
 			e: Event & { isComposing?: boolean; type: string },
-		): Promise<void> {
-			if (this.isIMEComposing || e?.isComposing) {
+		): Promise<void> => {
+			if (isIMEComposing.value || e?.isComposing) {
 				return
 			}
 
-			if ((this.answer as FormsOption).local) {
+			if (answer.value.local) {
 				return
 			}
 
-			const input = this.$refs.input as unknown as HTMLInputElement | undefined
-			if (e.type !== 'click' && (input?.value.length ?? 0) !== 0) {
+			if (e.type !== 'click' && (input.value?.value.length ?? 0) !== 0) {
 				return
 			}
 
 			// Dismiss delete key action
 			e.preventDefault()
-
-			// do this in queue to prevent race conditions between PATCH and DELETE
-			const queue = this.queue
-			if (!queue) {
-				return
-			}
-			queue.add(() => {
-				this.$emit('delete', this.answer as FormsOption)
-				// Prevent any patch requests
-				queue.pause()
-				queue.clear()
+			void queue.value.add(() => {
+				emit('delete', props.answer)
+				queue.value.pause()
+				queue.value.clear()
 			})
-		},
+		}
 
 		/**
-		 * Create an unsynced answer to the server
+		 * Save a newly created option to the server.
 		 *
-		 * @param answer the answer to sync
-		 * @return answer
+		 * @param answer The answer payload to create.
+		 * @return The saved server response item.
 		 */
-		async createAnswer(answer: FormsOption): Promise<FormsOption> {
+		async function createAnswer(answer: FormsOption): Promise<FormsOption> {
 			try {
 				const response = await axios.post(
 					generateOcsUrl(
 						'apps/forms/api/v3/forms/{id}/questions/{questionId}/options',
 						{
-							id: this.formId,
+							id: props.formId,
 							questionId: answer.questionId,
 						},
 					),
@@ -506,21 +465,20 @@ export default defineComponent({
 			}
 
 			return answer
-		},
+		}
 
 		/**
-		 * Save to the server, only do it after 500ms
-		 * of no change
+		 * Persist a changed answer text to the server after debounce.
 		 *
-		 * @param answer the answer to sync
+		 * @param answer The updated answer payload.
 		 */
-		async updateAnswer(answer: FormsOption): Promise<void> {
+		async function updateAnswer(answer: FormsOption): Promise<void> {
 			try {
 				await axios.patch(
 					generateOcsUrl(
 						'apps/forms/api/v3/forms/{id}/questions/{questionId}/options/{optionId}',
 						{
-							id: this.formId,
+							id: props.formId,
 							questionId: answer.questionId,
 							optionId: answer.id,
 						},
@@ -536,52 +494,93 @@ export default defineComponent({
 				logger.error('Error while saving answer', { answer, error })
 				showError(t('forms', 'Error while saving the answer'))
 			}
-		},
+		}
 
 		/**
-		 * Reorder option but keep focus on the button
+		 * Move the current answer down in the list.
 		 */
-		onMoveDown(): void {
-			this.$emit('moveDown')
-			this.focusButton(
-				this.index < this.maxIndex - 1
+		const onMoveDown = (): void => {
+			emit('moveDown')
+			focusButton(
+				props.index < props.maxIndex - 1
 					? 'buttonOptionDown'
 					: 'buttonOptionUp',
 			)
-		},
+		}
 
-		onMoveUp(): void {
-			this.$emit('moveUp')
-			this.focusButton(this.index > 1 ? 'buttonOptionUp' : 'buttonOptionDown')
-		},
+		/**
+		 * Move the current answer up in the list.
+		 */
+		const onMoveUp = (): void => {
+			emit('moveUp')
+			focusButton(props.index > 1 ? 'buttonOptionUp' : 'buttonOptionDown')
+		}
 
-		focusButton(refName: 'buttonOptionDown' | 'buttonOptionUp'): void {
-			this.$nextTick(() => {
-				const button = this.$refs[refName] as unknown as
-					{ $el?: HTMLElement } | undefined
+		/**
+		 * Restore focus to the move button after reordering.
+		 *
+		 * @param refName The target button reference name.
+		 */
+		function focusButton(refName: 'buttonOptionDown' | 'buttonOptionUp'): void {
+			nextTick(() => {
+				const button =
+					refName === 'buttonOptionDown'
+						? buttonOptionDown.value
+						: buttonOptionUp.value
 				button?.$el?.focus()
 			})
-		},
+		}
 
 		/**
-		 * Handle composition start event for IME inputs
+		 * Track the start of an IME composition sequence.
 		 */
-		onCompositionStart(): void {
-			this.isIMEComposing = true
-		},
+		const onCompositionStart = (): void => {
+			isIMEComposing.value = true
+		}
 
 		/**
-		 * Handle composition end event for IME inputs
+		 * Flush a pending input after IME composition ends.
 		 *
-		 * @param event The input event that triggered adding a new entry
+		 * @param event The composition event.
 		 */
-		onCompositionEnd(event: CompositionEvent & { isComposing?: boolean }): void {
-			const target = event.target as HTMLInputElement | null
-			this.isIMEComposing = false
+		const onCompositionEnd = (
+			event: CompositionEvent & { isComposing?: boolean },
+		): void => {
+			const target = getInputTarget(event)
+			isIMEComposing.value = false
 			if (!event.isComposing && target) {
-				this.onInput({ target, isComposing: event.isComposing })
+				void onInput({ target, isComposing: event.isComposing })
 			}
-		},
+		}
+
+		return {
+			IconArrowDown,
+			IconArrowUp,
+			IconDelete,
+			IconDragIndicator,
+			IconPlus,
+			buttonOptionDown,
+			buttonOptionUp,
+			canCreateLocalAnswer,
+			ariaLabel,
+			optionDragMenuId,
+			placeholder,
+			pseudoIcon,
+			input,
+			localText,
+			isIMEComposing,
+			debounceOnInput,
+			handleTabbing,
+			focus,
+			onEnter,
+			createLocalAnswer,
+			deleteEntry,
+			onMoveDown,
+			onMoveUp,
+			onCompositionStart,
+			onCompositionEnd,
+			t,
+		}
 	},
 })
 </script>
diff --git a/src/components/Questions/QuestionColor.vue b/src/components/Questions/QuestionColor.vue
index 26540f948..5241f41a7 100644
--- a/src/components/Questions/QuestionColor.vue
+++ b/src/components/Questions/QuestionColor.vue
@@ -74,6 +74,9 @@ export default defineComponent({
 
 	setup(props, { emit }) {
 		const question = useQuestion(props, { emit })
+		const values = computed(() => {
+			return props.values as Array<string | null | undefined>
+		})
 
 		const colorPickerPlaceholder = computed(() => {
 			return props.readOnly
@@ -82,7 +85,7 @@ export default defineComponent({
 		})
 
 		const pickedColor = computed(() => {
-			return (props.values[0] as string | null | undefined) ?? ''
+			return values.value[0] ?? ''
 		})
 
 		const validate = async (): Promise<boolean> => {
diff --git a/src/components/Questions/QuestionDate.vue b/src/components/Questions/QuestionDate.vue
index 90c3ae782..f64711e3b 100644
--- a/src/components/Questions/QuestionDate.vue
+++ b/src/components/Questions/QuestionDate.vue
@@ -155,11 +155,17 @@ export default defineComponent({
 
 	setup(props, { emit }) {
 		const question = useQuestion(props, { emit })
+		const values = computed(() => {
+			return props.values as Array<string | undefined>
+		})
+		const extraSettings = computed(() => {
+			return (
+				(props.extraSettings as QuestionDateExtraSettings | undefined) ?? {}
+			)
+		})
 
 		const isRangeQuestion = computed(() => {
-			const extraSettings = props.extraSettings as
-				QuestionDateExtraSettings | undefined
-			return extraSettings?.dateRange || extraSettings?.timeRange
+			return extraSettings.value.dateRange || extraSettings.value.timeRange
 				? true
 				: false
 		})
@@ -230,13 +236,13 @@ export default defineComponent({
 
 		const time = computed<Date | [Date, Date] | null>(() => {
 			if (isRangeQuestion.value) {
-				const firstValue = props.values?.[0] as string | undefined
-				const secondValue = props.values?.[1] as string | undefined
+				const firstValue = values.value[0]
+				const secondValue = values.value[1]
 				return firstValue && secondValue
 					? [parse(firstValue), parse(secondValue)]
 					: null
 			}
-			const value = props.values?.[0] as string | undefined
+			const value = values.value[0]
 			return value ? parse(value) : null
 		})
 
@@ -244,10 +250,8 @@ export default defineComponent({
 		 * The maximum allowable date for the date input field
 		 */
 		const dateMax = computed<Date | undefined>(() => {
-			const extraSettings = props.extraSettings as
-				QuestionDateExtraSettings | undefined
-			return extraSettings?.dateMax
-				? moment(extraSettings.dateMax, 'X').toDate()
+			return extraSettings.value.dateMax
+				? moment(extraSettings.value.dateMax, 'X').toDate()
 				: undefined
 		})
 
@@ -255,28 +259,22 @@ export default defineComponent({
 		 * The minimum allowable date for the date input field
 		 */
 		const dateMin = computed<Date | undefined>(() => {
-			const extraSettings = props.extraSettings as
-				QuestionDateExtraSettings | undefined
-			return extraSettings?.dateMin
-				? moment(extraSettings.dateMin, 'X').toDate()
+			return extraSettings.value.dateMin
+				? moment(extraSettings.value.dateMin, 'X').toDate()
 				: undefined
 		})
 
 		const dateRange = computed(() => {
-			const extraSettings = props.extraSettings as
-				QuestionDateExtraSettings | undefined
-			return extraSettings?.dateRange ?? false
+			return extraSettings.value.dateRange ?? false
 		})
 
 		/**
 		 * The maximum allowable time for the time input field
 		 */
 		const timeMax = computed<Date | undefined>(() => {
-			const extraSettings = props.extraSettings as
-				QuestionDateExtraSettings | undefined
-			return extraSettings?.timeMax
+			return extraSettings.value.timeMax
 				? moment(
-						extraSettings.timeMax,
+						extraSettings.value.timeMax,
 						props.answerType.storageFormat,
 					).toDate()
 				: undefined
@@ -286,20 +284,16 @@ export default defineComponent({
 		 * The minimum allowable time for the time input field
 		 */
 		const timeMin = computed<Date | undefined>(() => {
-			const extraSettings = props.extraSettings as
-				QuestionDateExtraSettings | undefined
-			return extraSettings?.timeMin
+			return extraSettings.value.timeMin
 				? moment(
-						extraSettings.timeMin,
+						extraSettings.value.timeMin,
 						props.answerType.storageFormat,
 					).toDate()
 				: undefined
 		})
 
 		const timeRange = computed(() => {
-			const extraSettings = props.extraSettings as
-				QuestionDateExtraSettings | undefined
-			return extraSettings?.timeRange ?? false
+			return extraSettings.value.timeRange ?? false
 		})
 
 		const validate = async (): Promise<boolean> => {
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
index 7233a0d4f..7b91656fa 100644
--- a/src/components/Questions/QuestionDropdown.vue
+++ b/src/components/Questions/QuestionDropdown.vue
@@ -145,15 +145,22 @@ export default defineComponent({
 
 	setup(props, { emit }) {
 		const question = useQuestion(props, { emit })
-		const questionMultiple = useQuestionMultiple(props, { emit })
+		const values = computed<Array<number | string>>(() => {
+			return Array.isArray(props.values) ? props.values : []
+		})
 		const input = ref<
 			Array<{
 				focus?: () => void
 				$props?: { optionType?: string; index?: number }
 			} | null>
 		>([])
-		const isDragging = ref(false)
 		const isLoading = ref(false)
+		const questionMultiple = useQuestionMultiple(props, {
+			emit,
+			input,
+			isLoading,
+		})
+		const isDragging = ref(false)
 		const isOptionDialogShown = ref(false)
 
 		const selectOptionPlaceholder = computed(() => {
@@ -177,12 +184,12 @@ export default defineComponent({
 		})
 
 		const selectedOption = computed<FormsOption | FormsOption[] | null>(() => {
-			if (!props.values) {
+			if (values.value.length === 0) {
 				return null
 			}
 
-			const selected = props.values
-				.map((id: unknown) =>
+			const selected = values.value
+				.map((id) =>
 					props.options.find(
 						(option) => option.id === parseInt(String(id), 10),
 					),
@@ -256,6 +263,7 @@ export default defineComponent({
 			shiftDragHandle,
 			t,
 			validate,
+			values,
 		}
 	},
 })
diff --git a/src/components/Questions/QuestionFile.vue b/src/components/Questions/QuestionFile.vue
index 377822a76..5d7f9a006 100644
--- a/src/components/Questions/QuestionFile.vue
+++ b/src/components/Questions/QuestionFile.vue
@@ -236,6 +236,14 @@ export default defineComponent({
 
 	setup(props, { emit }) {
 		const question = useQuestion(props, { emit })
+		const values = computed<UploadedFileValue[]>(() => {
+			return props.values as UploadedFileValue[]
+		})
+		const extraSettings = computed<QuestionFileExtraSettings>(() => {
+			return (
+				(props.extraSettings as QuestionFileExtraSettings | undefined) ?? {}
+			)
+		})
 		const fileInput = ref<HTMLInputElement | null>(null)
 		const fileLoading = ref(false)
 		const maxFileSizeUnit = ref<FileSizeUnit>(
@@ -249,41 +257,35 @@ export default defineComponent({
 		})
 
 		const uploadedFiles = computed<UploadedFileValue[]>(() => {
-			return props.values as UploadedFileValue[]
+			return values.value
 		})
 
 		const maxAllowedFilesCount = computed<number>(() => {
-			const extraSettings = props.extraSettings as
-				QuestionFileExtraSettings | undefined
-			return extraSettings?.maxAllowedFilesCount ?? 1
+			return extraSettings.value.maxAllowedFilesCount ?? 1
 		})
 
 		const allowedFileExtensions = computed<string[]>(() => {
-			const extraSettings = props.extraSettings as
-				QuestionFileExtraSettings | undefined
-			return extraSettings?.allowedFileExtensions ?? []
+			return extraSettings.value.allowedFileExtensions ?? []
 		})
 
 		const allowedFileTypes = computed<string[]>(() => {
-			const extraSettings = props.extraSettings as
-				QuestionFileExtraSettings | undefined
-			return extraSettings?.allowedFileTypes ?? []
+			return extraSettings.value.allowedFileTypes ?? []
 		})
 
 		const allowedFileTypesLabel = computed<string>(() => {
 			const allowedFileTypeLabels: string[] = []
-			const extraSettings = props.extraSettings as
-				QuestionFileExtraSettings | undefined
-			if (extraSettings?.allowedFileTypes?.length) {
+			if (extraSettings.value.allowedFileTypes?.length) {
 				allowedFileTypeLabels.push(
-					...extraSettings.allowedFileTypes.map(
+					...extraSettings.value.allowedFileTypes.map(
 						(type: string) => fileTypes[type].label,
 					),
 				)
 			}
 
-			if (extraSettings?.allowedFileExtensions?.length) {
-				allowedFileTypeLabels.push(...extraSettings.allowedFileExtensions)
+			if (extraSettings.value.allowedFileExtensions?.length) {
+				allowedFileTypeLabels.push(
+					...extraSettings.value.allowedFileExtensions,
+				)
 			}
 			if (allowedFileTypeLabels.length) {
 				return t('forms', 'Allowed file types: {fileTypes}.', {
@@ -295,10 +297,8 @@ export default defineComponent({
 		})
 
 		onMounted(() => {
-			const extraSettings = props.extraSettings as
-				QuestionFileExtraSettings | undefined
-			if (extraSettings?.maxFileSize) {
-				const maxFileSize = extraSettings.maxFileSize
+			if (extraSettings.value.maxFileSize) {
+				const maxFileSize = extraSettings.value.maxFileSize
 				Object.keys(FILE_SIZE_UNITS).forEach((unit) => {
 					const typedUnit = unit as FileSizeUnit
 					if (maxFileSize > FILE_SIZE_UNITS[typedUnit]) {
@@ -322,16 +322,14 @@ export default defineComponent({
 
 			const formData = new FormData()
 			let fileInvalid = false
-			const extraSettings = props.extraSettings as
-				QuestionFileExtraSettings | undefined
 
 			;[...currentInput.files].forEach((file) => {
 				formData.append('files[]', file)
 
 				if (
-					extraSettings?.maxFileSize
-					&& extraSettings.maxFileSize > 0
-					&& file.size > extraSettings.maxFileSize
+					extraSettings.value.maxFileSize
+					&& extraSettings.value.maxFileSize > 0
+					&& file.size > extraSettings.value.maxFileSize
 				) {
 					showError(
 						t(
@@ -340,7 +338,7 @@ export default defineComponent({
 							{
 								fileName: file.name,
 								maxFileSize: formatFileSize(
-									extraSettings.maxFileSize,
+									extraSettings.value.maxFileSize,
 								),
 							},
 						),
@@ -405,7 +403,7 @@ export default defineComponent({
 			}
 
 			emit('update:values', [
-				...(props.values as UploadedFileValue[]),
+				...values.value,
 				...(OcsResponse2Data(response) as UploadedFileValue[]),
 			])
 		}
@@ -445,9 +443,7 @@ export default defineComponent({
 			fileType: string,
 			allowed: boolean,
 		): void => {
-			const extraSettings = props.extraSettings as
-				QuestionFileExtraSettings | undefined
-			let allowedFileTypesList = extraSettings?.allowedFileTypes ?? []
+			let allowedFileTypesList = extraSettings.value.allowedFileTypes ?? []
 
 			if (allowed) {
 				allowedFileTypesList.push(fileType)
@@ -463,10 +459,8 @@ export default defineComponent({
 		}
 
 		const onAllowedFileExtensionsAdded = (fileExtension: string): void => {
-			const extraSettings = props.extraSettings as
-				QuestionFileExtraSettings | undefined
 			const allowedFileExtensionsList =
-				extraSettings?.allowedFileExtensions ?? []
+				extraSettings.value.allowedFileExtensions ?? []
 			allowedFileExtensionsList.push(fileExtension)
 			question.onExtraSettingsChange({
 				allowedFileExtensions: allowedFileExtensionsList,
@@ -474,10 +468,8 @@ export default defineComponent({
 		}
 
 		const onAllowedFileExtensionsDeleted = (fileExtension: string): void => {
-			const extraSettings = props.extraSettings as
-				QuestionFileExtraSettings | undefined
 			let allowedFileExtensionsList =
-				extraSettings?.allowedFileExtensions ?? []
+				extraSettings.value.allowedFileExtensions ?? []
 			allowedFileExtensionsList = allowedFileExtensionsList.filter(
 				(extension) => extension !== fileExtension,
 			)
@@ -488,11 +480,11 @@ export default defineComponent({
 		}
 
 		const onDeleteUploadedFile = (uploadedFileId: number | string): void => {
-			const values = (props.values as UploadedFileValue[]).filter(
+			const remainingValues = values.value.filter(
 				(value) => value.uploadedFileId !== uploadedFileId,
 			)
 
-			emit('update:values', values)
+			emit('update:values', remainingValues)
 		}
 
 		const validate = async (): Promise<boolean> => {
@@ -518,6 +510,7 @@ export default defineComponent({
 
 		return {
 			...question,
+			values,
 			IconChevronLeft,
 			IconDelete,
 			IconFile,
diff --git a/src/components/Questions/QuestionGrid.vue b/src/components/Questions/QuestionGrid.vue
index cff92a380..a5d8ebf48 100644
--- a/src/components/Questions/QuestionGrid.vue
+++ b/src/components/Questions/QuestionGrid.vue
@@ -228,15 +228,19 @@ export default defineComponent({
 
 	setup(props, { emit }) {
 		const question = useQuestion(props, { emit })
-		const questionMultiple = useQuestionMultiple(props, { emit })
 		const input = ref<
 			Array<{
 				focus?: () => void
 				$props?: { optionType?: string; index?: number }
 			} | null>
 		>([])
-		const isDragging = ref(false)
 		const isLoading = ref(false)
+		const questionMultiple = useQuestionMultiple(props, {
+			emit,
+			input,
+			isLoading,
+		})
+		const isDragging = ref(false)
 		const questionTypes = [
 			{ label: t('forms', 'Radio'), id: GridCellType.Radio },
 			{ label: t('forms', 'Checkbox'), id: GridCellType.Checkbox },
@@ -248,6 +252,16 @@ export default defineComponent({
 			return props.answerType.unique === true
 		})
 
+		const values = computed<GridQuestionValues>(() => {
+			return (props.values as GridQuestionValues | undefined) ?? {}
+		})
+
+		const extraSettings = computed<QuestionGridExtraSettings>(() => {
+			return (
+				(props.extraSettings as QuestionGridExtraSettings | undefined) ?? {}
+			)
+		})
+
 		const shiftDragHandle = computed(() => {
 			return (
 				!props.readOnly
@@ -257,9 +271,7 @@ export default defineComponent({
 		})
 
 		const questionType = computed<GridQuestionType>(() => {
-			const extraSettings = props.extraSettings as
-				QuestionGridExtraSettings | undefined
-			return extraSettings?.questionType ?? GridCellType.Radio
+			return extraSettings.value.questionType ?? GridCellType.Radio
 		})
 
 		const columns = computed<FormsOption[]>({
@@ -289,25 +301,23 @@ export default defineComponent({
 		})
 
 		const plainValues = computed<GridMatrixValues>(() => {
-			const values: GridMatrixValues = {}
-			const questionValues = props.values as GridQuestionValues
+			const normalizedValues: GridMatrixValues = {}
 			for (const row of rows.value) {
 				for (const column of columns.value) {
-					values[row.id] = values[row.id] || {}
-					const rowValues = questionValues[row.id] as
+					normalizedValues[row.id] = normalizedValues[row.id] || {}
+					const rowValues = values.value[row.id] as
 						Record<number, GridCellValue> | undefined
-					values[row.id][column.id] = rowValues?.[column.id] ?? ''
+					normalizedValues[row.id][column.id] =
+						rowValues?.[column.id] ?? ''
 				}
 			}
 
-			return values
+			return normalizedValues
 		})
 
 		const validate = async (): Promise<boolean> => {
-			const extraSettings = props.extraSettings as
-				QuestionGridExtraSettings | undefined
-			const values = props.values as unknown[] & { length?: number }
-			if (props.isRequired && (values.length === 0 || props.values === null)) {
+			const valueCount = Object.keys(values.value).length
+			if (props.isRequired && (props.values === null || valueCount === 0)) {
 				question.errorMessage.value = t(
 					'forms',
 					'You must answer this question',
@@ -317,9 +327,9 @@ export default defineComponent({
 
 			if (!isUnique.value) {
 				// Validate limits
-				const max = extraSettings?.optionsLimitMax ?? 0
-				const min = extraSettings?.optionsLimitMin ?? 0
-				if (max && (values.length ?? 0) > max) {
+				const max = extraSettings.value.optionsLimitMax ?? 0
+				const min = extraSettings.value.optionsLimitMin ?? 0
+				if (max && valueCount > max) {
 					question.errorMessage.value = n(
 						'forms',
 						'You must choose at most one option',
@@ -328,7 +338,7 @@ export default defineComponent({
 					)
 					return false
 				}
-				if (min && (values.length ?? 0) < min) {
+				if (min && valueCount < min) {
 					question.errorMessage.value = n(
 						'forms',
 						'You must choose at least one option',
@@ -354,10 +364,10 @@ export default defineComponent({
 		}
 
 		const onChangeCheckboxRadio = (rowId: number, value: unknown): void => {
-			const values = { ...(props.values as GridQuestionValues) }
-			values[rowId] = value
+			const nextValues = { ...(values.value as GridQuestionValues) }
+			nextValues[rowId] = value
 
-			emit('update:values', values)
+			emit('update:values', nextValues)
 		}
 
 		const onChangeTextNumber = (
@@ -391,6 +401,8 @@ export default defineComponent({
 			shiftDragHandle,
 			t,
 			validate,
+			values,
+			extraSettings,
 		}
 	},
 })
diff --git a/src/components/Questions/QuestionLinearScale.vue b/src/components/Questions/QuestionLinearScale.vue
index 730bf3160..6e69e0c97 100644
--- a/src/components/Questions/QuestionLinearScale.vue
+++ b/src/components/Questions/QuestionLinearScale.vue
@@ -155,6 +155,14 @@ export default defineComponent({
 
 	setup(props, { emit }) {
 		const question = useQuestion(props, { emit })
+		const values = computed<string[]>(() => {
+			return props.values as string[]
+		})
+		const extraSettings = computed<LinearScaleExtraSettings>(() => {
+			return (
+				(props.extraSettings as LinearScaleExtraSettings | undefined) ?? {}
+			)
+		})
 		const lowest = ref<{ $refs: { input: HTMLTextAreaElement } } | null>(null)
 		const highest = ref<{ $refs: { input: HTMLTextAreaElement } } | null>(null)
 
@@ -163,9 +171,7 @@ export default defineComponent({
 
 		const optionsLowest = computed<number>({
 			get: () => {
-				const extraSettings = props.extraSettings as
-					LinearScaleExtraSettings | undefined
-				return extraSettings?.optionsLowest ?? 1
+				return extraSettings.value.optionsLowest ?? 1
 			},
 			set: (value: number) => {
 				question.onExtraSettingsChange({
@@ -176,9 +182,7 @@ export default defineComponent({
 
 		const optionsHighest = computed<number>({
 			get: () => {
-				const extraSettings = props.extraSettings as
-					LinearScaleExtraSettings | undefined
-				return extraSettings?.optionsHighest ?? 5
+				return extraSettings.value.optionsHighest ?? 5
 			},
 			set: (value: number) => {
 				question.onExtraSettingsChange({
@@ -189,9 +193,7 @@ export default defineComponent({
 
 		const optionsLabelLowest = computed<string>({
 			get: () => {
-				const extraSettings = props.extraSettings as
-					LinearScaleExtraSettings | undefined
-				return extraSettings?.optionsLabelLowest ?? defaultLowestLabel
+				return extraSettings.value.optionsLabelLowest ?? defaultLowestLabel
 			},
 			set: (value: string) => {
 				question.onExtraSettingsChange({
@@ -202,9 +204,7 @@ export default defineComponent({
 
 		const optionsLabelHighest = computed<string>({
 			get: () => {
-				const extraSettings = props.extraSettings as
-					LinearScaleExtraSettings | undefined
-				return extraSettings?.optionsLabelHighest ?? defaultHighestLabel
+				return extraSettings.value.optionsLabelHighest ?? defaultHighestLabel
 			},
 			set: (value: string) => {
 				question.onExtraSettingsChange({
@@ -221,7 +221,7 @@ export default defineComponent({
 			)
 		})
 
-		const questionValues = computed(() => props.values)
+		const questionValues = computed(() => values.value)
 
 		/**
 		 * ID for the label for the lowest option
@@ -258,7 +258,7 @@ export default defineComponent({
 		})
 
 		const validate = async (): Promise<boolean> => {
-			if (props.isRequired && props.values.length === 0) {
+			if (props.isRequired && values.value.length === 0) {
 				question.errorMessage.value = t(
 					'forms',
 					'You must answer this question',
diff --git a/src/components/Questions/QuestionLong.vue b/src/components/Questions/QuestionLong.vue
index a26a07a3a..507e4b51b 100644
--- a/src/components/Questions/QuestionLong.vue
+++ b/src/components/Questions/QuestionLong.vue
@@ -60,6 +60,11 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const textarea = ref<HTMLTextAreaElement | null>(null)
 		const question = useQuestion(props, { emit })
+		const values = computed(() => {
+			return props.values as Array<
+				string | number | readonly string[] | null | undefined
+			>
+		})
 
 		const submissionInputPlaceholder = computed(() => {
 			if (props.readOnly) {
@@ -69,7 +74,7 @@ export default defineComponent({
 		})
 
 		const textareaValue = computed(() => {
-			return (props.values[0] ?? null) as
+			return (values.value[0] ?? null) as
 				string | number | readonly string[] | null | undefined
 		})
 
@@ -83,7 +88,7 @@ export default defineComponent({
 		}
 
 		watch(
-			() => props.values,
+			() => values.value,
 			() => {
 				nextTick(() => {
 					autoSizeText()
@@ -95,7 +100,7 @@ export default defineComponent({
 		const validate = async (): Promise<boolean> => {
 			if (
 				props.isRequired
-				&& (props.values.length === 0 || props.values[0] === '')
+				&& (values.value.length === 0 || values.value[0] === '')
 			) {
 				question.errorMessage.value = t(
 					'forms',
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 2b28ea015..8d3ce11ec 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -5,6 +5,7 @@
 
 <template>
 	<Question
+		ref="rootElement"
 		v-bind="questionProps"
 		:titlePlaceholder="answerType.titlePlaceholder"
 		:warningInvalid="answerType.warningInvalid"
@@ -29,24 +30,24 @@
 			<template v-if="!isUnique">
 				<!-- Allow setting a minimum of options to be checked -->
 				<NcActionCheckbox
-					:modelValue="!!multipleSettings.optionsLimitMin"
+					:modelValue="!!extraSettings.optionsLimitMin"
 					@update:modelValue="
 						(checked) => onLimitOptionsMin(checked ? 1 : null)
 					">
 					{{ t('forms', 'Require a minimum of options to be checked') }}
 				</NcActionCheckbox>
 				<NcActionInput
-					v-if="multipleSettings.optionsLimitMin"
+					v-if="extraSettings.optionsLimitMin"
 					type="number"
 					:label="t('forms', 'Minimum options to be checked')"
 					:labelOutside="false"
 					:showTrailingButton="false"
-					:modelValue="multipleSettings.optionsLimitMin"
+					:modelValue="extraSettings.optionsLimitMin"
 					@update:modelValue="onLimitOptionsMin" />
 
 				<!-- Allow setting a maximum -->
 				<NcActionCheckbox
-					:modelValue="!!multipleSettings.optionsLimitMax"
+					:modelValue="!!extraSettings.optionsLimitMax"
 					@update:modelValue="
 						(checked) =>
 							onLimitOptionsMax(checked ? choices.length || 1 : null)
@@ -54,12 +55,12 @@
 					{{ t('forms', 'Require a maximum of options to be checked') }}
 				</NcActionCheckbox>
 				<NcActionInput
-					v-if="multipleSettings.optionsLimitMax"
+					v-if="extraSettings.optionsLimitMax"
 					type="number"
 					:label="t('forms', 'Maximum options to be checked')"
 					:labelOutside="false"
 					:showTrailingButton="false"
-					:modelValue="multipleSettings.optionsLimitMax"
+					:modelValue="extraSettings.optionsLimitMax"
 					@update:modelValue="onLimitOptionsMax" />
 			</template>
 			<NcActionButton closeAfterClick @click="isOptionDialogShown = true">
@@ -251,14 +252,19 @@ export default defineComponent({
 	],
 
 	setup(props, { emit }) {
-		const question = useQuestion(props, { emit })
-		const questionMultiple = useQuestionMultiple(props, { emit })
+		const rootElement = ref<{ $el?: HTMLElement } | null>(null)
 		const input = ref<
 			Array<{
 				focus?: () => void
 				$props?: { optionType?: string; index?: number }
 			} | null>
 		>([])
+		const isLoading = ref(false)
+		const questionMultiple = useQuestionMultiple(props, {
+			emit,
+			input,
+			isLoading,
+		})
 		/**
 		 * This is used to cache the "other" answer, meaning if the user:
 		 * checks "other" types text, unchecks "other" and then re-check "other" the typed text is preserved
@@ -266,9 +272,15 @@ export default defineComponent({
 		const cachedOtherAnswerText = ref('')
 		const isDragging = ref(false)
 		const isOptionDialogShown = ref(false)
-		const isLoading = ref(false)
 
 		const isUnique = computed(() => props.answerType.unique === true)
+		const values = computed(() => props.values as string[])
+		const extraSettings = computed<QuestionMultipleExtraSettings>(() => {
+			return (
+				(props.extraSettings as QuestionMultipleExtraSettings | undefined)
+				?? {}
+			)
+		})
 
 		const shiftDragHandle = computed(() => {
 			return (
@@ -290,27 +302,18 @@ export default defineComponent({
 		})
 
 		const questionValues = computed<string | string[] | undefined>(() => {
-			const values = props.values as string[]
-			return isUnique.value ? values?.[0] : values
-		})
-
-		const multipleSettings = computed<QuestionMultipleExtraSettings>(() => {
-			return (
-				(props.extraSettings as QuestionMultipleExtraSettings | undefined)
-				?? {}
-			)
+			return isUnique.value ? values.value?.[0] : values.value
 		})
 
 		const allowOtherAnswer = computed(() => {
-			return multipleSettings.value.allowOtherAnswer ?? false
+			return extraSettings.value.allowOtherAnswer ?? false
 		})
 
 		/**
 		 * The full "other" answer including prefix, undefined if no "other answer"
 		 */
 		const otherAnswer = computed<string | undefined>(() => {
-			const values = props.values as string[]
-			return values.find((v) =>
+			return values.value.find((v) =>
 				v.startsWith(QUESTION_EXTRASETTINGS_OTHER_PREFIX),
 			)
 		})
@@ -336,8 +339,8 @@ export default defineComponent({
 		})
 
 		const infoMessage = computed<string | null>(() => {
-			const min = multipleSettings.value.optionsLimitMin ?? 0
-			const max = multipleSettings.value.optionsLimitMax ?? 0
+			const min = extraSettings.value.optionsLimitMin ?? 0
+			const max = extraSettings.value.optionsLimitMax ?? 0
 
 			if (!min && !max) {
 				return null
@@ -375,6 +378,7 @@ export default defineComponent({
 				max,
 			)
 		})
+		const question = useQuestion(props, { emit, infoMessage, rootElement })
 
 		/**
 		 * Is the provided answer required ?
@@ -414,7 +418,6 @@ export default defineComponent({
 		}
 
 		const validate = async (): Promise<boolean> => {
-			const values = props.values as string[]
 			if (props.isRequired && questionMultiple.areNoneChecked.value) {
 				question.errorMessage.value = t(
 					'forms',
@@ -427,7 +430,7 @@ export default defineComponent({
 				// Validate limits
 				const max = multipleSettings.value.optionsLimitMax ?? 0
 				const min = multipleSettings.value.optionsLimitMin ?? 0
-				if (max && values.length > max) {
+				if (max && values.value.length > max) {
 					question.errorMessage.value = n(
 						'forms',
 						'You must choose at most one option',
@@ -436,7 +439,7 @@ export default defineComponent({
 					)
 					return false
 				}
-				if (min && values.length < min) {
+				if (min && values.value.length < min) {
 					question.errorMessage.value = n(
 						'forms',
 						'You must choose at least one option',
@@ -516,7 +519,7 @@ export default defineComponent({
 					return
 				}
 
-				if ((multipleSettings.value.optionsLimitMin ?? 0) > parsedMax) {
+				if ((extraSettings.value.optionsLimitMin ?? 0) > parsedMax) {
 					showError(
 						t(
 							'forms',
@@ -555,8 +558,8 @@ export default defineComponent({
 				}
 
 				if (
-					multipleSettings.value.optionsLimitMax
-					&& parsedMin > multipleSettings.value.optionsLimitMax
+					extraSettings.value.optionsLimitMax
+					&& parsedMin > extraSettings.value.optionsLimitMax
 				) {
 					showError(
 						t(
@@ -607,7 +610,7 @@ export default defineComponent({
 				isUnique.value
 					? [prefixedValue]
 					: [
-							...(props.values as string[]).filter(
+							...values.value.filter(
 								(v) =>
 									!v.startsWith(
 										QUESTION_EXTRASETTINGS_OTHER_PREFIX,
@@ -645,7 +648,6 @@ export default defineComponent({
 			IconCheckboxBlankOutline,
 			IconContentPaste,
 			IconRadioboxBlank,
-			multipleSettings,
 			onAllowOtherAnswerChange,
 			onChange,
 			onChangeOther,
@@ -661,6 +663,7 @@ export default defineComponent({
 			QUESTION_EXTRASETTINGS_OTHER_PREFIX,
 			questionValues,
 			resetOtherAnswerText,
+			rootElement,
 			shiftDragHandle,
 			t,
 			validate,
diff --git a/src/components/Questions/QuestionRanking.vue b/src/components/Questions/QuestionRanking.vue
index 620aec4d2..9cb76604d 100644
--- a/src/components/Questions/QuestionRanking.vue
+++ b/src/components/Questions/QuestionRanking.vue
@@ -202,14 +202,7 @@ import IconDragIndicator from '@material-symbols/svg-400/outlined/drag_indicator
 import IconArrowDown from '@material-symbols/svg-400/outlined/keyboard_arrow_down.svg?raw'
 import IconArrowUp from '@material-symbols/svg-400/outlined/keyboard_arrow_up.svg?raw'
 import { t } from '@nextcloud/l10n'
-import {
-	computed,
-	defineComponent,
-	getCurrentInstance,
-	nextTick,
-	ref,
-	watch,
-} from 'vue'
+import { computed, defineComponent, nextTick, ref, watch } from 'vue'
 import { VueDraggable as Draggable } from 'vue-draggable-plus'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
@@ -252,17 +245,29 @@ export default defineComponent({
 
 	setup(props, { emit }) {
 		const question = useQuestion(props, { emit })
-		const questionMultiple = useQuestionMultiple(props, { emit })
-		const instance = getCurrentInstance()
+		const values = computed<Array<number | string>>(() => {
+			return Array.isArray(props.values) ? props.values : []
+		})
 		const input = ref<
 			Array<{
 				focus?: () => void
 				$props?: { optionType?: string; index?: number }
 			} | null>
 		>([])
+		const isLoading = ref(false)
+		const questionMultiple = useQuestionMultiple(props, {
+			emit,
+			input,
+			isLoading,
+		})
+		const buttonOptionUp = ref<Array<{ $el?: { focus?: () => void } } | null>>(
+			[],
+		)
+		const buttonOptionDown = ref<Array<{ $el?: { focus?: () => void } } | null>>(
+			[],
+		)
 		const isDragging = ref(false)
 		const isRanking = ref(false)
-		const isLoading = ref(false)
 		const isOptionDialogShown = ref(false)
 		const rankedOptions = ref<FormsOption[]>([])
 		const unrankedOptions = ref<FormsOption[]>([])
@@ -309,12 +314,12 @@ export default defineComponent({
 				OptionType.Choice,
 			)
 
-			if (props.values && props.values.length > 0) {
+			if (values.value.length > 0) {
 				// Restore order from saved values (array of option IDs)
 				const byId = Object.fromEntries(
 					sorted.map((option) => [option.id, option]),
 				) as Record<number, FormsOption>
-				rankedOptions.value = props.values
+				rankedOptions.value = values.value
 					.map((id) => byId[parseInt(String(id), 10)])
 					.filter((option): option is FormsOption => Boolean(option))
 				unrankedOptions.value = sorted.filter(
@@ -395,10 +400,15 @@ export default defineComponent({
 		 * @param refName The ref name ('buttonOptionUp' or 'buttonOptionDown')
 		 * @param index The index of the item in the v-for
 		 */
-		const focusButton = (refName: string, index: number): void => {
+		const focusButton = (
+			refName: 'buttonOptionUp' | 'buttonOptionDown',
+			index: number,
+		): void => {
 			nextTick(() => {
-				const refs = instance?.proxy?.$refs?.[refName] as
-					Array<{ $el?: { focus?: () => void } }> | undefined
+				const refs =
+					refName === 'buttonOptionUp'
+						? buttonOptionUp.value
+						: buttonOptionDown.value
 				if (Array.isArray(refs) && refs[index]) {
 					refs[index].$el?.focus?.()
 				}
@@ -476,6 +486,8 @@ export default defineComponent({
 		return {
 			...question,
 			...questionMultiple,
+			buttonOptionDown,
+			buttonOptionUp,
 			choices,
 			input,
 			initRankedOptions,
@@ -502,6 +514,7 @@ export default defineComponent({
 			unrankedOptions,
 			unrankOption,
 			validate,
+			values,
 		}
 	},
 })
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index d7c79dd83..a1c5a5462 100644
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@@ -97,6 +97,11 @@ import { INPUT_DEBOUNCE_MS } from '../../models/Constants.ts'
 import validationTypes from '../../models/ValidationTypes.ts'
 import { splitRegex, validateExpression } from '../../utils/RegularExpression.ts'
 
+type QuestionShortExtraSettings = {
+	validationRegex?: string
+	validationType?: string
+}
+
 export default defineComponent({
 	name: 'QuestionShort',
 
@@ -120,15 +125,22 @@ export default defineComponent({
 			}
 		} | null>(null)
 		const isValidationTypeMenuOpen = ref(false)
+		const values = computed(() => {
+			return props.values as Array<
+				string | number | readonly string[] | null | undefined
+			>
+		})
+		const extraSettings = computed(() => {
+			return (
+				(props.extraSettings as QuestionShortExtraSettings | undefined) ?? {}
+			)
+		})
 
 		/**
 		 * Name of the current validation type, fallsback to 'text'
 		 */
 		const validationType = computed(() => {
-			return (
-				(props.extraSettings as { validationType?: string } | undefined)
-					?.validationType || 'text'
-			)
+			return extraSettings.value.validationType || 'text'
 		})
 
 		/**
@@ -149,10 +161,7 @@ export default defineComponent({
 		 * The regular expression
 		 */
 		const validationRegex = computed(() => {
-			return (
-				(props.extraSettings as { validationRegex?: string } | undefined)
-					?.validationRegex || ''
-			)
+			return extraSettings.value.validationRegex || ''
 		})
 
 		const submissionInputPlaceholder = computed(() => {
@@ -169,7 +178,7 @@ export default defineComponent({
 		})
 
 		const inputValue = computed(() => {
-			return (props.values[0] ?? null) as
+			return (values.value[0] ?? null) as
 				string | number | readonly string[] | null | undefined
 		})
 
diff --git a/src/components/SidebarTabs/SettingsSidebarTab.vue b/src/components/SidebarTabs/SettingsSidebarTab.vue
index b16e2f85d..2faad8007 100644
--- a/src/components/SidebarTabs/SettingsSidebarTab.vue
+++ b/src/components/SidebarTabs/SettingsSidebarTab.vue
@@ -281,7 +281,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { vOnClickOutside as ClickOutside } from '@vueuse/components'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, inject, ref, watch } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePicker'
@@ -329,8 +329,6 @@ export default defineComponent({
 		ClickOutside,
 	},
 
-	inject: ['$markdownit'],
-
 	props: {
 		form: {
 			type: Object,
@@ -350,210 +348,162 @@ export default defineComponent({
 
 	emits: ['update:formProp'],
 
-	setup() {
+	setup(props, { emit }) {
 		const { SHARE_TYPES } = useShareTypes()
-
-		return {
-			t,
-			SHARE_TYPES,
-		}
-	},
-
-	data(): {
-		formatter: {
-			stringify: (datetime: Date | [Date, Date] | null) => string
-			parse: (value: number) => Date
-		}
-		appConfig: SettingsAppConfig
-		maxStringLengths: Record<string, number>
-		editMessage: boolean
-		svgLockOpen: string
-		confirmationEmailSubject: string
-		confirmationEmailBody: string
-	} {
-		return {
-			formatter: {
-				stringify: (datetime: Date | [Date, Date] | null) => {
-					if (datetime instanceof Date) {
-						return this.stringifyDate(datetime)
-					}
-					return this.stringifyDate(new Date())
-				},
-
-				parse: this.parseTimestampToDate,
-			},
-
-			appConfig: loadState(formsAppName, 'appConfig') as SettingsAppConfig,
-			maxStringLengths: loadState(formsAppName, 'maxStringLengths'),
-			/** If custom submission message is shown as input or rendered markdown */
-			editMessage: false,
-			svgLockOpen,
-			confirmationEmailSubject: '',
-			confirmationEmailBody: '',
-		}
-	},
-
-	computed: {
-		isCurrentUserOwner(): boolean {
-			return getCurrentUser()?.uid === this.form.ownerId
-		},
-
-		isFormLockedPermanently(): boolean {
-			return this.locked && this.form.lockedUntil === 0
-		},
+		const appConfig = ref<SettingsAppConfig>(
+			loadState(formsAppName, 'appConfig') as SettingsAppConfig,
+		)
+		const maxStringLengths = ref<Record<string, number>>(
+			loadState(formsAppName, 'maxStringLengths'),
+		)
+		const editMessage = ref(false)
+		const confirmationEmailSubject = ref('')
+		const confirmationEmailBody = ref('')
+		const isCurrentUserOwner = computed(
+			() => getCurrentUser()?.uid === props.form.ownerId,
+		)
+		const isFormLockedPermanently = computed(
+			() => props.locked && props.form.lockedUntil === 0,
+		)
 
 		/**
 		 * If the form has a custom submission message or the user wants to add one (settings switch)
 		 */
-		hasCustomSubmissionMessage(): boolean {
-			return (
-				this.form?.submissionMessage !== undefined
-				&& this.form?.submissionMessage !== null
-			)
-		},
+		const hasCustomSubmissionMessage = computed(
+			() =>
+				props.form?.submissionMessage !== undefined
+				&& props.form?.submissionMessage !== null,
+		)
+		const hasPublicLink = computed(
+			() =>
+				props.form.shares.filter(
+					(share) => share.shareType === SHARE_TYPES.SHARE_TYPE_LINK,
+				).length !== 0,
+		)
 
 		/**
 		 * Submit Multiple is disabled, if it cannot be controlled.
 		 */
-		disableSubmitMultiple(): boolean {
-			return this.hasPublicLink || this.form.isAnonymous
-		},
-
-		disableSubmitMultipleExplanation(): string {
-			if (this.disableSubmitMultiple) {
+		const disableSubmitMultiple = computed(
+			() => hasPublicLink.value || props.form.isAnonymous,
+		)
+		const disableSubmitMultipleExplanation = computed(() => {
+			if (disableSubmitMultiple.value) {
 				return t(
 					'forms',
 					'This can not be controlled, if the form has a public link or stores responses anonymously.',
 				)
 			}
 			return ''
-		},
-
-		hasPublicLink(): boolean {
-			return (
-				this.form.shares.filter(
-					(share) => share.shareType === this.SHARE_TYPES.SHARE_TYPE_LINK,
-				).length !== 0
-			)
-		},
+		})
 
 		// If disabled, submitMultiple will be casted to true
-		submitMultiple(): boolean {
-			return this.disableSubmitMultiple || this.form.submitMultiple
-		},
-
-		formExpires(): boolean {
-			return this.form.expires !== 0
-		},
-
-		formArchived(): boolean {
-			return this.form.state === FormState.FormArchived
-		},
-
-		formClosed(): boolean {
-			return this.form.state !== FormState.FormActive
-		},
-
-		hasMaxSubmissions(): boolean {
+		const submitMultiple = computed(
+			() => disableSubmitMultiple.value || props.form.submitMultiple,
+		)
+		const formExpires = computed(() => props.form.expires !== 0)
+		const formArchived = computed(
+			() => props.form.state === FormState.FormArchived,
+		)
+		const formClosed = computed(() => props.form.state !== FormState.FormActive)
+		const hasMaxSubmissions = computed(
+			() =>
+				props.form.maxSubmissions !== null
+				&& props.form.maxSubmissions !== undefined,
+		)
+		const maxSubmissionsValue = computed(() => props.form.maxSubmissions ?? 1)
+		const isExpired = computed(
+			() => props.form.expires && moment().unix() > props.form.expires,
+		)
+		const expirationDate = computed(() =>
+			moment(props.form.expires, 'X').toDate(),
+		)
+		const injectMarkdownit = (): MarkdownRenderer => {
 			return (
-				this.form.maxSubmissions !== null
-				&& this.form.maxSubmissions !== undefined
+				(inject('$markdownit', {
+					render: (input: string) => input,
+				}) as MarkdownRenderer) ?? {
+					render: (input: string) => input,
+				}
 			)
-		},
-
-		maxSubmissionsValue(): number {
-			return this.form.maxSubmissions ?? 1
-		},
-
-		isExpired(): boolean {
-			return this.form.expires && moment().unix() > this.form.expires
-		},
-
-		expirationDate(): Date {
-			return moment(this.form.expires, 'X').toDate()
-		},
+		}
 
 		/**
 		 * The submission message rendered as HTML
 		 */
-		submissionMessageHTML(): string {
-			return (this.$markdownit as MarkdownRenderer).render(
-				this.form.submissionMessage || '',
-			)
-		},
-
-		emailBodyPlaceholder(): string {
-			return t(
+		const submissionMessageHTML = computed(() => {
+			const markdownit = injectMarkdownit()
+			return markdownit.render(props.form.submissionMessage || '')
+		})
+		const emailBodyPlaceholder = computed(() =>
+			t(
 				'forms',
 				'Hello,\n\nThank you for submitting the form "{formTitle}".\n\nBest regards',
-			)
-		},
-
-		emailQuestionCount(): number {
-			return this.confirmationEmailQuestions.length
-		},
-
-		confirmationEmailQuestions(): FormsQuestion[] {
-			const questions = this.form?.questions || []
+			),
+		)
+		const confirmationEmailQuestions = computed(() => {
+			const questions = props.form?.questions || []
 			return questions.filter(
 				(question: FormsQuestion) =>
 					question.type === 'short'
 					&& question.extraSettings?.validationType === 'email',
 			)
-		},
-
-		selectedConfirmationEmailQuestion(): FormsQuestion | null {
-			const selectedQuestion = this.confirmationEmailQuestions.find(
+		})
+		const emailQuestionCount = computed(
+			() => confirmationEmailQuestions.value.length,
+		)
+		const selectedConfirmationEmailQuestion = computed(() => {
+			const selectedQuestion = confirmationEmailQuestions.value.find(
 				(question: FormsQuestion) =>
-					question.id === this.form.confirmationEmailQuestionId,
+					question.id === props.form.confirmationEmailQuestionId,
 			)
 			if (selectedQuestion) {
 				return selectedQuestion
 			}
 
 			if (
-				this.form.confirmationEmailQuestionId === null
-				&& this.emailQuestionCount === 1
+				props.form.confirmationEmailQuestionId === null
+				&& emailQuestionCount.value === 1
 			) {
-				return this.confirmationEmailQuestions[0]
+				return confirmationEmailQuestions.value[0]
 			}
-
 			return null
-		},
-
-		selectedConfirmationEmailQuestionId(): number | string {
-			return (
-				this.form.confirmationEmailQuestionId
-				?? this.selectedConfirmationEmailQuestion?.id
-				?? ''
-			)
-		},
-
-		confirmationEmailQuestionOptions(): ConfirmationEmailQuestionOption[] {
-			return this.confirmationEmailQuestions.map((question) => ({
+		})
+		const selectedConfirmationEmailQuestionId = computed(
+			() =>
+				props.form.confirmationEmailQuestionId
+				?? selectedConfirmationEmailQuestion.value?.id
+				?? '',
+		)
+		const confirmationEmailQuestionLabel = (question: FormsQuestion): string =>
+			question.text || t('forms', 'Untitled question')
+		const confirmationEmailQuestionOptions = computed(() =>
+			confirmationEmailQuestions.value.map((question) => ({
 				id: question.id,
-				label: this.confirmationEmailQuestionLabel(question),
-			}))
-		},
-
-		selectedConfirmationEmailQuestionOption(): ConfirmationEmailQuestionOption | null {
-			return (
-				this.confirmationEmailQuestionOptions.find(
+				label: confirmationEmailQuestionLabel(question),
+			})),
+		)
+		const selectedConfirmationEmailQuestionOption = computed(
+			() =>
+				confirmationEmailQuestionOptions.value.find(
 					(question) =>
-						question.id === this.selectedConfirmationEmailQuestionId,
-				) || null
-			)
-		},
-
-		confirmationEmailErrorText(): string {
-			if (this.emailQuestionCount === 0) {
+						question.id === selectedConfirmationEmailQuestionId.value,
+				) || null,
+		)
+		const requiresConfirmationEmailQuestionIdSelection = computed(
+			() =>
+				emailQuestionCount.value > 1
+				&& !selectedConfirmationEmailQuestion.value,
+		)
+		const confirmationEmailErrorText = computed(() => {
+			if (emailQuestionCount.value === 0) {
 				return t(
 					'forms',
 					'Add at least one email field before confirmation emails can be used.',
 				)
 			}
 
-			if (this.requiresConfirmationEmailQuestionIdSelection) {
+			if (requiresConfirmationEmailQuestionIdSelection.value) {
 				return t(
 					'forms',
 					'Select which email field should receive confirmation emails before finishing this setup.',
@@ -561,289 +511,307 @@ export default defineComponent({
 			}
 
 			return ''
-		},
-
-		confirmationEmailNoteCardType(): 'warning' | 'info' {
-			if (this.requiresConfirmationEmailQuestionIdSelection) {
+		})
+		const confirmationEmailNoteCardType = computed<'warning' | 'info'>(() => {
+			if (requiresConfirmationEmailQuestionIdSelection.value) {
 				return 'warning'
 			}
 			return 'info'
-		},
+		})
+		const isConfirmationEmailConfigurationBlocked = computed(
+			() =>
+				props.form.confirmationEmailEnabled
+				&& (emailQuestionCount.value === 0
+					|| requiresConfirmationEmailQuestionIdSelection.value),
+		)
 
-		requiresConfirmationEmailQuestionIdSelection(): boolean {
-			return (
-				this.emailQuestionCount > 1
-				&& !this.selectedConfirmationEmailQuestion
-			)
-		},
+		/**
+		 * Datepicker timestamp to string
+		 *
+		 * @param datetime the datepicker Date
+		 * @return
+		 */
+		const stringifyDate = (datetime: Date): string => {
+			const date = moment(datetime).format('LLL')
+			if (isExpired.value) {
+				return t('forms', 'Expired on {date}', { date })
+			}
+			return t('forms', 'Expires on {date}', { date })
+		}
 
-		isConfirmationEmailConfigurationBlocked(): boolean {
-			return (
-				this.form.confirmationEmailEnabled
-				&& (this.emailQuestionCount === 0
-					|| this.requiresConfirmationEmailQuestionIdSelection)
-			)
-		},
-	},
+		/**
+		 * Form expires timestamp to Date of the datepicker
+		 *
+		 * @param value the expires timestamp
+		 * @return
+		 */
+		const parseTimestampToDate = (value: number): Date =>
+			moment(value, 'X').toDate()
 
-	watch: {
-		'form.confirmationEmailSubject': {
-			handler(val: string | null | undefined) {
-				this.confirmationEmailSubject = val || ''
-			},
+		/**
+		 * Prevent selecting a day before today
+		 *
+		 * @param datetime the datepicker Date
+		 * @return
+		 */
+		const notBeforeToday = (datetime: Date): boolean =>
+			datetime < moment().add(-1, 'day').toDate()
 
-			immediate: true,
-		},
+		/**
+		 * Prevent selecting a time before the current one
+		 *
+		 * @param datetime the datepicker Date
+		 * @return
+		 */
+		const notBeforeNow = (datetime: Date): boolean =>
+			datetime < moment().toDate()
 
-		'form.confirmationEmailBody': {
-			handler(val: string | null | undefined) {
-				this.confirmationEmailBody = val || ''
+		const saveConfirmationEmailQuestionId = (
+			selectedQuestionId: number | null,
+		): void => {
+			if (props.form.confirmationEmailQuestionId === selectedQuestionId) {
+				return
+			}
+			emit(
+				'update:formProp',
+				'confirmationEmailQuestionId',
+				selectedQuestionId,
+			)
+		}
+		watch(
+			() => props.form.confirmationEmailSubject,
+			(val) => {
+				confirmationEmailSubject.value = val || ''
 			},
-
-			immediate: true,
-		},
-
-		confirmationEmailQuestions: {
-			handler() {
-				const selectedRecipientId = this.form.confirmationEmailQuestionId
+			{ immediate: true },
+		)
+		watch(
+			() => props.form.confirmationEmailBody,
+			(val) => {
+				confirmationEmailBody.value = val || ''
+			},
+			{ immediate: true },
+		)
+		watch(
+			confirmationEmailQuestions,
+			() => {
+				const selectedRecipientId = props.form.confirmationEmailQuestionId
 				const hasValidSelectedRecipient =
 					selectedRecipientId !== null
-					&& this.confirmationEmailQuestions.some(
+					&& confirmationEmailQuestions.value.some(
 						(question) => question.id === selectedRecipientId,
 					)
 
 				if (selectedRecipientId !== null && !hasValidSelectedRecipient) {
-					if (this.emailQuestionCount === 1) {
-						this.saveConfirmationEmailQuestionId(
-							this.confirmationEmailQuestions[0].id,
+					if (emailQuestionCount.value === 1) {
+						saveConfirmationEmailQuestionId(
+							confirmationEmailQuestions.value[0].id,
 						)
 					} else {
-						this.saveConfirmationEmailQuestionId(null)
+						saveConfirmationEmailQuestionId(null)
 					}
 					return
 				}
 
 				if (
-					this.form.confirmationEmailEnabled
-					&& this.emailQuestionCount === 1
-					&& this.form.confirmationEmailQuestionId === null
+					props.form.confirmationEmailEnabled
+					&& emailQuestionCount.value === 1
+					&& props.form.confirmationEmailQuestionId === null
 				) {
-					this.saveConfirmationEmailQuestionId(
-						this.confirmationEmailQuestions[0].id,
+					saveConfirmationEmailQuestionId(
+						confirmationEmailQuestions.value[0].id,
 					)
 				}
 			},
-
-			deep: true,
-		},
-	},
-
-	methods: {
-		confirmationEmailQuestionLabel(question: FormsQuestion): string {
-			return question.text || t('forms', 'Untitled question')
-		},
+			{ deep: true },
+		)
 
 		/**
 		 * Save Form-Properties
 		 *
 		 * @param checked New Checkbox/Switch Value to use
 		 */
-		onAnonChange(checked: boolean): void {
-			this.$emit('update:formProp', 'isAnonymous', checked)
-		},
-
-		onSubmitMultipleChange(checked: boolean): void {
-			this.$emit('update:formProp', 'submitMultiple', checked)
-		},
-
-		onAllowEditSubmissionsChange(checked: boolean): void {
-			this.$emit('update:formProp', 'allowEditSubmissions', checked)
-		},
-
-		onAllowCommentsChange(checked: boolean): void {
-			this.$emit('update:formProp', 'allowComments', checked)
-		},
-
-		onFormExpiresChange(checked: boolean): void {
+		const onAnonChange = (checked: boolean): void => {
+			emit('update:formProp', 'isAnonymous', checked)
+		}
+		const onSubmitMultipleChange = (checked: boolean): void => {
+			emit('update:formProp', 'submitMultiple', checked)
+		}
+		const onAllowEditSubmissionsChange = (checked: boolean): void => {
+			emit('update:formProp', 'allowEditSubmissions', checked)
+		}
+		const onAllowCommentsChange = (checked: boolean): void => {
+			emit('update:formProp', 'allowComments', checked)
+		}
+		const onFormExpiresChange = (checked: boolean): void => {
 			if (checked) {
-				this.$emit(
-					'update:formProp',
-					'expires',
-					moment().add(1, 'hour').unix(),
-				) // Expires in one hour.
+				emit('update:formProp', 'expires', moment().add(1, 'hour').unix())
 			} else {
-				this.$emit('update:formProp', 'expires', 0)
+				emit('update:formProp', 'expires', 0)
 			}
-		},
-
-		onShowExpirationChange(checked: boolean): void {
-			this.$emit('update:formProp', 'showExpiration', checked)
-		},
+		}
+		const onShowExpirationChange = (checked: boolean): void => {
+			emit('update:formProp', 'showExpiration', checked)
+		}
 
 		/**
 		 * On date picker change
 		 *
 		 * @param datetime the expiration Date
 		 */
-		onExpirationDateChange(datetime: Date | [Date, Date] | null): void {
+		const onExpirationDateChange = (
+			datetime: Date | [Date, Date] | null,
+		): void => {
 			if (!(datetime instanceof Date)) {
 				return
 			}
-			this.$emit(
+			emit(
 				'update:formProp',
 				'expires',
 				parseInt(moment(datetime).format('X')),
 			)
-		},
-
-		onMaxSubmissionsChange(checked: boolean): void {
-			this.$emit('update:formProp', 'maxSubmissions', checked ? 1 : null)
-		},
-
-		onMaxSubmissionsValueChange(value: string | number): void {
+		}
+		const onMaxSubmissionsChange = (checked: boolean): void => {
+			emit('update:formProp', 'maxSubmissions', checked ? 1 : null)
+		}
+		const onMaxSubmissionsValueChange = (value: string | number): void => {
 			const parsedValue = Number(value)
 			if (parsedValue > 0) {
-				this.$emit('update:formProp', 'maxSubmissions', parsedValue)
+				emit('update:formProp', 'maxSubmissions', parsedValue)
 			}
-		},
-
-		onFormClosedChange(isClosed: boolean): void {
-			this.$emit(
+		}
+		const onFormClosedChange = (isClosed: boolean): void => {
+			emit(
 				'update:formProp',
 				'state',
 				isClosed ? FormState.FormClosed : FormState.FormActive,
 			)
-		},
-
-		onFormLockChange(locked: boolean): void {
-			this.$emit('update:formProp', 'lockedUntil', locked ? 0 : null)
-		},
-
-		onFormArchivedChange(isArchived: boolean): void {
-			this.$emit(
+		}
+		const onFormLockChange = (locked: boolean): void => {
+			emit('update:formProp', 'lockedUntil', locked ? 0 : null)
+		}
+		const onFormArchivedChange = (isArchived: boolean): void => {
+			emit(
 				'update:formProp',
 				'state',
 				isArchived ? FormState.FormArchived : FormState.FormClosed,
 			)
-		},
-
-		onSubmissionMessageChange(event: Event): void {
-			this.$emit(
+		}
+		const onSubmissionMessageChange = (event: Event): void => {
+			emit(
 				'update:formProp',
 				'submissionMessage',
 				(event.target as HTMLTextAreaElement).value,
 			)
-		},
+		}
 
 		/**
 		 * Enable or disable the whole custom submission message
 		 * Disabled means the value is set to null.
 		 */
-		onUpdateHasCustomSubmissionMessage(): void {
-			if (this.hasCustomSubmissionMessage) {
-				this.$emit('update:formProp', 'submissionMessage', null)
+		const onUpdateHasCustomSubmissionMessage = (): void => {
+			if (hasCustomSubmissionMessage.value) {
+				emit('update:formProp', 'submissionMessage', null)
 			} else {
-				this.$emit('update:formProp', 'submissionMessage', '')
+				emit('update:formProp', 'submissionMessage', '')
 			}
-		},
-
-		onConfirmationEmailEnabledChange(checked: boolean): void {
+		}
+		const onConfirmationEmailEnabledChange = (checked: boolean): void => {
 			if (
 				checked
-				&& this.form.confirmationEmailQuestionId === null
-				&& this.emailQuestionCount === 1
+				&& props.form.confirmationEmailQuestionId === null
+				&& emailQuestionCount.value === 1
 			) {
-				this.saveConfirmationEmailQuestionId(
-					this.confirmationEmailQuestions[0].id,
+				saveConfirmationEmailQuestionId(
+					confirmationEmailQuestions.value[0].id,
 				)
 			}
-
-			this.$emit('update:formProp', 'confirmationEmailEnabled', checked)
-		},
-
-		onConfirmationEmailSubjectChange(): void {
-			this.$emit(
+			emit('update:formProp', 'confirmationEmailEnabled', checked)
+		}
+		const onConfirmationEmailSubjectChange = (): void => {
+			emit(
 				'update:formProp',
 				'confirmationEmailSubject',
-				this.confirmationEmailSubject,
+				confirmationEmailSubject.value,
 			)
-		},
-
-		onConfirmationEmailBodyChange(): void {
-			this.$emit(
+		}
+		const onConfirmationEmailBodyChange = (): void => {
+			emit(
 				'update:formProp',
 				'confirmationEmailBody',
-				this.confirmationEmailBody,
+				confirmationEmailBody.value,
 			)
-		},
-
-		onConfirmationEmailQuestionIdSelectionChange(
+		}
+		const onConfirmationEmailQuestionIdSelectionChange = (
 			option: ConfirmationEmailQuestionOption | null,
-		): void {
+		): void => {
 			const questionId = option?.id ?? null
 			if (questionId === null) {
 				return
 			}
+			saveConfirmationEmailQuestionId(questionId)
+		}
 
-			this.saveConfirmationEmailQuestionId(questionId)
-		},
-
-		saveConfirmationEmailQuestionId(selectedQuestionId: number | null): void {
-			if (this.form.confirmationEmailQuestionId === selectedQuestionId) {
-				return
-			}
-
-			this.$emit(
-				'update:formProp',
-				'confirmationEmailQuestionId',
-				selectedQuestionId,
-			)
-		},
-
-		/**
-		 * Datepicker timestamp to string
-		 *
-		 * @param datetime the datepicker Date
-		 * @return
-		 */
-		stringifyDate(datetime: Date): string {
-			const date = moment(datetime).format('LLL')
-
-			if (this.isExpired) {
-				return t('forms', 'Expired on {date}', { date })
-			}
-			return t('forms', 'Expires on {date}', { date })
-		},
-
-		/**
-		 * Form expires timestamp to Date of the datepicker
-		 *
-		 * @param value the expires timestamp
-		 * @return
-		 */
-		parseTimestampToDate(value: number): Date {
-			return moment(value, 'X').toDate()
-		},
-
-		/**
-		 * Prevent selecting a day before today
-		 *
-		 * @param datetime the datepicker Date
-		 * @return
-		 */
-		notBeforeToday(datetime: Date): boolean {
-			return datetime < moment().add(-1, 'day').toDate()
-		},
-
-		/**
-		 * Prevent selecting a time before the current one
-		 *
-		 * @param datetime the datepicker Date
-		 * @return
-		 */
-		notBeforeNow(datetime: Date): boolean {
-			return datetime < moment().toDate()
-		},
+		return {
+			t,
+			SHARE_TYPES,
+			appConfig,
+			maxStringLengths,
+			editMessage,
+			svgLockOpen,
+			confirmationEmailSubject,
+			confirmationEmailBody,
+			isCurrentUserOwner,
+			isFormLockedPermanently,
+			hasCustomSubmissionMessage,
+			disableSubmitMultiple,
+			disableSubmitMultipleExplanation,
+			hasPublicLink,
+			submitMultiple,
+			formExpires,
+			formArchived,
+			formClosed,
+			hasMaxSubmissions,
+			maxSubmissionsValue,
+			isExpired,
+			expirationDate,
+			submissionMessageHTML,
+			emailBodyPlaceholder,
+			emailQuestionCount,
+			confirmationEmailQuestions,
+			selectedConfirmationEmailQuestion,
+			selectedConfirmationEmailQuestionId,
+			confirmationEmailQuestionOptions,
+			selectedConfirmationEmailQuestionOption,
+			confirmationEmailErrorText,
+			confirmationEmailNoteCardType,
+			requiresConfirmationEmailQuestionIdSelection,
+			isConfirmationEmailConfigurationBlocked,
+			confirmationEmailQuestionLabel,
+			stringifyDate,
+			parseTimestampToDate,
+			notBeforeToday,
+			notBeforeNow,
+			onAnonChange,
+			onSubmitMultipleChange,
+			onAllowEditSubmissionsChange,
+			onAllowCommentsChange,
+			onFormExpiresChange,
+			onShowExpirationChange,
+			onExpirationDateChange,
+			onMaxSubmissionsChange,
+			onMaxSubmissionsValueChange,
+			onFormClosedChange,
+			onFormLockChange,
+			onFormArchivedChange,
+			onSubmissionMessageChange,
+			onUpdateHasCustomSubmissionMessage,
+			onConfirmationEmailEnabledChange,
+			onConfirmationEmailSubjectChange,
+			onConfirmationEmailBodyChange,
+			onConfirmationEmailQuestionIdSelectionChange,
+			saveConfirmationEmailQuestionId,
+		}
 	},
 })
 </script>
diff --git a/src/components/SidebarTabs/SharingSearchDiv.vue b/src/components/SidebarTabs/SharingSearchDiv.vue
index 3a6389df1..ed187fb20 100644
--- a/src/components/SidebarTabs/SharingSearchDiv.vue
+++ b/src/components/SidebarTabs/SharingSearchDiv.vue
@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import { t } from '@nextcloud/l10n'
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, onMounted } from 'vue'
 import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
 import { useUserSearch } from '../../composables/useUserSearch.ts'
 
@@ -61,7 +61,7 @@ export default defineComponent({
 
 	emits: ['addShare'],
 
-	setup(props) {
+	setup(props, { emit }) {
 		const userSearch = useUserSearch()
 		const options = computed(() => {
 			const currentShares = props.currentShares as CurrentShareLike[]
@@ -82,26 +82,12 @@ export default defineComponent({
 			() => props.showLoading || userSearch.loading.value,
 		)
 
-		return {
-			...userSearch,
-			options,
-			showLoadingCircle,
-			t,
-		}
-	},
-
-	mounted() {
-		// Preloading recommendations
-		this.getRecommendations()
-	},
-
-	methods: {
 		/**
 		 * Format share for form.shares and add it.
 		 *
 		 * @param share New share to share with, format still for multiselect.
 		 */
-		addShare(share: unknown): void {
+		const addShare = (share: unknown): void => {
 			const selectedShare = Array.isArray(share) ? share[0] : share
 			if (!selectedShare || typeof selectedShare !== 'object') {
 				return
@@ -120,8 +106,21 @@ export default defineComponent({
 
 				shareType: Number(selectedShare.shareType),
 			}
-			this.$emit('addShare', newShare)
-		},
+			emit('addShare', newShare)
+		}
+
+		// Preloading recommendations
+		onMounted(() => {
+			void userSearch.getRecommendations()
+		})
+
+		return {
+			...userSearch,
+			addShare,
+			options,
+			showLoadingCircle,
+			t,
+		}
 	},
 })
 </script>
diff --git a/src/components/SidebarTabs/SharingShareDiv.vue b/src/components/SidebarTabs/SharingShareDiv.vue
index 6b3c4dea4..95cc690b5 100644
--- a/src/components/SidebarTabs/SharingShareDiv.vue
+++ b/src/components/SidebarTabs/SharingShareDiv.vue
@@ -48,7 +48,7 @@
 <script lang="ts">
 import IconClose from '@material-symbols/svg-400/outlined/close.svg?raw'
 import { t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCaption from '@nextcloud/vue/components/NcActionCaption'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
@@ -97,114 +97,105 @@ export default defineComponent({
 
 	emits: ['removeShare', 'update:share'],
 
-	setup() {
+	setup(props, { emit }) {
 		const { SHARE_TYPES } = useShareTypes()
-
-		return {
-			t,
-			IconClose,
-			SHARE_TYPES,
-		}
-	},
-
-	computed: {
-		canAccessResults(): boolean {
-			return this.share.permissions.includes(
-				PERMISSION_TYPES.PERMISSION_RESULTS,
-			)
-		},
-
-		canDeleteResults(): boolean {
-			return this.share.permissions.includes(
+		const canAccessResults = computed(() =>
+			props.share.permissions.includes(PERMISSION_TYPES.PERMISSION_RESULTS),
+		)
+		const canDeleteResults = computed(() =>
+			props.share.permissions.includes(
 				PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
-			)
-		},
-
-		canEditForm(): boolean {
-			return this.share.permissions.includes(PERMISSION_TYPES.PERMISSION_EDIT)
-		},
-
-		isNoUser(): boolean {
-			return this.share.shareType !== this.SHARE_TYPES.SHARE_TYPE_USER
-		},
-
-		displayName(): string {
-			return !this.share.displayName
-				? this.share.shareWith
-				: this.share.displayName
-		},
-
-		displayNameAppendix(): string {
-			switch (this.share.shareType) {
-				case this.SHARE_TYPES.SHARE_TYPE_GROUP:
+			),
+		)
+		const canEditForm = computed(() =>
+			props.share.permissions.includes(PERMISSION_TYPES.PERMISSION_EDIT),
+		)
+		const isNoUser = computed(
+			() => props.share.shareType !== SHARE_TYPES.SHARE_TYPE_USER,
+		)
+		const displayName = computed(() =>
+			props.share.displayName
+				? props.share.displayName
+				: props.share.shareWith,
+		)
+		const displayNameAppendix = computed(() => {
+			switch (props.share.shareType) {
+				case SHARE_TYPES.SHARE_TYPE_GROUP:
 					return `(${t('forms', 'Group')})`
-				case this.SHARE_TYPES.SHARE_TYPE_CIRCLE:
+				case SHARE_TYPES.SHARE_TYPE_CIRCLE:
 					return `(${t('forms', 'Team')})`
 				default:
 					return ''
 			}
-		},
-	},
+		})
 
-	methods: {
-		removeShare(): void {
-			this.$emit('removeShare', this.share)
-		},
+		const removeShare = (): void => {
+			emit('removeShare', props.share)
+		}
+
+		/**
+		 * Grant or remove permission from share
+		 *
+		 * @param permission The permission to grant or remove
+		 * @param hasPermission True if granted, False if removed
+		 */
+		const updatePermission = (
+			permission: string,
+			hasPermission: boolean,
+		): void => {
+			const share = { ...(props.share as ShareLike) }
+			if (hasPermission) {
+				share.permissions = [...new Set([...share.permissions, permission])]
+			} else {
+				share.permissions = share.permissions.filter(
+					(perm: string) => perm !== permission,
+				)
+			}
+			emit('update:share', share)
+		}
 
 		/**
 		 * @param hasPermission If the results permission should be granted
 		 */
-		updatePermissionResults(hasPermission: boolean): void {
+		const updatePermissionResults = (hasPermission: boolean): void => {
 			if (hasPermission === false) {
-				// ensure to remove the delete permission if results permission is dropped
-				this.updatePermission(
-					PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
-					false,
-				)
+				updatePermission(PERMISSION_TYPES.PERMISSION_RESULTS_DELETE, false)
 			}
-			return this.updatePermission(
-				PERMISSION_TYPES.PERMISSION_RESULTS,
-				hasPermission,
-			)
-		},
+			updatePermission(PERMISSION_TYPES.PERMISSION_RESULTS, hasPermission)
+		}
 
 		/**
 		 * @param hasPermission If the results_delete permission should be granted
 		 */
-		updatePermissionDeleteResults(hasPermission: boolean): void {
-			return this.updatePermission(
+		const updatePermissionDeleteResults = (hasPermission: boolean): void => {
+			updatePermission(
 				PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
 				hasPermission,
 			)
-		},
+		}
 
 		/**
 		 * @param hasPermission If the results_delete permission should be granted
 		 */
-		updatePermissionEdit(hasPermission: boolean): void {
-			return this.updatePermission(
-				PERMISSION_TYPES.PERMISSION_EDIT,
-				hasPermission,
-			)
-		},
+		const updatePermissionEdit = (hasPermission: boolean): void => {
+			updatePermission(PERMISSION_TYPES.PERMISSION_EDIT, hasPermission)
+		}
 
-		/**
-		 * Grant or remove permission from share
-		 *
-		 * @param permission The permission to grant or remove
-		 * @param hasPermission True if granted, False if removed
-		 */
-		updatePermission(permission: string, hasPermission: boolean): void {
-			const share = { ...(this.share as ShareLike) }
-			if (hasPermission) {
-				share.permissions = [...new Set([...share.permissions, permission])]
-			} else {
-				share.permissions = share.permissions.filter(
-					(perm: string) => perm !== permission,
-				)
-			}
-			this.$emit('update:share', share)
-		},
+		return {
+			t,
+			IconClose,
+			SHARE_TYPES,
+			canAccessResults,
+			canDeleteResults,
+			canEditForm,
+			isNoUser,
+			displayName,
+			displayNameAppendix,
+			removeShare,
+			updatePermissionResults,
+			updatePermissionDeleteResults,
+			updatePermissionEdit,
+		}
 	},
 })
 </script>
diff --git a/src/components/SidebarTabs/SharingSidebarTab.vue b/src/components/SidebarTabs/SharingSidebarTab.vue
index d4e4eed6c..140dfe706 100644
--- a/src/components/SidebarTabs/SharingSidebarTab.vue
+++ b/src/components/SidebarTabs/SharingSidebarTab.vue
@@ -46,18 +46,17 @@
 			<div
 				v-for="share in publicLinkShares"
 				:key="'share-' + share.id"
-				:set="void (isEmbeddable = isEmbeddingAllowed(share))"
 				class="share-div share-div--link"
 				:class="{ 'share-div--embeddable': isEmbeddingAllowed(share) }">
 				<div class="share-div__avatar">
 					<NcIconSvgWrapper
-						v-if="isEmbeddable"
+						v-if="isEmbeddingAllowed(share)"
 						:svg="IconLinkBoxVariantOutline" />
 					<NcIconSvgWrapper v-else :svg="IconLinkVariant" />
 				</div>
 				<div class="share-div__desc share-div__desc--tokenized">
 					<span v-if="!appConfig.allowCustomPublicShareTokens">{{
-						isEmbeddable
+						isEmbeddingAllowed(share)
 							? t('forms', 'Embeddable link')
 							: t('forms', 'Share link')
 					}}</span>
@@ -67,7 +66,7 @@
 						:disabled="locked || !isCurrentUserOwner"
 						autocomplete="off"
 						:label="
-							isEmbeddable
+							isEmbeddingAllowed(share)
 								? t('forms', 'Embeddable link token')
 								: t('forms', 'Share link token')
 						"
@@ -107,7 +106,7 @@
 						{{ t('forms', 'Show QR code') }}
 					</NcActionButton>
 					<NcActionButton
-						v-if="isEmbeddable"
+						v-if="isEmbeddingAllowed(share)"
 						@click="copyEmbeddingCode($event, share)">
 						<template #icon>
 							<NcIconSvgWrapper :svg="IconCodeBrackets" />
@@ -252,7 +251,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionLink from '@nextcloud/vue/components/NcActionLink'
 import NcActions from '@nextcloud/vue/components/NcActions'
@@ -290,14 +289,6 @@ interface SharingSidebarAppConfig {
 	[key: string]: unknown
 }
 
-interface ShareTokenUpdateContext {
-	shareTokens: Record<number, string>
-	loadingShareTokenId: number | null
-	savingShareTokens: Record<number, boolean>
-	form: { id: number }
-	$emit: (event: string, ...args: unknown[]) => void
-}
-
 export default defineComponent({
 	components: {
 		NcIconSvgWrapper,
@@ -332,7 +323,7 @@ export default defineComponent({
 
 	emits: ['addShare', 'updateShare', 'removeShare', 'update:formProp'],
 
-	setup() {
+	setup(props, { emit }) {
 		const { SHARE_TYPES } = useShareTypes()
 		const {
 			copyEmbeddingCode,
@@ -344,98 +335,72 @@ export default defineComponent({
 			PERMISSION_TYPES,
 			SHARE_TYPES,
 		})
+		const isLoading = ref(false)
+		const appConfig = loadState(
+			formsAppName,
+			'appConfig',
+		) as SharingSidebarAppConfig
+		const shareTokens = ref<Record<number, string>>({})
+		const savingShareTokens = ref<Record<number, boolean>>({})
+		const loadingShareTokenId = ref<number | null>(null)
+		const qrDialogText = ref('')
 
-		return {
-			t,
-			FormsIcon,
-			IconCheck,
-			IconCopyAll,
-			IconPlus,
-			IconCodeBrackets,
-			IconDelete,
-			IconLinkVariant,
-			IconLinkBoxVariantOutline,
-			IconAccountMultiple,
-			IconQr,
-			IconRefresh,
-			SHARE_TYPES,
-			copyEmbeddingCode,
-			copyLink,
-			getInternalShareLink,
-			getPublicShareLink,
-			isEmbeddingAllowed,
-		}
-	},
-
-	data(): {
-		isLoading: boolean
-		appConfig: SharingSidebarAppConfig
-		shareTokens: Record<number, string>
-		savingShareTokens: Record<number, boolean>
-		loadingShareTokenId: number | null
-		qrDialogText: string
-		isEmbeddable: boolean
-	} {
-		return {
-			isLoading: false,
-			appConfig: loadState(
-				formsAppName,
-				'appConfig',
-			) as SharingSidebarAppConfig,
-
-			shareTokens: {},
-			savingShareTokens: {},
-			loadingShareTokenId: null,
-			qrDialogText: '',
-			isEmbeddable: false,
+		/**
+		 * Sort by shareType and DisplayName
+		 *
+		 * @param a first share for comparison
+		 * @param b second share for comparison
+		 */
+		const sortByTypeAndDisplayname = (a: ShareLike, b: ShareLike): number => {
+			const aDisplayName = (a.displayName ?? '').toLowerCase()
+			const bDisplayName = (b.displayName ?? '').toLowerCase()
+			if (a.shareType < b.shareType) {
+				return -1
+			}
+			if (a.shareType > b.shareType) {
+				return 1
+			}
+			if (aDisplayName < bDisplayName) {
+				return -1
+			}
+			if (aDisplayName > bDisplayName) {
+				return 1
+			}
+			return 0
 		}
-	},
 
-	computed: {
-		isCurrentUserOwner(): boolean {
-			return getCurrentUser()?.uid === this.form.ownerId
-		},
-
-		sortedShares(): ShareLike[] {
-			// Remove Link-Shares, which are handled separately, then sort
-			return (this.form.shares as ShareLike[])
-				.filter(
-					(share) => share.shareType !== this.SHARE_TYPES.SHARE_TYPE_LINK,
-				)
-				.sort(this.sortByTypeAndDisplayname)
-		},
-
-		hasPublicLink(): boolean {
-			return this.publicLinkShares.length !== 0
-		},
-
-		publicLinkShares(): ShareLike[] {
-			const shares = (this.form.shares as ShareLike[]).filter(
-				(share) => share.shareType === this.SHARE_TYPES.SHARE_TYPE_LINK,
+		const isCurrentUserOwner = computed(
+			() => getCurrentUser()?.uid === props.form.ownerId,
+		)
+		const sortedShares = computed<ShareLike[]>(() =>
+			(props.form.shares as ShareLike[])
+				.filter((share) => share.shareType !== SHARE_TYPES.SHARE_TYPE_LINK)
+				.sort(sortByTypeAndDisplayname),
+		)
+		const publicLinkShares = computed<ShareLike[]>(() => {
+			const shares = (props.form.shares as ShareLike[]).filter(
+				(share) => share.shareType === SHARE_TYPES.SHARE_TYPE_LINK,
 			)
 			shares.sort((a: ShareLike, b: ShareLike) =>
-				this.isEmbeddingAllowed(a) ? 1 : this.isEmbeddingAllowed(b) ? -1 : 0,
+				isEmbeddingAllowed(a) ? 1 : isEmbeddingAllowed(b) ? -1 : 0,
 			)
 			return shares
-		},
-	},
+		})
+		const hasPublicLink = computed(() => publicLinkShares.value.length !== 0)
 
-	watch: {
-		publicLinkShares: {
-			immediate: true,
-			handler(shares: ShareLike[]) {
+		watch(
+			publicLinkShares,
+			(shares: ShareLike[]) => {
 				const nextShareTokens: Record<number, string> = {}
 				for (const share of shares) {
 					nextShareTokens[share.id] =
-						this.shareTokens[share.id] ?? share.shareWith
+						shareTokens.value[share.id] ?? share.shareWith
 				}
-
-				this.shareTokens = nextShareTokens
+				shareTokens.value = nextShareTokens
 			},
-		},
-	},
+			{ immediate: true },
+		)
 
-	methods: {
 		/**
 		 * Add share
 		 *
@@ -443,16 +408,16 @@ export default defineComponent({
 		 * @param newShare.shareType type of the share
 		 * @param newShare.shareWith with whom it should be shared
 		 */
-		async addShare(newShare: {
+		const addShare = async (newShare: {
 			shareType: number
 			shareWith: string
-		}): Promise<void> {
-			this.isLoading = true
+		}): Promise<void> => {
+			isLoading.value = true
 
 			try {
 				const response = await axios.post(
 					generateOcsUrl('apps/forms/api/v3/forms/{id}/shares', {
-						id: this.form.id,
+						id: props.form.id,
 					}),
 					{
 						shareType: newShare.shareType,
@@ -462,7 +427,7 @@ export default defineComponent({
 				const share = OcsResponse2Data(response)
 
 				// Add new share
-				this.$emit('addShare', share)
+				emit('addShare', share)
 			} catch (error) {
 				logger.error('Error while adding new share', {
 					error,
@@ -470,61 +435,46 @@ export default defineComponent({
 				})
 				showError(t('forms', 'There was an error while adding the share'))
 			} finally {
-				this.isLoading = false
+				isLoading.value = false
 			}
-		},
+		}
 
-		async addPublicLink(): Promise<void> {
-			this.isLoading = true
+		const addPublicLink = async (): Promise<void> => {
+			isLoading.value = true
 
 			try {
 				const response = await axios.post(
 					generateOcsUrl('apps/forms/api/v3/forms/{id}/shares', {
-						id: this.form.id,
+						id: props.form.id,
 					}),
 					{
-						shareType: this.SHARE_TYPES.SHARE_TYPE_LINK,
+						shareType: SHARE_TYPES.SHARE_TYPE_LINK,
 					},
 				)
 				const share = OcsResponse2Data(response)
 
 				// Add new share
-				this.$emit('addShare', share)
+				emit('addShare', share)
 			} catch (error) {
 				logger.error('Error adding public link', { error })
 				showError(t('forms', 'There was an error while adding the link'))
 			} finally {
-				this.isLoading = false
+				isLoading.value = false
 			}
-		},
-
-		/**
-		 * Make a share embeddable into websites (sets the internal permission)
-		 *
-		 * @param share The public link share to make embeddable
-		 */
-		makeEmbeddable(share: ShareLike): void {
-			this.updateShare({
-				...share,
-				permissions: [
-					...share.permissions,
-					PERMISSION_TYPES.PERMISSION_EMBED,
-				],
-			})
-		},
+		}
 
 		/**
-		 * Update share
+		 * Update the permissions for a share through the API.
 		 *
-		 * @param updatedShare the updated object
+		 * @param updatedShare The share payload with the new permission set.
 		 */
-		async updateShare(updatedShare: ShareLike): Promise<void> {
-			this.isLoading = true
+		async function updateShare(updatedShare: ShareLike): Promise<void> {
+			isLoading.value = true
 
 			try {
 				const response = await axios.patch(
 					generateOcsUrl('apps/forms/api/v3/forms/{id}/shares/{shareId}', {
-						id: this.form.id,
+						id: props.form.id,
 						shareId: updatedShare.id,
 					}),
 					{
@@ -538,7 +488,7 @@ export default defineComponent({
 				})
 
 				// Add new share
-				this.$emit('updateShare', share)
+				emit('updateShare', share)
 			} catch (error) {
 				logger.error('Error while updating share', {
 					error,
@@ -546,129 +496,92 @@ export default defineComponent({
 				})
 				showError(t('forms', 'There was an error while updating the share'))
 			} finally {
-				this.isLoading = false
+				isLoading.value = false
 			}
-		},
+		}
+
+		/**
+		 * Update the permissions for a share through the API.
+		 *
+		 * @param share The share being updated.
+		 */
+		function makeEmbeddable(share: ShareLike): void {
+			updateShare({
+				...share,
+				permissions: [
+					...share.permissions,
+					PERMISSION_TYPES.PERMISSION_EMBED,
+				],
+			})
+		}
 
 		/**
 		 * Remove share
 		 *
 		 * @param share the share to delete
 		 */
-		async removeShare(share: ShareLike): Promise<void> {
-			this.isLoading = true
+		const removeShare = async (share: ShareLike): Promise<void> => {
+			isLoading.value = true
 
 			try {
 				await axios.delete(
 					generateOcsUrl('apps/forms/api/v3/forms/{id}/shares/{shareId}', {
-						id: this.form.id,
+						id: props.form.id,
 						shareId: share.id,
 					}),
 				)
-				this.$emit('removeShare', share)
+				emit('removeShare', share)
 			} catch (error) {
 				logger.error('Error while removing share', { error, share })
 				showError(t('forms', 'There was an error while removing the share'))
 			} finally {
-				this.isLoading = false
+				isLoading.value = false
 			}
-		},
+		}
 
 		/**
-		 * Sort by shareType and DisplayName
+		 * Update the permit-all-users access flag.
 		 *
-		 * @param a first share for comparison
-		 * @param b second share for comparison
+		 * @param newVal The next checkbox value.
 		 */
-		sortByTypeAndDisplayname(a: ShareLike, b: ShareLike): number {
-			const aDisplayName = (a.displayName ?? '').toLowerCase()
-			const bDisplayName = (b.displayName ?? '').toLowerCase()
-			// First return, if ShareType does not match
-			if (a.shareType < b.shareType) {
-				return -1
-			}
-			if (a.shareType > b.shareType) {
-				return 1
-			}
-
-			// Otherwise sort by displayname
-			if (aDisplayName < bDisplayName) {
-				return -1
-			}
-			if (aDisplayName > bDisplayName) {
-				return 1
-			}
-			return 0
-		},
-
-		onPermitAllUsersChange(newVal: boolean): void {
-			const newAccess = { ...this.form.access }
+		const onPermitAllUsersChange = (newVal: boolean): void => {
+			const newAccess = { ...props.form.access }
 			newAccess.permitAllUsers = newVal
-			this.$emit('update:formProp', 'access', newAccess)
-		},
+			emit('update:formProp', 'access', newAccess)
+		}
 
-		onShowToAllUsersChange(newVal: boolean): void {
-			const newAccess = { ...this.form.access }
+		/**
+		 * Update the show-to-all-users access flag.
+		 *
+		 * @param newVal The next checkbox value.
+		 */
+		const onShowToAllUsersChange = (newVal: boolean): void => {
+			const newAccess = { ...props.form.access }
 			newAccess.showToAllUsers = newVal
-			this.$emit('update:formProp', 'access', newAccess)
-		},
-
-		getShareTokenInput(share: ShareLike): string {
-			return this.shareTokens[share.id] ?? share.shareWith
-		},
-
-		isShareTokenSaving(share: ShareLike): boolean {
-			return !!this.savingShareTokens[share.id]
-		},
-
-		isShareTokenLoading(share: ShareLike): boolean {
-			return this.loadingShareTokenId === share.id
-		},
+			emit('update:formProp', 'access', newAccess)
+		}
 
-		setShareTokenInput(share: ShareLike, token: string | number): void {
-			this.shareTokens = {
-				...this.shareTokens,
-				[share.id]: String(token),
-			}
-			this.updateShareToken(share)
-		},
+		const getShareTokenInput = (share: ShareLike): string =>
+			shareTokens.value[share.id] ?? share.shareWith
 
-		async generateNewToken(share: ShareLike): Promise<void> {
-			this.loadingShareTokenId = share.id
+		const isShareTokenSaving = (share: ShareLike): boolean =>
+			!!savingShareTokens.value[share.id]
 
-			try {
-				const { data } = await axios.get(
-					generateOcsUrl('apps/forms/api/v3/token'),
-				)
-				this.setShareTokenInput(share, data.ocs.data.token)
-			} catch (error) {
-				logger.error('Error while generating share token', {
-					error,
-					share,
-				})
-				showError(
-					t('forms', 'There was an error while generating the link token'),
-				)
-			} finally {
-				this.loadingShareTokenId = null
-			}
-		},
+		const isShareTokenLoading = (share: ShareLike): boolean =>
+			loadingShareTokenId.value === share.id
 
-		updateShareToken: debounce(async function (
-			this: ShareTokenUpdateContext,
-			share: ShareLike,
-		) {
-			const token = this.shareTokens[share.id] ?? share.shareWith
-			this.loadingShareTokenId = share.id
-			this.savingShareTokens = {
-				...this.savingShareTokens,
+		const updateShareToken = debounce(async (share: ShareLike) => {
+			const token = shareTokens.value[share.id] ?? share.shareWith
+			loadingShareTokenId.value = share.id
+			savingShareTokens.value = {
+				...savingShareTokens.value,
 				[share.id]: true,
 			}
 
 			try {
 				const response = await axios.patch(
 					generateOcsUrl('apps/forms/api/v3/forms/{id}/shares/{shareId}', {
-						id: this.form.id,
+						id: props.form.id,
 						shareId: share.id,
 					}),
 					{
@@ -678,7 +591,7 @@ export default defineComponent({
 					},
 				)
 
-				this.$emit('updateShare', {
+				emit('updateShare', {
 					...share,
 					id: OcsResponse2Data(response),
 					shareWith: token,
@@ -693,17 +606,94 @@ export default defineComponent({
 					t('forms', 'There was an error while updating the link token'),
 				)
 			} finally {
-				this.savingShareTokens = {
-					...this.savingShareTokens,
+				savingShareTokens.value = {
+					...savingShareTokens.value,
 					[share.id]: false,
 				}
-				this.loadingShareTokenId = null
+				loadingShareTokenId.value = null
 			}
-		}, INPUT_DEBOUNCE_MS),
+		}, INPUT_DEBOUNCE_MS)
 
-		openQrDialog(share: ShareLike): void {
-			this.qrDialogText = this.getPublicShareLink(share)
-		},
+		const setShareTokenInput = (
+			share: ShareLike,
+			token: string | number,
+		): void => {
+			shareTokens.value = {
+				...shareTokens.value,
+				[share.id]: String(token),
+			}
+			void updateShareToken(share)
+		}
+
+		const generateNewToken = async (share: ShareLike): Promise<void> => {
+			loadingShareTokenId.value = share.id
+
+			try {
+				const { data } = await axios.get(
+					generateOcsUrl('apps/forms/api/v3/token'),
+				)
+				setShareTokenInput(share, data.ocs.data.token)
+			} catch (error) {
+				logger.error('Error while generating share token', {
+					error,
+					share,
+				})
+				showError(
+					t('forms', 'There was an error while generating the link token'),
+				)
+			} finally {
+				loadingShareTokenId.value = null
+			}
+		}
+
+		const openQrDialog = (share: ShareLike): void => {
+			qrDialogText.value = getPublicShareLink(share)
+		}
+
+		return {
+			appConfig,
+			copyEmbeddingCode,
+			copyLink,
+			getInternalShareLink,
+			getPublicShareLink,
+			isCurrentUserOwner,
+			isLoading,
+			loadingShareTokenId,
+			publicLinkShares,
+			hasPublicLink,
+			sortedShares,
+			shareTokens,
+			savingShareTokens,
+			qrDialogText,
+			SHARE_TYPES,
+			FormsIcon,
+			IconCheck,
+			IconCopyAll,
+			IconPlus,
+			IconCodeBrackets,
+			IconDelete,
+			IconLinkVariant,
+			IconLinkBoxVariantOutline,
+			IconAccountMultiple,
+			IconQr,
+			IconRefresh,
+			isEmbeddingAllowed,
+			t,
+			addShare,
+			addPublicLink,
+			makeEmbeddable,
+			updateShare,
+			removeShare,
+			sortByTypeAndDisplayname,
+			onPermitAllUsersChange,
+			onShowToAllUsersChange,
+			getShareTokenInput,
+			isShareTokenSaving,
+			isShareTokenLoading,
+			setShareTokenInput,
+			generateNewToken,
+			openQrDialog,
+		}
 	},
 })
 </script>
diff --git a/src/components/SidebarTabs/TransferOwnership.vue b/src/components/SidebarTabs/TransferOwnership.vue
index cdd30b3d6..c9bf8bc7c 100644
--- a/src/components/SidebarTabs/TransferOwnership.vue
+++ b/src/components/SidebarTabs/TransferOwnership.vue
@@ -97,7 +97,7 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
@@ -136,79 +136,62 @@ export default defineComponent({
 		},
 	},
 
-	setup() {
-		return {
-			...useUserSearch(),
-			t,
-		}
-	},
-
-	data() {
-		return {
-			selected: undefined as SelectedUserLike | undefined,
-			showModal: false as boolean,
-			confirmationInput: '' as string,
-			loading: false as boolean,
-		}
-	},
-
-	computed: {
-		canTransfer(): boolean {
-			return (
-				this.confirmationInput === this.confirmationString && !!this.selected
-			)
-		},
-
-		confirmationString(): string {
-			return `${this.form.ownerId}/${this.form.title.replace(/\s/g, ' ').trim()}`
-		},
-
-		options(): unknown[] {
-			if (this.isValidQuery) {
-				// Suggestions without existing shares
-				return this.suggestions
+	setup(props) {
+		const userSearch = useUserSearch()
+		const { SHARE_TYPES } = userSearch
+		const selected = ref<SelectedUserLike | undefined>(undefined)
+		const showModal = ref(false)
+		const confirmationInput = ref('')
+
+		const confirmationString = computed(
+			() =>
+				`${props.form.ownerId}/${props.form.title.replace(/\s/g, ' ').trim()}`,
+		)
+		const canTransfer = computed(
+			() =>
+				confirmationInput.value === confirmationString.value
+				&& !!selected.value,
+		)
+		const options = computed(() => {
+			if (userSearch.isValidQuery.value) {
+				return userSearch.suggestions.value
 			}
-			// Recommendations without existing shares
-			return this.recommendations
-		},
-	},
-
-	methods: {
-		clearText(): void {
-			this.confirmationInput = ''
-		},
+			return userSearch.recommendations.value
+		})
 
-		closeModal(): void {
-			this.showModal = false
-		},
-
-		escapedString(textToEscape: string): string {
-			return '' + textToEscape.replace('<', '&lt;').replace('>', '&gt;')
-		},
-
-		openModal(): void {
-			this.showModal = true
-		},
-
-		async onOwnershipTransfer(): Promise<void> {
-			this.showModal = false
-			if (this.form.id && this.selected?.shareWith) {
+		const clearText = (): void => {
+			confirmationInput.value = ''
+		}
+		const closeModal = (): void => {
+			showModal.value = false
+		}
+		const escapedString = (textToEscape: string): string =>
+			'' + textToEscape.replace('<', '&lt;').replace('>', '&gt;')
+		const openModal = (): void => {
+			showModal.value = true
+		}
+		const onSearch = (query: string): void => {
+			void userSearch.asyncSearch(query, [SHARE_TYPES.SHARE_TYPE_USER])
+		}
+		const onOwnershipTransfer = async (): Promise<void> => {
+			showModal.value = false
+			if (props.form.id && selected.value?.shareWith) {
 				try {
-					emit('forms:last-updated:set', this.form.id)
+					emit('forms:last-updated:set', props.form.id)
 					await axios.patch(
 						generateOcsUrl('apps/forms/api/v3/forms/{id}', {
-							id: this.form.id,
+							id: props.form.id,
 						}),
 						{
 							keyValuePairs: {
-								ownerId: this.selected?.shareWith,
+								ownerId: selected.value?.shareWith,
 							},
 						},
 					)
 					showSuccess(
-						`${t('forms', 'This form is now owned by')} ${this.selected?.displayName}`,
+						`${t('forms', 'This form is now owned by')} ${selected.value?.displayName}`,
 					)
-					emit('forms:ownership-transfered', this.form.id)
+					emit('forms:ownership-transfered', props.form.id)
 				} catch (error) {
 					logger.error('Error while transfering form ownership', {
 						error,
@@ -219,13 +202,31 @@ export default defineComponent({
 				}
 			} else {
 				logger.error('Null parameters while transfering form ownership', {
-					selectedUser: this.selected,
+					selectedUser: selected.value,
 				})
 				showError(
 					t('forms', 'An error occurred while transfering ownership'),
 				)
 			}
-		},
+		}
+
+		return {
+			...userSearch,
+			SHARE_TYPES,
+			selected,
+			showModal,
+			confirmationInput,
+			canTransfer,
+			confirmationString,
+			options,
+			clearText,
+			closeModal,
+			escapedString,
+			openModal,
+			onSearch,
+			onOwnershipTransfer,
+			t,
+		}
 	},
 })
 </script>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 1feacb25c..1a1467373 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -38,7 +38,8 @@ import IconShareVariant from '@material-symbols/svg-400/outlined/share.svg?raw'
 import IconVisibility from '@material-symbols/svg-400/outlined/visibility.svg?raw'
 import { t } from '@nextcloud/l10n'
 import { useIsMobile } from '@nextcloud/vue'
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import PillMenu from './PillMenu.vue'
@@ -113,101 +114,104 @@ export default defineComponent({
 
 	emits: ['shareForm'],
 
-	setup() {
-		return {
-			t,
-
-			isMobile: useIsMobile(),
-			IconShareVariant,
-		}
-	},
-
-	computed: {
-		currentView(): TopBarViewOption | undefined {
-			const routeName = this.$route.name
-			return this.availableViews.find(
-				(v) =>
-					routeName === v.id
-					|| (typeof routeName === 'string'
-						&& routeName.startsWith(v.id + '.')),
-			)
-		},
-
-		availableViews(): TopBarViewOption[] {
+	setup(props, { emit }) {
+		const route = useRoute()
+		const router = useRouter()
+		const isMobile = useIsMobile()
+
+		const canSubmit = computed(() =>
+			props.permissions.includes(PERMISSION_TYPES.PERMISSION_SUBMIT),
+		)
+
+		const canEdit = computed(
+			() =>
+				props.permissions.includes(PERMISSION_TYPES.PERMISSION_EDIT)
+				&& !props.archived,
+		)
+
+		const canSeeResults = computed(
+			() =>
+				props.permissions.includes(PERMISSION_TYPES.PERMISSION_RESULTS)
+				|| props.submissionCount > 0,
+		)
+
+		// This probably can get a permission of itself
+		const canShare = computed(() => canEdit.value)
+
+		const canOnlySubmit = computed(
+			() =>
+				props.permissions.length === 1
+				&& props.permissions.includes(PERMISSION_TYPES.PERMISSION_SUBMIT)
+				&& props.submissionCount === 0,
+		)
+
+		const availableViews = computed<TopBarViewOption[]>(() => {
 			const views: TopBarViewOption[] = []
-			if (this.canSubmit) {
+			if (canSubmit.value) {
 				views.push(submitView)
 			}
-			if (this.canEdit) {
+			if (canEdit.value) {
 				views.push({
 					...editView,
-					disabled: this.locked,
+					disabled: props.locked,
 				})
 			}
-			if (this.canSeeResults) {
+			if (canSeeResults.value) {
 				views.push(resultsView)
 			}
 			return views
-		},
-
-		canSubmit(): boolean {
-			return this.permissions.includes(PERMISSION_TYPES.PERMISSION_SUBMIT)
-		},
-
-		canEdit(): boolean {
-			return (
-				this.permissions.includes(PERMISSION_TYPES.PERMISSION_EDIT)
-				&& !this.archived
-			)
-		},
+		})
 
-		canSeeResults(): boolean {
-			return (
-				this.permissions.includes(PERMISSION_TYPES.PERMISSION_RESULTS)
-				|| this.submissionCount > 0
-			)
-		},
-
-		canShare(): boolean {
-			// This probably can get a permission of itself
-			return this.canEdit
-		},
-
-		canOnlySubmit(): boolean {
-			return (
-				this.permissions.length === 1
-				&& this.permissions.includes(PERMISSION_TYPES.PERMISSION_SUBMIT)
-				&& this.submissionCount === 0
+		const currentView = computed<TopBarViewOption | undefined>(() => {
+			const routeName = route.name
+			return availableViews.value.find(
+				(v) =>
+					routeName === v.id
+					|| (typeof routeName === 'string'
+						&& routeName.startsWith(v.id + '.')),
 			)
-		},
-	},
+		})
 
-	methods: {
 		/**
 		 * Router methods
 		 *
 		 * @param option The selected pill menu option
 		 */
-		async onChangeView(option: TopBarViewOption): Promise<void> {
-			if (this.$route.name === option.id) {
+		const onChangeView = async (option: TopBarViewOption): Promise<void> => {
+			if (route.name === option.id) {
 				return
 			}
 
 			try {
-				await this.$router.push({
+				const hash = Array.isArray(route.params.hash)
+					? route.params.hash[0]
+					: route.params.hash
+				await router.push({
 					name: option.id,
 					params: {
-						hash: this.$route.params.hash,
+						hash,
 					},
 				})
 			} catch (error) {
 				logger.debug('Navigation cancelled', { error })
 			}
-		},
+		}
 
-		onShareForm(): void {
-			this.$emit('shareForm')
-		},
+		const onShareForm = (): void => {
+			emit('shareForm')
+		}
+
+		return {
+			t,
+			isMobile,
+			IconShareVariant,
+			currentView,
+			availableViews,
+			canShare,
+			canOnlySubmit,
+			onChangeView,
+			onShareForm,
+		}
 	},
 })
 </script>
diff --git a/src/composables/useQuestion.ts b/src/composables/useQuestion.ts
index 763f66c88..c3a575c0a 100644
--- a/src/composables/useQuestion.ts
+++ b/src/composables/useQuestion.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import type { Ref } from 'vue'
 import type { FormsOption } from '../models/Entities.d.ts'
 
 import axios from '@nextcloud/axios'
@@ -11,8 +12,7 @@ import { emit as emitEvent } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
-import { computed, getCurrentInstance, nextTick, ref } from 'vue'
-import Question from '../components/Questions/Question.vue'
+import { computed, nextTick, ref } from 'vue'
 import { INPUT_DEBOUNCE_MS } from '../models/Constants.ts'
 import logger from '../utils/Logger.ts'
 
@@ -112,17 +112,39 @@ export const QUESTION_PROPS = {
 
 interface UseQuestionOptions {
 	emit: (event: string, ...args: unknown[]) => void
+	infoMessage?: Ref<string | null>
+	rootElement?: Ref<{ $el?: HTMLElement } | null>
 }
 
 interface QuestionPropsLike {
 	id: number
 	formId: number | null
 	index: number
+	text: string
+	description: string
+	isRequired: boolean
+	readOnly: boolean
+	name: string
+	maxStringLengths: Record<string, number>
+	canMoveUp: boolean
+	canMoveDown: boolean
 	extraSettings: Record<string, unknown>
 	options: FormsOption[]
 	[key: string]: unknown
 }
 
+interface QuestionForwardedProps {
+	index: number
+	text: string
+	description: string
+	isRequired: boolean
+	readOnly: boolean
+	maxStringLengths: Record<string, number>
+	name: string
+	canMoveUp: boolean
+	canMoveDown: boolean
+}
+
 /**
  * Shared question helpers previously provided via QuestionMixin.
  *
@@ -131,18 +153,18 @@ interface QuestionPropsLike {
  */
 export function useQuestion(props: QuestionPropsLike, options: UseQuestionOptions) {
 	const errorMessage = ref<string | null>(null)
-	const instance = getCurrentInstance()
 
-	const questionProps = computed(() => {
-		const filteredProps: Record<string, unknown> = { ...props }
-		const allowedKeys = Object.keys(Question.props || {})
-		Object.keys(filteredProps).forEach((key) => {
-			if (!allowedKeys.includes(key)) {
-				delete filteredProps[key]
-			}
-		})
-		return filteredProps
-	})
+	const questionProps = computed<QuestionForwardedProps>(() => ({
+		index: props.index,
+		text: props.text,
+		description: props.description,
+		isRequired: props.isRequired,
+		readOnly: props.readOnly,
+		maxStringLengths: props.maxStringLengths,
+		name: props.name,
+		canMoveUp: props.canMoveUp,
+		canMoveDown: props.canMoveDown,
+	}))
 
 	const titleId = computed(() => {
 		return 'q' + props.index + '_title'
@@ -157,8 +179,7 @@ export function useQuestion(props: QuestionPropsLike, options: UseQuestionOption
 	})
 
 	const hasInfo = computed(() => {
-		const infoMessage = instance?.proxy?.infoMessage
-		return !!infoMessage
+		return !!options.infoMessage?.value
 	})
 
 	const errorId = computed(() => {
@@ -218,7 +239,7 @@ export function useQuestion(props: QuestionPropsLike, options: UseQuestionOption
 	}
 
 	const focus = (): void => {
-		const element = instance?.proxy?.$el as HTMLElement | undefined
+		const element = options.rootElement?.value?.$el ?? options.rootElement?.value
 		element?.scrollIntoView({ behavior: 'smooth' })
 		nextTick(() => {
 			const title = element?.querySelector(
diff --git a/src/composables/useQuestionMultiple.ts b/src/composables/useQuestionMultiple.ts
index fdf3acac5..b46761180 100644
--- a/src/composables/useQuestionMultiple.ts
+++ b/src/composables/useQuestionMultiple.ts
@@ -4,6 +4,7 @@
  */
 /* eslint-disable jsdoc/require-jsdoc */
 
+import type { Ref } from 'vue'
 import type { FormsOption } from '../models/Entities.d.ts'
 
 import axios from '@nextcloud/axios'
@@ -12,7 +13,7 @@ import { emit as emitEvent } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
-import { computed, getCurrentInstance, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { INPUT_DEBOUNCE_MS, OptionType } from '../models/Constants.ts'
 import logger from '../utils/Logger.ts'
 import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
@@ -21,6 +22,13 @@ export const QUESTION_MULTIPLE_EMITS = ['update:options']
 
 interface UseQuestionMultipleOptions {
 	emit: (event: string, ...args: unknown[]) => void
+	input?: Ref<
+		Array<{
+			focus?: () => void
+			$props?: { optionType?: string; index?: number }
+		} | null>
+	>
+	isLoading?: Ref<boolean>
 }
 
 interface AnswerTypeLike {
@@ -48,7 +56,6 @@ export function useQuestionMultiple(
 	options: UseQuestionMultipleOptions,
 ) {
 	const typedProps = props as QuestionMultiplePropsLike
-	const instance = getCurrentInstance()
 	const dirtyOptionsType = ref<string | null>(null)
 
 	const areNoneChecked = computed(() => {
@@ -56,8 +63,7 @@ export function useQuestionMultiple(
 	})
 
 	const contentValid = computed(() => {
-		const proxy = instance?.proxy
-		return typedProps.answerType.validate(proxy)
+		return typedProps.answerType.validate(typedProps)
 	})
 
 	const isLastEmpty = computed(() => {
@@ -111,14 +117,8 @@ export function useQuestionMultiple(
 	})
 
 	const handleMultipleOptions = async (answers: string[]): Promise<void> => {
-		const component = instance?.proxy as {
-			isLoading?: boolean
-			updateOptions?: (options: FormsOption[]) => void
-			focusIndex?: (idx: number, optionType: string) => void
-		}
-
-		if (component?.isLoading !== undefined) {
-			component.isLoading = true
+		if (options.isLoading) {
+			options.isLoading.value = true
 		}
 
 		try {
@@ -126,8 +126,8 @@ export function useQuestionMultiple(
 				generateOcsUrl(
 					'apps/forms/api/v3/forms/{id}/questions/{questionId}/options',
 					{
-						id: props.formId,
-						questionId: props.id,
+						id: typedProps.formId,
+						questionId: typedProps.id,
 					},
 				),
 				{
@@ -137,7 +137,7 @@ export function useQuestionMultiple(
 			)
 
 			const newServerOptions = OcsResponse2Data(response) as FormsOption[]
-			const newOptions = props.options.slice()
+			const newOptions = typedProps.options.slice()
 			newServerOptions.forEach((option: FormsOption, index: number) => {
 				const order =
 					typeof option.order === 'number'
@@ -147,7 +147,7 @@ export function useQuestionMultiple(
 				newOptions.push({
 					...option,
 					id: option.id,
-					questionId: props.id,
+					questionId: typedProps.id,
 					text: option.text,
 					optionType: option.optionType ?? OptionType.Choice,
 					order,
@@ -155,22 +155,18 @@ export function useQuestionMultiple(
 				})
 			})
 
-			if (component?.updateOptions) {
-				component.updateOptions(newOptions)
-			}
+			updateOptions(newOptions)
 
 			nextTick(() => {
-				if (component?.focusIndex) {
-					component.focusIndex(newOptions.length - 1, OptionType.Choice)
-				}
+				focusIndex(newOptions.length - 1, OptionType.Choice)
 			})
 		} catch (error) {
 			logger.error('Error while saving question options', { error })
 			showError(t('forms', 'Error while saving question options'))
-		}
-
-		if (component?.isLoading !== undefined) {
-			component.isLoading = false
+		} finally {
+			if (options.isLoading) {
+				options.isLoading.value = false
+			}
 		}
 	}
 
@@ -189,25 +185,10 @@ export function useQuestionMultiple(
 	}
 
 	function focusIndex(index: number, optionType: string) {
-		const proxy = instance?.proxy as
-			| {
-					input?: Array<{
-						focus?: () => void
-						$props?: { optionType?: string; index?: number }
-					} | null>
-					$refs?: {
-						input?: Array<{
-							focus?: () => void
-							$props?: { optionType?: string; index?: number }
-						} | null>
-					}
-			  }
-			| undefined
-		const inputRefs = proxy?.input ?? proxy?.$refs?.input
-		const refsArray = Array.isArray(inputRefs)
-			? inputRefs
-			: inputRefs
-				? [inputRefs]
+		const refsArray = Array.isArray(options.input?.value)
+			? options.input.value
+			: options.input?.value
+				? [options.input.value]
 				: []
 
 		const item = refsArray.find((component) => {
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 93d005977..03b2dfacc 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -214,21 +214,28 @@
 </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,
+	toRef,
+	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 +288,7 @@ export default defineComponent({
 		},
 
 		form: {
-			type: Object,
+			type: Object as PropType<FormsForm>,
 			required: true,
 		},
 
@@ -294,302 +301,335 @@ 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)
+
+		const form = toRef(props, 'form')
+
+		// 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>(
+			() => form.value.questions.length === 0,
+		)
 
-		isRequiredUsed(): boolean {
-			return this.form.questions.reduce(
+		const isRequiredUsed = computed<boolean>(() =>
+			form.value.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>(
+			() => form.value.expires > 0 && moment().unix() > form.value.expires,
+		)
 
 		/**
 		 * Check if the form was archived
 		 */
-		isFormArchived(): boolean {
-			return this.form.state === FormState.FormArchived
-		},
+		const isFormArchived = computed<boolean>(
+			() => form.value.state === FormState.FormArchived,
+		)
 
-		infoMessage(): string {
+		const infoMessage = computed<string>(() => {
 			let message = ''
-			if (this.form.isAnonymous) {
+			if (form.value.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 (!form.value.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(form.value.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(form.value.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 = [...form.value.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: form.value.id,
+					}),
+					{
+						newOrder,
+					},
+				)
+				emitEvent('forms:last-updated:set', form.value.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 = [...form.value.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 < form.value.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 = [...form.value.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', form.value.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 +638,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 +661,47 @@ export default defineComponent({
 
 				const response = await axios.post(
 					generateOcsUrl('apps/forms/api/v3/forms/{id}/questions', {
-						id: this.form.id,
+						id: form.value.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: form.value.id,
 							questionId,
 						},
 					),
 				)
-				const questions = this.form.questions.filter(
+				const questions = form.value.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', form.value.id)
 			} catch (error) {
 				logger.error(`Error while removing question ${questionId}`, {
 					error,
@@ -670,49 +710,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 +721,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: form.value.id,
 						questionId: question.id,
 					},
 				)
@@ -746,48 +746,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(form.value.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(
+			() => form.value.title,
+			() => {
+				SetWindowTitle(viewForm.formTitle)
+			},
+		)
+
+		// resize description if form is loaded
+		watch(
+			() => viewForm.isLoadingForm.value,
+			(value: boolean) => {
+				if (!value) {
+					resizeTitle()
+					resizeDescription()
+				}
+			},
+		)
+
+		// Lifecycle
+		onMounted(() => {
+			viewForm.fetchFullForm(form.value.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..658b677a2 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -285,14 +285,23 @@ 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,
+	toRef,
+	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 +428,121 @@ export default defineComponent({
 	emits: ['update:form', 'open-sharing'],
 
 	setup(props, { emit }) {
-		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 route = useRoute()
+		const router = useRouter()
+		const form = toRef(props, 'form')
+		const viewForm = useViewForm({ form: () => form.value, emit })
+
+		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 form.value.state === FormState.FormArchived
+		})
+		const canExportSubmissions = computed<boolean>(() => {
+			return form.value.permissions.includes(
 				PERMISSION_TYPES.PERMISSION_RESULTS,
 			)
-		},
-
-		canDeleteSubmissions(): boolean {
+		})
+		const canDeleteSubmissions = computed<boolean>(() => {
 			return (
-				this.form.permissions.includes(
+				form.value.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 form.value.permissions.includes(PERMISSION_TYPES.PERMISSION_EDIT)
+		})
+		const noSubmissions = computed<boolean>(() => {
+			return form.value.submissionCount === 0
+		})
+		const noFilteredSubmissions = computed<boolean>(() => {
+			return submissions.value.length === 0
+		})
+		const fileUrl = computed<string>(() => {
+			if (form.value.fileId) {
+				return generateUrl('/f/{fileId}', { fileId: form.value.fileId })
 			}
 			return window.location.href
-		},
-
-		showLinkedFileNotAvailableDialog(): boolean {
-			if (this.form.partial) {
+		})
+		const showLinkedFileNotAvailableDialog = computed<boolean>(() => {
+			if (form.value.partial) {
 				return false
 			}
 
 			return (
-				this.canEditForm
-				&& Boolean(this.form.fileId)
-				&& !this.form.filePath
-				&& !this.isFormLocked
+				canEditForm.value
+				&& Boolean(form.value.fileId)
+				&& !form.value.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 +553,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 = form.value.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: form.value.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: form.value.id,
 				}),
 				{
 					keyValuePairs: {
@@ -676,25 +611,28 @@ export default defineComponent({
 			)
 
 			const updatedForm = {
-				...this.form,
+				...form.value,
 				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', form.value.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 ${form.value.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: form.value.id,
 						}),
 					)
 				} else {
@@ -702,34 +640,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: form.value.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: form.value.id,
 				})
 				+ '?requesttoken='
 				+ encodeURIComponent(getRequestToken() ?? '')
@@ -737,15 +682,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: form.value.id,
 						}),
 						{
 							keyValuePairs: {
@@ -754,15 +702,15 @@ export default defineComponent({
 							},
 						},
 					)
-					await this.fetchFullForm(this.form.id)
-					await this.loadFormResults()
+					await viewForm.fetchFullForm(form.value.id)
+					await loadFormResults()
 
 					showSuccess(
 						t('forms', 'File {file} successfully linked', {
-							file: this.form.filePath?.split('/').pop() ?? '',
+							file: form.value.filePath?.split('/').pop() ?? '',
 						}),
 					)
-					emit('forms:last-updated:set', this.form.id)
+					emitEvent('forms:last-updated:set', form.value.id)
 				} catch (error) {
 					logger.error('Error while exporting to Files and linking', {
 						error,
@@ -774,17 +722,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: form.value.id,
 							},
 						),
 						{
@@ -807,10 +758,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 (!form.value.fileId) {
 				showError(t('forms', 'File is not linked'))
 				return
 			}
@@ -820,12 +774,12 @@ export default defineComponent({
 					generateOcsUrl(
 						'apps/forms/api/v3/forms/{id}/submissions/export',
 						{
-							id: this.form.id,
+							id: form.value.id,
 						},
 					),
 					{
-						path: this.form.filePath,
-						fileFormat: this.form.fileFormat,
+						path: form.value.filePath,
+						fileFormat: form.value.fileFormat,
 					},
 				)
 
@@ -838,16 +792,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
+				|| (form.value.allowEditSubmissions
 					&& currentUser?.uid === submissionUser)
 			)
-		},
+		}
 
 		/**
 		 * Determines if a submission can be edited.
@@ -858,77 +817,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
+				|| (form.value.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: form.value.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', form.value.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: form.value.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 = { ...form.value, submissionCount: 0 }
+				emit('update:form', updatedForm)
+				emitEvent('forms:last-updated:set', form.value.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 +939,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 +1019,117 @@ export default defineComponent({
 				})
 				.build() as PickerLike
 
-			return this.picker
-		},
+			return picker.value
+		}
+
+		watch(
+			() => props.hash,
+			async () => {
+				await viewForm.fetchFullForm(form.value.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(form.value.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..02a409fed 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,22 @@ 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,
+	toRef,
+	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 +342,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 +378,33 @@ 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 form = toRef(props, 'form')
+
+		const validQuestions = computed<SubmitQuestion[]>(() => {
+			return form.value.questions.filter((question) => {
 				// All questions must have a valid title
 				if (question.text?.trim() === '') {
 					return false
@@ -445,90 +417,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 form.value.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 form.value.expires > 0 && moment().unix() > form.value.expires
+		})
 
-		isArchived(): boolean {
-			return this.form.state === FormState.FormArchived
-		},
+		const isArchived = computed<boolean>(() => {
+			return form.value.state === FormState.FormArchived
+		})
 
-		isClosed(): boolean {
-			return this.form.state === FormState.FormClosed
-		},
+		const isClosed = computed<boolean>(() => {
+			return form.value.state === FormState.FormClosed
+		})
 
-		isMaxSubmissionsReached(): boolean {
-			return this.form.isMaxSubmissionsReached === true
-		},
+		const isMaxSubmissionsReached = computed<boolean>(() => {
+			return form.value.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 (form.value.isAnonymous) {
 				message += t('forms', 'Responses are anonymous.')
 			}
-			if (!this.form.isAnonymous && this.isLoggedIn) {
+			if (!form.value.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)
+				form.value.submissionMessage
+				&& (success.value || !form.value.canSubmit)
 			) {
-				return this.markdownit.render(this.form.submissionMessage)
+				return viewForm.markdownit.render(form.value.submissionMessage)
 			}
 			return ''
-		},
+		})
 
-		expirationMessage(): string {
-			const relativeDate = moment(this.form.expires, 'X')
+		const expirationMessage = computed<string>(() => {
+			const relativeDate = moment(form.value.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 +511,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 +551,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: form.value.id,
+							submissionId: submissionId.value,
 						},
 					),
 				)
 
-				const answers: AnswersMap = {}
+				const loaded: AnswersMap = {}
 				const loadedAnswers =
 					OcsResponse2Data<LoadedSubmissionResponse>(response).answers
 				for (const answer of loadedAnswers) {
@@ -759,21 +675,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 = form.value.questions.find(
 						(question) => question.id === questionId,
 					) as SubmitQuestion | undefined
 					if (!question) {
@@ -781,7 +697,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 +713,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 +740,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 +759,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 +786,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 +798,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 +843,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 +881,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: form.value.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: form.value.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', form.value.id)
 			} catch (error) {
 				const errorMessage = (
 					error as {
@@ -1025,30 +956,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(form.value.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 =
+						form.value.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(form.value.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(form.value.id)
+			}
+
+			if (props.isLoggedIn) {
+				if (
+					submissionId.value
+					&& (form.value.allowEditSubmissions
+						|| form.value.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>