From 8e77c9420191777af32b60c228ce974696bb1569 Mon Sep 17 00:00:00 2001
From: Christian Hartmann <chris-hartmann@gmx.de>
Date: Fri, 21 Aug 2026 21:47:45 +0200
Subject: [PATCH] chore: migrate Question components to Composition API

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>
---
 src/FormsEmptyContent.vue                     |  66 ++--
 src/FormsSettings.vue                         | 210 ++++++-----
 src/components/ArchivedFormsModal.vue         |  44 +--
 src/components/OptionInputDialog.vue          |  71 ++--
 src/components/PaginationToolbar.vue          |  43 +--
 src/components/PillMenu.vue                   |  37 +-
 src/components/QRDialog.vue                   |  54 ++-
 src/components/Questions/Question.vue         | 227 ++++++-----
 src/components/Questions/QuestionColor.vue    |  67 ++--
 src/components/Questions/QuestionDate.vue     | 342 +++++++++--------
 src/components/Questions/QuestionDropdown.vue | 143 +++----
 src/components/Questions/QuestionFile.vue     | 285 +++++++-------
 src/components/Questions/QuestionGrid.vue     | 184 +++++----
 .../Questions/QuestionLinearScale.vue         | 265 +++++++------
 src/components/Questions/QuestionLong.vue     | 104 +++---
 src/components/Questions/QuestionMultiple.vue | 345 +++++++++--------
 src/components/Questions/QuestionRanking.vue  | 351 ++++++++++--------
 src/components/Questions/QuestionShort.vue    | 207 ++++++-----
 src/components/Results/ResultsSummary.vue     | 202 +++++-----
 src/components/Results/Submission.vue         | 299 ++++++++-------
 src/composables/useQuestionMultiple.ts        |  31 +-
 21 files changed, 1893 insertions(+), 1684 deletions(-)

diff --git a/src/FormsEmptyContent.vue b/src/FormsEmptyContent.vue
index 60b0f4415..d9dd1e32a 100644
--- a/src/FormsEmptyContent.vue
+++ b/src/FormsEmptyContent.vue
@@ -21,7 +21,7 @@
 import IconCheck from '@material-symbols/svg-400/outlined/check.svg?raw'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcContent from '@nextcloud/vue/components/NcContent'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
@@ -30,6 +30,30 @@ import FormsIcon from '../img/forms-dark.svg?raw'
 
 const formsAppName = 'forms'
 
+/**
+ * !! Keep Model-Names in sync with Constants EMTPY_... in lib/Constants.php !!
+ * Models for each EmptyContent rendering taking resp. title and subtitle
+ */
+const renderModels: Record<
+	string,
+	{ title: string; description: string; icon: string }
+> = {
+	notfound: {
+		title: t('forms', 'Form not found'),
+		description: t('forms', 'This form does not exist'),
+		icon: FormsIcon,
+	},
+
+	expired: {
+		title: t('forms', 'Form expired'),
+		description: t(
+			'forms',
+			'This form has expired and is no longer taking responses',
+		),
+		icon: IconCheck,
+	},
+}
+
 export default defineComponent({
 	name: 'FormsEmptyContent',
 
@@ -40,42 +64,16 @@ export default defineComponent({
 		NcIconSvgWrapper,
 	},
 
-	data() {
-		return {
-			/**
-			 * !! Keep Model-Names in sync with Constants EMTPY_... in lib/Constants.php !!
-			 * Models for each EmptyContent rendering taking resp. title and subtitle
-			 */
-			renderModels: {
-				notfound: {
-					title: t('forms', 'Form not found'),
-					description: t('forms', 'This form does not exist'),
-					icon: FormsIcon,
-				},
+	setup() {
+		const renderAs = loadState(formsAppName, 'renderAs') as string
+		const currentModel = computed(() => {
+			return renderModels[renderAs]
+		})
 
-				expired: {
-					title: t('forms', 'Form expired'),
-					description: t(
-						'forms',
-						'This form has expired and is no longer taking responses',
-					),
-
-					icon: IconCheck,
-				},
-			} as Record<
-				string,
-				{ title: string; description: string; icon: string }
-			>,
-
-			renderAs: loadState(formsAppName, 'renderAs') as string,
+		return {
+			currentModel,
 		}
 	},
-
-	computed: {
-		currentModel(): { title: string; description: string; icon: string } {
-			return this.renderModels[this.renderAs]
-		},
-	},
 })
 </script>
 
diff --git a/src/FormsSettings.vue b/src/FormsSettings.vue
index 06b63224d..6e2e1bfde 100644
--- a/src/FormsSettings.vue
+++ b/src/FormsSettings.vue
@@ -117,7 +117,7 @@ import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcInputField from '@nextcloud/vue/components/NcInputField'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
@@ -157,34 +157,55 @@ export default defineComponent({
 	},
 
 	setup() {
-		return {
-			t,
-		}
-	},
-
-	data(): {
-		appConfig: AppConfig
-		availableGroups: GroupOption[]
-		confirmationEmailRateLimitInput: string
-		loading: Record<string, boolean>
-	} {
-		return {
-			appConfig: loadState(formsAppName, 'appConfig') as AppConfig,
-			availableGroups: loadState(
-				formsAppName,
-				'availableGroups',
-			) as GroupOption[],
-
-			confirmationEmailRateLimitInput: String(
+		const appConfig = ref<AppConfig>(
+			loadState(formsAppName, 'appConfig') as AppConfig,
+		)
+		const availableGroups = ref<GroupOption[]>(
+			loadState(formsAppName, 'availableGroups') as GroupOption[],
+		)
+		const confirmationEmailRateLimitInput = ref(
+			String(
 				(loadState(formsAppName, 'appConfig') as AppConfig)
 					.confirmationEmailRateLimit ?? 3,
 			),
+		)
+		const loading = ref<Record<string, boolean>>({})
 
-			loading: {},
+		/**
+		 * Reload the current AppConfig. Used to restore in case of saving-failure.
+		 */
+		const reloadAppConfig = async (): Promise<void> => {
+			try {
+				const resp = await axios.get(generateUrl('apps/forms/config'))
+				appConfig.value = resp.data
+			} catch (error) {
+				logger.error('Error while reloading config', { error })
+				showError(t('forms', 'Error while reloading config'))
+			}
+		}
+
+		/**
+		 * Save a key-value pair to the appConfig.
+		 *
+		 * @param configKey The key to store. Must be one of the used configKeys (See php-constants).
+		 * @param configValue The value to store.
+		 */
+		const saveAppConfig = async (
+			configKey: string,
+			configValue: unknown,
+		): Promise<void> => {
+			try {
+				await axios.patch(generateUrl('apps/forms/config'), {
+					configKey,
+					configValue,
+				})
+			} catch (error) {
+				logger.error('Error while saving configuration', { error })
+				showError(t('forms', 'Error while saving configuration'))
+				await reloadAppConfig()
+			}
 		}
-	},
 
-	methods: {
 		/**
 		 * Similar procedures on**Change:
 		 *
@@ -194,100 +215,91 @@ export default defineComponent({
 		 *
 		 * @param newVal The resp. new Value to store.
 		 */
-		async onRestrictCreationChange(newVal: boolean): Promise<void> {
-			this.loading.restrictCreation = true
-			await this.saveAppConfig('restrictCreation', newVal)
-			this.loading.restrictCreation = false
-		},
+		const onRestrictCreationChange = async (newVal: boolean): Promise<void> => {
+			loading.value.restrictCreation = true
+			await saveAppConfig('restrictCreation', newVal)
+			loading.value.restrictCreation = false
+		}
 
-		async onCreationAllowedGroupsChange(newVal: GroupOption[]): Promise<void> {
-			this.loading.creationAllowedGroups = true
-			await this.saveAppConfig(
+		const onCreationAllowedGroupsChange = async (
+			newVal: GroupOption[],
+		): Promise<void> => {
+			loading.value.creationAllowedGroups = true
+			await saveAppConfig(
 				'creationAllowedGroups',
 				newVal.map((group) => group.groupId),
 			)
-			this.loading.creationAllowedGroups = false
-		},
+			loading.value.creationAllowedGroups = false
+		}
 
-		async onAllowPublicLinkChange(newVal: boolean): Promise<void> {
-			this.loading.allowPublicLink = true
-			await this.saveAppConfig('allowPublicLink', newVal)
-			this.loading.allowPublicLink = false
-		},
+		const onAllowPublicLinkChange = async (newVal: boolean): Promise<void> => {
+			loading.value.allowPublicLink = true
+			await saveAppConfig('allowPublicLink', newVal)
+			loading.value.allowPublicLink = false
+		}
 
-		async onAllowCustomPublicShareTokensChange(newVal: boolean): Promise<void> {
-			this.loading.allowCustomPublicShareTokens = true
-			await this.saveAppConfig('allowCustomPublicShareTokens', newVal)
-			this.loading.allowCustomPublicShareTokens = false
-		},
+		const onAllowCustomPublicShareTokensChange = async (
+			newVal: boolean,
+		): Promise<void> => {
+			loading.value.allowCustomPublicShareTokens = true
+			await saveAppConfig('allowCustomPublicShareTokens', newVal)
+			loading.value.allowCustomPublicShareTokens = false
+		}
 
-		async onAllowPermitAllChange(newVal: boolean): Promise<void> {
-			this.loading.allowPermitAll = true
-			await this.saveAppConfig('allowPermitAll', newVal)
-			this.loading.allowPermitAll = false
-		},
+		const onAllowPermitAllChange = async (newVal: boolean): Promise<void> => {
+			loading.value.allowPermitAll = true
+			await saveAppConfig('allowPermitAll', newVal)
+			loading.value.allowPermitAll = false
+		}
 
-		async onAllowShowToAllChange(newVal: boolean): Promise<void> {
-			this.loading.allowShowToAll = true
-			await this.saveAppConfig('allowShowToAll', newVal)
-			this.loading.allowShowToAll = false
-		},
+		const onAllowShowToAllChange = async (newVal: boolean): Promise<void> => {
+			loading.value.allowShowToAll = true
+			await saveAppConfig('allowShowToAll', newVal)
+			loading.value.allowShowToAll = false
+		}
 
-		async onAllowConfirmationEmailChange(newVal: boolean): Promise<void> {
-			this.loading.allowConfirmationEmail = true
-			await this.saveAppConfig('allowConfirmationEmail', newVal)
-			this.loading.allowConfirmationEmail = false
-		},
+		const onAllowConfirmationEmailChange = async (
+			newVal: boolean,
+		): Promise<void> => {
+			loading.value.allowConfirmationEmail = true
+			await saveAppConfig('allowConfirmationEmail', newVal)
+			loading.value.allowConfirmationEmail = false
+		}
 
-		async onConfirmationEmailRateLimitChange(): Promise<void> {
+		const onConfirmationEmailRateLimitChange = async (): Promise<void> => {
 			const value = Math.max(
 				1,
 				Math.min(
 					100,
-					parseInt(this.confirmationEmailRateLimitInput, 10) || 3,
+					parseInt(confirmationEmailRateLimitInput.value, 10) || 3,
 				),
 			)
-			this.confirmationEmailRateLimitInput = String(value)
-			await this.saveAppConfig('confirmationEmailRateLimit', value)
-		},
-
-		async onAllowCommentsChange(newVal: boolean): Promise<void> {
-			this.loading.allowComments = true
-			await this.saveAppConfig('allowComments', newVal)
-			this.loading.allowComments = false
-		},
+			confirmationEmailRateLimitInput.value = String(value)
+			await saveAppConfig('confirmationEmailRateLimit', value)
+		}
 
-		/**
-		 * Save a key-value pair to the appConfig.
-		 *
-		 * @param configKey The key to store. Must be one of the used configKeys (See php-constants).
-		 * @param configValue The value to store.
-		 */
-		async saveAppConfig(configKey: string, configValue: unknown): Promise<void> {
-			try {
-				await axios.patch(generateUrl('apps/forms/config'), {
-					configKey,
-					configValue,
-				})
-			} catch (error) {
-				logger.error('Error while saving configuration', { error })
-				showError(t('forms', 'Error while saving configuration'))
-				await this.reloadAppConfig()
-			}
-		},
+		const onAllowCommentsChange = async (newVal: boolean): Promise<void> => {
+			loading.value.allowComments = true
+			await saveAppConfig('allowComments', newVal)
+			loading.value.allowComments = false
+		}
 
-		/**
-		 * Reload the current AppConfig. Used to restore in case of saving-failure.
-		 */
-		async reloadAppConfig(): Promise<void> {
-			try {
-				const resp = await axios.get(generateUrl('apps/forms/config'))
-				this.appConfig = resp.data
-			} catch (error) {
-				logger.error('Error while reloading config', { error })
-				showError(t('forms', 'Error while reloading config'))
-			}
-		},
+		return {
+			appConfig,
+			availableGroups,
+			confirmationEmailRateLimitInput,
+			loading,
+			onRestrictCreationChange,
+			onCreationAllowedGroupsChange,
+			onAllowPublicLinkChange,
+			onAllowCustomPublicShareTokensChange,
+			onAllowPermitAllChange,
+			onAllowShowToAllChange,
+			onAllowConfirmationEmailChange,
+			onConfirmationEmailRateLimitChange,
+			onAllowCommentsChange,
+			t,
+		}
 	},
 })
 </script>
diff --git a/src/components/ArchivedFormsModal.vue b/src/components/ArchivedFormsModal.vue
index a21320ff3..763ee0602 100644
--- a/src/components/ArchivedFormsModal.vue
+++ b/src/components/ArchivedFormsModal.vue
@@ -28,7 +28,7 @@ import type { PropType } from 'vue'
 import type { FormsForm } from '../models/Entities.d.ts'
 
 import { t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import AppNavigationForm from './AppNavigationForm.vue'
 
@@ -54,32 +54,32 @@ export default defineComponent({
 
 	emits: ['update:open', 'clone'],
 
-	data() {
-		return {
-			shownForms: [] as FormsForm[],
-		}
-	},
+	setup(props, { emit }) {
+		const shownForms = ref<FormsForm[]>([])
 
-	watch: {
-		forms: {
-			immediate: true,
-			handler() {
-				this.shownForms = [...this.forms]
+		watch(
+			() => props.forms,
+			() => {
+				shownForms.value = [...props.forms]
 			},
-		},
-	},
+			{ immediate: true },
+		)
 
-	methods: {
-		t,
+		const onCloneForm = (formId: number): void => {
+			emit('clone', formId)
+			emit('update:open', false)
+		}
 
-		onCloneForm(formId: number): void {
-			this.$emit('clone', formId)
-			this.$emit('update:open', false)
-		},
+		const onDelete = (form: FormsForm): void => {
+			shownForms.value = shownForms.value.filter(({ id }) => id !== form.id)
+		}
 
-		onDelete(form: FormsForm): void {
-			this.shownForms = this.shownForms.filter(({ id }) => id !== form.id)
-		},
+		return {
+			shownForms,
+			onCloneForm,
+			onDelete,
+			t,
+		}
 	},
 })
 </script>
diff --git a/src/components/OptionInputDialog.vue b/src/components/OptionInputDialog.vue
index 935b5ebfc..955827e7e 100644
--- a/src/components/OptionInputDialog.vue
+++ b/src/components/OptionInputDialog.vue
@@ -31,7 +31,7 @@
 import IconCheck from '@material-symbols/svg-400/outlined/check.svg?raw'
 import { showError } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import NcTextArea from '@nextcloud/vue/components/NcTextArea'
@@ -54,59 +54,54 @@ export default defineComponent({
 
 	emits: ['update:open', 'multipleAnswers'],
 
-	data() {
-		return {
-			enteredOptions: '' as string,
+	setup(props, { emit }) {
+		const enteredOptions = ref('')
+
+		const multipleOptions = computed(() => {
+			const allOptions = enteredOptions.value.split(/\r?\n/g)
+			return allOptions.filter((answer: string) => {
+				return answer.trim().length > 0
+			})
+		})
+
+		const onMultipleOptions = (): void => {
+			emit('update:open', false)
+			if (multipleOptions.value.length > 1) {
+				// extract all options entries to parent
+				emit('multipleAnswers', multipleOptions.value)
+				enteredOptions.value = ''
+				return
+			}
+			// in case of only one option, just show an error message because it is probably missuse of the feature
+			showError(t('forms', 'Options should be separated by new line!'))
 		}
-	},
 
-	computed: {
-		buttons(): Array<{
-			label: string
-			callback: () => void
-			type?: 'primary'
-			icon?: string
-		}> {
+		const buttons = computed(() => {
 			return [
 				{
 					label: t('forms', 'Cancel'),
 					callback: () => {
-						this.$emit('update:open', false)
+						emit('update:open', false)
 					},
 				},
 				{
 					label: t('forms', 'Add options'),
-					type: 'primary',
+					type: 'primary' as const,
 					icon: IconCheck,
 					callback: () => {
-						this.onMultipleOptions()
+						onMultipleOptions()
 					},
 				},
 			]
-		},
-
-		multipleOptions(): string[] {
-			const allOptions = this.enteredOptions.split(/\r?\n/g)
-			return allOptions.filter((answer: string) => {
-				return answer.trim().length > 0
-			})
-		},
-	},
-
-	methods: {
-		t,
+		})
 
-		onMultipleOptions(): void {
-			this.$emit('update:open', false)
-			if (this.multipleOptions.length > 1) {
-				// extract all options entries to parent
-				this.$emit('multipleAnswers', this.multipleOptions)
-				this.enteredOptions = ''
-				return
-			}
-			// in case of only one option, just show an error message because it is probably missuse of the feature
-			showError(t('forms', 'Options should be separated by new line!'))
-		},
+		return {
+			enteredOptions,
+			buttons,
+			multipleOptions,
+			onMultipleOptions,
+			t,
+		}
 	},
 })
 </script>
diff --git a/src/components/PaginationToolbar.vue b/src/components/PaginationToolbar.vue
index 7027c2621..80ed16d30 100644
--- a/src/components/PaginationToolbar.vue
+++ b/src/components/PaginationToolbar.vue
@@ -69,7 +69,7 @@ import IconChevronRight from '@material-symbols/svg-400/outlined/chevron_right.s
 import PageFirstIcon from '@material-symbols/svg-400/outlined/first_page.svg?raw'
 import PageLastIcon from '@material-symbols/svg-400/outlined/last_page.svg?raw'
 import { t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
@@ -101,38 +101,31 @@ export default defineComponent({
 
 	emits: ['update:offset'],
 
-	setup() {
+	setup(props, { emit }) {
+		const totalPages = computed(() => {
+			return Math.max(1, Math.ceil(props.totalItemsCount / props.limit))
+		})
+		const allPageNumbersArray = computed(() => {
+			return Array.from({ length: totalPages.value }, (_, index) => 1 + index)
+		})
+		const pageNumber = computed({
+			get: () => Math.floor(props.offset / props.limit) + 1,
+			set: (pageNumberValue: number) => {
+				emit('update:offset', (Number(pageNumberValue) - 1) * props.limit)
+			},
+		})
+
 		return {
 			IconChevronLeft,
 			IconChevronRight,
 			PageFirstIcon,
 			PageLastIcon,
+			allPageNumbersArray,
+			totalPages,
+			pageNumber,
 			t,
 		}
 	},
-
-	computed: {
-		allPageNumbersArray(): number[] {
-			return Array.from(
-				{ length: this.totalPages },
-				(value, index) => 1 + index,
-			)
-		},
-
-		totalPages(): number {
-			return Math.max(1, Math.ceil(this.totalItemsCount / this.limit))
-		},
-
-		pageNumber: {
-			get(): number {
-				return Math.floor(this.offset / this.limit) + 1
-			},
-
-			set(pageNumber: number) {
-				this.$emit('update:offset', (Number(pageNumber) - 1) * this.limit)
-			},
-		},
-	},
 })
 </script>
 
diff --git a/src/components/PillMenu.vue b/src/components/PillMenu.vue
index e05b34805..9087ed279 100644
--- a/src/components/PillMenu.vue
+++ b/src/components/PillMenu.vue
@@ -31,7 +31,7 @@
 import type { PropType } from 'vue'
 
 import { useIsSmallMobile } from '@nextcloud/vue'
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcRadioGroup from '@nextcloud/vue/components/NcRadioGroup'
 import NcRadioGroupButton from '@nextcloud/vue/components/NcRadioGroupButton'
@@ -90,34 +90,29 @@ export default defineComponent({
 
 	emits: ['update:active'],
 
-	setup() {
-		return {
-			isMobile: useIsSmallMobile(),
-		}
-	},
+	setup(props, { emit }) {
+		const isMobile = useIsSmallMobile()
+		const pillOptions = computed(() => props.options as PillOption[])
+		const activeId = computed(() => String(props.active.id))
 
-	computed: {
-		pillOptions(): PillOption[] {
-			return this.options as PillOption[]
-		},
-
-		activeId(): string {
-			return String(this.active.id)
-		},
-	},
-
-	methods: {
 		/**
 		 * Emit the full selected option to keep PillMenu API stable
 		 *
 		 * @param optionId The selected option id
 		 */
-		onUpdateActive(optionId: string): void {
-			const option = this.pillOptions.find(
+		const onUpdateActive = (optionId: string): void => {
+			const option = pillOptions.value.find(
 				(entry) => String(entry.id) === optionId,
 			)
-			if (option) this.$emit('update:active', option)
-		},
+			if (option) emit('update:active', option)
+		}
+
+		return {
+			activeId,
+			isMobile,
+			pillOptions,
+			onUpdateActive,
+		}
 	},
 })
 </script>
diff --git a/src/components/QRDialog.vue b/src/components/QRDialog.vue
index d0040c998..8ffd44b70 100644
--- a/src/components/QRDialog.vue
+++ b/src/components/QRDialog.vue
@@ -26,7 +26,7 @@
 <script lang="ts">
 import { t } from '@nextcloud/l10n'
 import QRCode from 'qrcode'
-import { defineComponent } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import logger from '../utils/Logger.ts'
 
@@ -51,43 +51,39 @@ export default defineComponent({
 
 	emits: ['closed'],
 
-	setup() {
-		return {
-			t,
-		}
-	},
+	setup(props) {
+		const uri = ref('')
+		const isOpen = ref(false)
 
-	data() {
-		return {
-			uri: '' as string,
-			isOpen: false as boolean,
-		}
-	},
-
-	watch: {
-		text: {
-			immediate: true,
-			handler(): void {
-				this.generateQr()
-				this.isOpen = !!this.text
-			},
-		},
-	},
-
-	methods: {
-		async generateQr(): Promise<void> {
-			if (this.text) {
+		const generateQr = async (): Promise<void> => {
+			if (props.text) {
 				try {
-					this.uri = await QRCode.toDataURL(this.text, {
+					uri.value = await QRCode.toDataURL(props.text, {
 						width: 256,
 					})
 				} catch (err) {
 					logger.error(err instanceof Error ? err : String(err))
 				}
 			} else {
-				this.uri = ''
+				uri.value = ''
 			}
-		},
+		}
+
+		watch(
+			() => props.text,
+			async () => {
+				await generateQr()
+				isOpen.value = !!props.text
+			},
+			{ immediate: true },
+		)
+
+		return {
+			isOpen,
+			uri,
+			t,
+			generateQr,
+		}
 	},
 })
 </script>
diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index 6a6a493ab..431d0ff96 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -127,7 +127,7 @@
 				class="question__header__description">
 				<textarea
 					v-if="!readOnly"
-					ref="description"
+					ref="descriptionField"
 					dir="auto"
 					:value="description"
 					:placeholder="
@@ -173,7 +173,7 @@ import IconArrowDown from '@material-symbols/svg-400/outlined/keyboard_arrow_dow
 import IconArrowUp from '@material-symbols/svg-400/outlined/keyboard_arrow_up.svg?raw'
 import IconDotsHorizontal from '@material-symbols/svg-400/outlined/more_horiz.svg?raw'
 import { t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, inject, nextTick, onMounted, ref } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
@@ -198,8 +198,6 @@ export default defineComponent({
 		NcNoteCard,
 	},
 
-	inject: ['$markdownit'],
-
 	props: {
 		index: {
 			type: Number,
@@ -248,6 +246,7 @@ export default defineComponent({
 
 		contentValid: {
 			type: Boolean,
+			// eslint-disable-next-line vue/no-boolean-default
 			default: true,
 		},
 
@@ -288,158 +287,154 @@ export default defineComponent({
 		'clone',
 	],
 
-	setup() {
-		return {
-			IconAsterisk,
-			IconAlertCircleOutline,
-			IconArrowDown,
-			IconArrowUp,
-			IconContentCopy,
-			IconDelete,
-			IconDotsHorizontal,
-			IconDragIndicator,
-			IconIdentifier,
-			t,
-		}
-	},
+	setup(props, { emit }) {
+		const markdownit = inject<{ render: (value: string) => string } | null>(
+			'$markdownit',
+			null,
+		)
+		const descriptionField = ref<HTMLTextAreaElement | null>(null)
+		const buttonUp = ref<{ $el?: HTMLElement } | undefined>(undefined)
+		const buttonDown = ref<{ $el?: HTMLElement } | undefined>(undefined)
 
-	computed: {
 		/**
 		 * Extend text with asterisk if question is required
 		 */
-		computedText(): string {
-			if (this.isRequired) {
-				return this.text + ' *'
+		const computedText = computed(() => {
+			if (props.isRequired) {
+				return props.text + ' *'
 			}
-			return this.text
-		},
+			return props.text
+		})
 
-		computedDescription(): string {
-			return (
-				this.$markdownit as { render: (value: string) => string }
-			).render(this.description)
-		},
+		const computedDescription = computed(() => {
+			if (!markdownit) {
+				return props.description
+			}
+			return markdownit.render(props.description)
+		})
 
 		/**
 		 * Question valid, if text not empty and content valid
 		 *
 		 * @return true if question valid
 		 */
-		questionValid(): boolean {
-			return !!this.text && this.contentValid
-		},
-
-		actionsId(): string {
-			return 'q' + this.index + '_actions'
-		},
-
-		titleId(): string {
-			return 'q' + this.index + '_title'
-		},
-
-		descriptionId(): string {
-			return 'q' + this.index + '_desc'
-		},
-
-		hasDescription(): boolean {
-			return this.description !== ''
-		},
-
-		hasError(): boolean {
-			return !!this.errorMessage
-		},
-
-		hasInfo(): boolean {
-			return !!this.infoMessage
-		},
-
-		errorId(): string {
-			return `q${this.index}_error`
-		},
-
-		infoId(): string {
-			return `q${this.index}_info`
-		},
-	},
+		const questionValid = computed(() => !!props.text && props.contentValid)
+		const actionsId = computed(() => 'q' + props.index + '_actions')
+		const titleId = computed(() => 'q' + props.index + '_title')
+		const descriptionId = computed(() => 'q' + props.index + '_desc')
+		const hasDescription = computed(() => props.description !== '')
+		const hasError = computed(() => !!props.errorMessage)
+		const hasInfo = computed(() => !!props.infoMessage)
+		const errorId = computed(() => `q${props.index}_error`)
+		const infoId = computed(() => `q${props.index}_info`)
+
+		const resizeDescription = (): void => {
+			// next tick ensures that the textarea is attached to DOM
+			nextTick(() => {
+				const textarea = descriptionField.value
+				if (textarea) {
+					textarea.style.cssText = 'height: 0'
+					textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px`
+				}
+			})
+		}
 
-	// Ensure description is sized correctly on initial render
-	mounted(): void {
-		this.$nextTick(() => this.resizeDescription())
-	},
+		// Ensure description is sized correctly on initial render
+		onMounted(() => {
+			nextTick(() => resizeDescription())
+		})
 
-	methods: {
-		onTitleChange(event: Event): void {
+		const onTitleChange = (event: Event): void => {
 			const target = event.target as HTMLInputElement | null
 			if (!target) {
 				return
 			}
-			this.$emit('update:text', target.value)
-		},
+			emit('update:text', target.value)
+		}
 
-		onDescriptionChange(event: Event): void {
+		const onDescriptionChange = (event: Event): void => {
 			const target = event.target as HTMLTextAreaElement | null
 			if (!target) {
 				return
 			}
-			this.resizeDescription()
-			this.$emit('update:description', target.value)
-		},
-
-		onNameChange(name: string): void {
-			this.$emit('update:name', name)
-		},
+			resizeDescription()
+			emit('update:description', target.value)
+		}
 
-		onRequiredChange(isRequired: boolean): void {
-			this.$emit('update:isRequired', isRequired)
-		},
+		const onNameChange = (name: string): void => {
+			emit('update:name', name)
+		}
 
-		resizeDescription(): void {
-			// next tick ensures that the textarea is attached to DOM
-			this.$nextTick(() => {
-				const textarea = this.$refs.description as
-					HTMLTextAreaElement | undefined
-				if (textarea) {
-					textarea.style.cssText = 'height: 0'
-					// include 2px border
-					textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px`
-				}
-			})
-		},
+		const onRequiredChange = (isRequired: boolean): void => {
+			emit('update:isRequired', isRequired)
+		}
 
 		/**
 		 * Reorder question but keep focus on the button
 		 */
-		onMoveDown(): void {
-			this.$emit('moveDown')
-			this.$nextTick(() => {
-				const buttonDown = this.$refs.buttonDown as
-					{ $el?: HTMLElement } | undefined
-				buttonDown?.$el?.focus()
+		const onMoveDown = (): void => {
+			emit('moveDown')
+			nextTick(() => {
+				buttonDown.value?.$el?.focus()
 			})
-		},
+		}
 
-		onMoveUp(): void {
-			this.$emit('moveUp')
-			this.$nextTick(() => {
-				const buttonUp = this.$refs.buttonUp as
-					{ $el?: HTMLElement } | undefined
-				buttonUp?.$el?.focus()
+		const onMoveUp = (): void => {
+			emit('moveUp')
+			nextTick(() => {
+				buttonUp.value?.$el?.focus()
 			})
-		},
+		}
 
 		/**
 		 * Delete this question
 		 */
-		onDelete(): void {
-			this.$emit('delete')
-		},
+		const onDelete = (): void => {
+			emit('delete')
+		}
 
 		/**
 		 * Clone this question
 		 */
-		onClone(): void {
-			this.$emit('clone')
-		},
+		const onClone = (): void => {
+			emit('clone')
+		}
+
+		return {
+			buttonUp,
+			buttonDown,
+			descriptionField,
+			IconAsterisk,
+			IconAlertCircleOutline,
+			IconArrowDown,
+			IconArrowUp,
+			IconContentCopy,
+			IconDelete,
+			IconDotsHorizontal,
+			IconDragIndicator,
+			IconIdentifier,
+			t,
+			computedText,
+			computedDescription,
+			questionValid,
+			actionsId,
+			titleId,
+			descriptionId,
+			hasDescription,
+			hasError,
+			hasInfo,
+			errorId,
+			infoId,
+			resizeDescription,
+			onTitleChange,
+			onDescriptionChange,
+			onNameChange,
+			onRequiredChange,
+			onMoveDown,
+			onMoveUp,
+			onDelete,
+			onClone,
+		}
 	},
 })
 </script>
diff --git a/src/components/Questions/QuestionColor.vue b/src/components/Questions/QuestionColor.vue
index 416c42370..26540f948 100644
--- a/src/components/Questions/QuestionColor.vue
+++ b/src/components/Questions/QuestionColor.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 NcButton from '@nextcloud/vue/components/NcButton'
 import NcColorPicker from '@nextcloud/vue/components/NcColorPicker'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
@@ -75,45 +75,42 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const question = useQuestion(props, { emit })
 
-		return {
-			...question,
-			IconClose,
-			t,
-		}
-	},
-
-	data() {
-		return {
-			isLoading: false as boolean,
-		}
-	},
-
-	computed: {
-		colorPickerPlaceholder(): string {
-			return this.readOnly
-				? this.answerType.submitPlaceholder
-				: this.answerType.createPlaceholder
-		},
-
-		pickedColor(): string {
-			return (this.values[0] as string | null | undefined) ?? ''
-		},
-	},
-
-	methods: {
-		async validate(): Promise<boolean> {
-			if (this.isRequired && this.pickedColor === '') {
-				this.errorMessage = t('forms', 'You must answer this question')
+		const colorPickerPlaceholder = computed(() => {
+			return props.readOnly
+				? props.answerType.submitPlaceholder
+				: props.answerType.createPlaceholder
+		})
+
+		const pickedColor = computed(() => {
+			return (props.values[0] as string | null | undefined) ?? ''
+		})
+
+		const validate = async (): Promise<boolean> => {
+			if (props.isRequired && pickedColor.value === '') {
+				question.errorMessage.value = t(
+					'forms',
+					'You must answer this question',
+				)
 				return false
 			}
 
-			this.errorMessage = null
+			question.errorMessage.value = null
 			return true
-		},
+		}
+
+		const onUpdatePickedColor = (color: string | undefined): void => {
+			emit('update:values', [color ?? ''])
+		}
 
-		onUpdatePickedColor(color: string | undefined): void {
-			this.$emit('update:values', [color ?? ''])
-		},
+		return {
+			...question,
+			IconClose,
+			t,
+			colorPickerPlaceholder,
+			pickedColor,
+			validate,
+			onUpdatePickedColor,
+		}
 	},
 })
 </script>
diff --git a/src/components/Questions/QuestionDate.vue b/src/components/Questions/QuestionDate.vue
index 664f8437d..90c3ae782 100644
--- a/src/components/Questions/QuestionDate.vue
+++ b/src/components/Questions/QuestionDate.vue
@@ -111,7 +111,7 @@
 <script lang="ts">
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePicker'
@@ -154,162 +154,166 @@ export default defineComponent({
 	emits: [...QUESTION_EMITS, 'update:values'],
 
 	setup(props, { emit }) {
-		return useQuestion(props, { emit })
-	},
-
-	data() {
-		return {
-			extraSettingsFormatter: {
-				stringify: this.stringifyDate,
-				parse: this.parseTimestampToDate,
-			},
-
-			svgClockLoader80,
-			svgClockLoader20,
-			svgEventIcon,
-			svgTodayIcon,
-			t,
-		}
-	},
+		const question = useQuestion(props, { emit })
 
-	computed: {
-		isRangeQuestion(): boolean {
-			const extraSettings = this.extraSettings as
+		const isRangeQuestion = computed(() => {
+			const extraSettings = props.extraSettings as
 				QuestionDateExtraSettings | undefined
 			return extraSettings?.dateRange || extraSettings?.timeRange
 				? true
 				: false
-		},
+		})
+
+		/**
+		 * Datepicker timestamp to string
+		 *
+		 * @param datetime the datepicker Date
+		 * @return
+		 */
+		const stringifyDate = (datetime: Date): string => {
+			return moment(datetime).format('L')
+		}
+
+		/**
+		 * Form expires timestamp to Date of the datepicker
+		 *
+		 * @param value the expires timestamp
+		 * @return
+		 */
+		const parseTimestampToDate = (value: number): Date => {
+			return moment(value, 'X').toDate()
+		}
 
-		datetimePickerPlaceholder(): string {
-			if (this.readOnly) {
-				return this.isRangeQuestion
-					? this.answerType.submitPlaceholderRange
-					: this.answerType.submitPlaceholder
+		/**
+		 * DateTimepicker show text in picker
+		 * Format depends on component-type date/datetime
+		 *
+		 * @param date the selected datepicker Date
+		 * @return
+		 */
+		const stringify = (date: Date | Date[]): string => {
+			if (isRangeQuestion.value && Array.isArray(date)) {
+				return `${moment(date[0]).format(props.answerType.momentFormat)} - ${moment(date[1]).format(props.answerType.momentFormat)}`
 			}
-			return this.isRangeQuestion
-				? this.answerType.createPlaceholderRange
-				: this.answerType.createPlaceholder
-		},
-
-		dateTimePickerType(): PickerType {
-			return this.isRangeQuestion
-				? (`${this.answerType.pickerType}-range` as PickerType)
-				: (this.answerType.pickerType as PickerType)
-		},
-
-		time(): Date | [Date, Date] | null {
-			if (this.isRangeQuestion) {
-				const firstValue = this.values?.[0] as string | undefined
-				const secondValue = this.values?.[1] as string | undefined
+			return moment(date).format(props.answerType.momentFormat)
+		}
+
+		/**
+		 * Reinterpret a stored date
+		 *
+		 * @param dateString Stringified date
+		 * @return
+		 */
+		const parse = (dateString: string): Date => {
+			return moment(dateString, [
+				props.answerType.momentFormat,
+				props.answerType.storageFormat,
+			]).toDate()
+		}
+
+		const datetimePickerPlaceholder = computed(() => {
+			if (props.readOnly) {
+				return isRangeQuestion.value
+					? props.answerType.submitPlaceholderRange
+					: props.answerType.submitPlaceholder
+			}
+			return isRangeQuestion.value
+				? props.answerType.createPlaceholderRange
+				: props.answerType.createPlaceholder
+		})
+
+		const dateTimePickerType = computed<PickerType>(() => {
+			return isRangeQuestion.value
+				? (`${props.answerType.pickerType}-range` as PickerType)
+				: (props.answerType.pickerType as PickerType)
+		})
+
+		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
 				return firstValue && secondValue
-					? [this.parse(firstValue), this.parse(secondValue)]
+					? [parse(firstValue), parse(secondValue)]
 					: null
 			}
-			const value = this.values?.[0] as string | undefined
-			return value ? this.parse(value) : null
-		},
+			const value = props.values?.[0] as string | undefined
+			return value ? parse(value) : null
+		})
 
 		/**
 		 * The maximum allowable date for the date input field
 		 */
-		dateMax(): Date | undefined {
-			const extraSettings = this.extraSettings as
+		const dateMax = computed<Date | undefined>(() => {
+			const extraSettings = props.extraSettings as
 				QuestionDateExtraSettings | undefined
 			return extraSettings?.dateMax
 				? moment(extraSettings.dateMax, 'X').toDate()
 				: undefined
-		},
+		})
 
 		/**
 		 * The minimum allowable date for the date input field
 		 */
-		dateMin(): Date | undefined {
-			const extraSettings = this.extraSettings as
+		const dateMin = computed<Date | undefined>(() => {
+			const extraSettings = props.extraSettings as
 				QuestionDateExtraSettings | undefined
 			return extraSettings?.dateMin
 				? moment(extraSettings.dateMin, 'X').toDate()
 				: undefined
-		},
+		})
 
-		dateRange(): boolean {
-			const extraSettings = this.extraSettings as
+		const dateRange = computed(() => {
+			const extraSettings = props.extraSettings as
 				QuestionDateExtraSettings | undefined
 			return extraSettings?.dateRange ?? false
-		},
+		})
 
 		/**
 		 * The maximum allowable time for the time input field
 		 */
-		timeMax(): Date | undefined {
-			const extraSettings = this.extraSettings as
+		const timeMax = computed<Date | undefined>(() => {
+			const extraSettings = props.extraSettings as
 				QuestionDateExtraSettings | undefined
 			return extraSettings?.timeMax
 				? moment(
 						extraSettings.timeMax,
-						this.answerType.storageFormat,
+						props.answerType.storageFormat,
 					).toDate()
 				: undefined
-		},
+		})
 
 		/**
 		 * The minimum allowable time for the time input field
 		 */
-		timeMin(): Date | undefined {
-			const extraSettings = this.extraSettings as
+		const timeMin = computed<Date | undefined>(() => {
+			const extraSettings = props.extraSettings as
 				QuestionDateExtraSettings | undefined
 			return extraSettings?.timeMin
 				? moment(
 						extraSettings.timeMin,
-						this.answerType.storageFormat,
+						props.answerType.storageFormat,
 					).toDate()
 				: undefined
-		},
+		})
 
-		timeRange(): boolean {
-			const extraSettings = this.extraSettings as
+		const timeRange = computed(() => {
+			const extraSettings = props.extraSettings as
 				QuestionDateExtraSettings | undefined
 			return extraSettings?.timeRange ?? false
-		},
-	},
-
-	methods: {
-		async validate(): Promise<boolean> {
-			if (this.isRequired && this.time === null) {
-				this.errorMessage = t('forms', 'You must answer this question')
+		})
+
+		const validate = async (): Promise<boolean> => {
+			if (props.isRequired && time.value === null) {
+				question.errorMessage.value = t(
+					'forms',
+					'You must answer this question',
+				)
 				return false
 			}
 
-			this.errorMessage = null
+			question.errorMessage.value = null
 			return true
-		},
-
-		/**
-		 * DateTimepicker show text in picker
-		 * Format depends on component-type date/datetime
-		 *
-		 * @param date the selected datepicker Date
-		 * @return
-		 */
-		stringify(date: Date | Date[]): string {
-			if (this.isRangeQuestion && Array.isArray(date)) {
-				return `${moment(date[0]).format(this.answerType.momentFormat)} - ${moment(date[1]).format(this.answerType.momentFormat)}`
-			}
-			return moment(date).format(this.answerType.momentFormat)
-		},
-
-		/**
-		 * Reinterpret a stored date
-		 *
-		 * @param dateString Stringified date
-		 * @return
-		 */
-		parse(dateString: string): Date {
-			return moment(dateString, [
-				this.answerType.momentFormat,
-				this.answerType.storageFormat,
-			]).toDate()
-		},
+		}
 
 		/**
 		 * Handles the change event for the maximum date input.
@@ -317,11 +321,11 @@ export default defineComponent({
 		 *
 		 * @param value - The new maximum date value. Can be a string or a Date object.
 		 */
-		onDateMaxChange(value: string | Date): void {
-			this.onExtraSettingsChange({
+		const onDateMaxChange = (value: string | Date): void => {
+			question.onExtraSettingsChange({
 				dateMax: parseInt(moment(value).format('X')),
 			})
-		},
+		}
 
 		/**
 		 * Handles the change event for the minimum date input.
@@ -329,11 +333,11 @@ export default defineComponent({
 		 *
 		 * @param value - The new minimum date value. Can be a string or a Date object.
 		 */
-		onDateMinChange(value: string | Date): void {
-			this.onExtraSettingsChange({
+		const onDateMinChange = (value: string | Date): void => {
+			question.onExtraSettingsChange({
 				dateMin: parseInt(moment(value).format('X')),
 			})
-		},
+		}
 
 		/**
 		 * Handles the change event for the date range selection.
@@ -342,9 +346,11 @@ export default defineComponent({
 		 * @param value - The new value of the date range selection.
 		 *                          If true, the date range is enabled; otherwise, null.
 		 */
-		onDateRangeChange(value: boolean): void {
-			this.onExtraSettingsChange({ dateRange: value === true ? true : null })
-		},
+		const onDateRangeChange = (value: boolean): void => {
+			question.onExtraSettingsChange({
+				dateRange: value === true ? true : null,
+			})
+		}
 
 		/**
 		 * Handles the change event for the maximum time input.
@@ -352,17 +358,17 @@ export default defineComponent({
 		 *
 		 * @param value - The new maximum date value. Can be a string or a Date object.
 		 */
-		onTimeMaxChange(value: string | Date | null): void {
-			this.onExtraSettingsChange({
+		const onTimeMaxChange = (value: string | Date | null): void => {
+			question.onExtraSettingsChange({
 				timeMax:
 					value === null
 					|| (value instanceof Date
 						&& value.getTime()
 							=== new Date(new Date().setHours(24, 0, 0, 0)).getTime())
 						? null
-						: moment(value).format(this.answerType.storageFormat),
+						: moment(value).format(props.answerType.storageFormat),
 			})
-		},
+		}
 
 		/**
 		 * Handles the change event for the minimum date input.
@@ -370,17 +376,17 @@ export default defineComponent({
 		 *
 		 * @param value - The new minimum date value. Can be a string or a Date object.
 		 */
-		onTimeMinChange(value: string | Date | null): void {
-			this.onExtraSettingsChange({
+		const onTimeMinChange = (value: string | Date | null): void => {
+			question.onExtraSettingsChange({
 				timeMin:
 					value === null
 					|| (value instanceof Date
 						&& value.getTime()
 							=== new Date(new Date().setHours(0, 0, 0, 0)).getTime())
 						? null
-						: moment(value).format(this.answerType.storageFormat),
+						: moment(value).format(props.answerType.storageFormat),
 			})
-		},
+		}
 
 		/**
 		 * Handles the change event for the date range selection.
@@ -389,33 +395,35 @@ export default defineComponent({
 		 * @param value - The new value of the date range selection.
 		 *                          If true, the date range is enabled; otherwise, null.
 		 */
-		onTimeRangeChange(value: boolean): void {
-			this.onExtraSettingsChange({ timeRange: value === true ? true : null })
-		},
+		const onTimeRangeChange = (value: boolean): void => {
+			question.onExtraSettingsChange({
+				timeRange: value === true ? true : null,
+			})
+		}
 
 		/**
 		 * Store Value
 		 *
 		 * @param date The date or date range to store
 		 */
-		onValueChange(date: Date | [Date, Date] | null): void {
+		const onValueChange = (date: Date | [Date, Date] | null): void => {
 			if (!date) {
-				this.$emit('update:values', [])
+				emit('update:values', [])
 				return
 			}
 
-			if (this.isRangeQuestion && Array.isArray(date)) {
-				this.$emit('update:values', [
-					moment(date[0]).format(this.answerType.storageFormat),
-					moment(date[1]).format(this.answerType.storageFormat),
+			if (isRangeQuestion.value && Array.isArray(date)) {
+				emit('update:values', [
+					moment(date[0]).format(props.answerType.storageFormat),
+					moment(date[1]).format(props.answerType.storageFormat),
 				])
 				return
-			} else {
-				this.$emit('update:values', [
-					moment(date).format(this.answerType.storageFormat),
-				])
 			}
-		},
+
+			emit('update:values', [
+				moment(date).format(props.answerType.storageFormat),
+			])
+		}
 
 		/**
 		 * Determines if a given date should be disabled.
@@ -423,12 +431,12 @@ export default defineComponent({
 		 * @param date - The date to check.
 		 * @return - Returns true if the date should be disabled, otherwise false.
 		 */
-		disabledDates(date: Date): boolean {
+		const disabledDates = (date: Date): boolean => {
 			return Boolean(
-				(this.dateMin && date < this.dateMin)
-				|| (this.dateMax && date > this.dateMax),
+				(dateMin.value && date < dateMin.value)
+				|| (dateMax.value && date > dateMax.value),
 			)
-		},
+		}
 
 		/**
 		 * Determines if a given time should be disabled.
@@ -436,32 +444,50 @@ export default defineComponent({
 		 * @param time - The time to check.
 		 * @return - Returns true if the time should be disabled, otherwise false.
 		 */
-		disabledTimes(time: Date): boolean {
+		const disabledTimes = (time: Date): boolean => {
 			return Boolean(
-				(this.timeMin && time < this.timeMin)
-				|| (this.timeMax && time > this.timeMax),
+				(timeMin.value && time < timeMin.value)
+				|| (timeMax.value && time > timeMax.value),
 			)
-		},
+		}
 
-		/**
-		 * Datepicker timestamp to string
-		 *
-		 * @param datetime the datepicker Date
-		 * @return
-		 */
-		stringifyDate(datetime: Date): string {
-			return moment(datetime).format('L')
-		},
+		return {
+			...question,
+			extraSettingsFormatter: {
+				stringify: stringifyDate,
+				parse: parseTimestampToDate,
+			},
 
-		/**
-		 * Form expires timestamp to Date of the datepicker
-		 *
-		 * @param value the expires timestamp
-		 * @return
-		 */
-		parseTimestampToDate(value: number): Date {
-			return moment(value, 'X').toDate()
-		},
+			svgClockLoader80,
+			svgClockLoader20,
+			svgEventIcon,
+			svgTodayIcon,
+			t,
+			isRangeQuestion,
+			datetimePickerPlaceholder,
+			dateTimePickerType,
+			time,
+			dateMax,
+			dateMin,
+			dateRange,
+			timeMax,
+			timeMin,
+			timeRange,
+			validate,
+			stringify,
+			parse,
+			onDateMaxChange,
+			onDateMinChange,
+			onDateRangeChange,
+			onTimeMaxChange,
+			onTimeMinChange,
+			onTimeRangeChange,
+			onValueChange,
+			disabledDates,
+			disabledTimes,
+			stringifyDate,
+			parseTimestampToDate,
+		}
 	},
 })
 </script>
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
index cf0b306d5..7233a0d4f 100644
--- a/src/components/Questions/QuestionDropdown.vue
+++ b/src/components/Questions/QuestionDropdown.vue
@@ -104,7 +104,7 @@ import type { FormsOption } from '../../models/Entities.d.ts'
 
 import IconContentPaste from '@material-symbols/svg-400/outlined/content_paste.svg?raw'
 import { t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, nextTick, ref } from 'vue'
 import { VueDraggable as Draggable } from 'vue-draggable-plus'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
@@ -146,100 +146,117 @@ 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 isOptionDialogShown = ref(false)
 
-		return {
-			...question,
-			...questionMultiple,
-			IconContentPaste,
-			t,
-		}
-	},
-
-	data() {
-		return {
-			isDragging: false as boolean,
-			isLoading: false as boolean,
-			isOptionDialogShown: false as boolean,
-			OptionType,
-		}
-	},
-
-	computed: {
-		selectOptionPlaceholder(): string {
-			if (this.readOnly) {
-				return this.answerType.submitPlaceholder
+		const selectOptionPlaceholder = computed(() => {
+			if (props.readOnly) {
+				return props.answerType.submitPlaceholder
 			}
-			return this.answerType.createPlaceholder
-		},
+			return props.answerType.createPlaceholder
+		})
 
-		isMultiple(): boolean {
+		const isMultiple = computed(() => {
 			// This can be extended if we want to include support for <select multiple>
 			return false
-		},
+		})
 
-		shiftDragHandle(): boolean {
-			return !this.readOnly && this.options.length !== 0 && !this.isLastEmpty
-		},
+		const shiftDragHandle = computed(() => {
+			return (
+				!props.readOnly
+				&& props.options.length !== 0
+				&& !questionMultiple.isLastEmpty.value
+			)
+		})
 
-		selectedOption(): FormsOption | FormsOption[] | null {
-			if (!this.values) {
+		const selectedOption = computed<FormsOption | FormsOption[] | null>(() => {
+			if (!props.values) {
 				return null
 			}
 
-			const selected = this.values
+			const selected = props.values
 				.map((id: unknown) =>
-					this.options.find(
-						(option) => option.id === parseInt(String(id)),
+					props.options.find(
+						(option) => option.id === parseInt(String(id), 10),
 					),
 				)
 				.filter((option): option is FormsOption => option !== undefined)
 
-			return this.isMultiple ? selected : selected[0]
-		},
+			return isMultiple.value ? selected : (selected[0] ?? null)
+		})
 
-		choices: {
-			get(): FormsOption[] {
-				return this.sortOptionsOfType(this.options, OptionType.Choice)
+		const choices = computed<FormsOption[]>({
+			get() {
+				return questionMultiple.sortOptionsOfType(
+					props.options,
+					OptionType.Choice,
+				)
 			},
-
-			set(value: FormsOption[]): void {
-				this.updateOptionsOrder(value, OptionType.Choice)
+			set(value: FormsOption[]) {
+				questionMultiple.updateOptionsOrder(value, OptionType.Choice)
 			},
-		},
-	},
+		})
 
-	methods: {
-		async validate(): Promise<boolean> {
-			if (this.isRequired && this.areNoneChecked) {
-				this.errorMessage = t('forms', 'You must answer this question')
+		const validate = async (): Promise<boolean> => {
+			if (props.isRequired && questionMultiple.areNoneChecked.value) {
+				question.errorMessage.value = t(
+					'forms',
+					'You must answer this question',
+				)
 				return false
 			}
 
-			this.errorMessage = null
+			question.errorMessage.value = null
 			return true
-		},
+		}
 
-		onDragStart(): void {
-			this.isDragging = true
-		},
+		const onDragStart = (): void => {
+			isDragging.value = true
+		}
 
-		onDragEnd(): void {
-			this.$nextTick(() => {
-				this.isDragging = false
+		const onDragEnd = (): void => {
+			nextTick(() => {
+				isDragging.value = false
 			})
-		},
+		}
 
-		onInput(option: FormsOption | FormsOption[] | null): void {
+		const onInput = (option: FormsOption | FormsOption[] | null): void => {
 			if (Array.isArray(option)) {
-				this.$emit('update:values', [
-					...new Set(option.map((opt) => opt.id)),
-				])
+				emit('update:values', [...new Set(option.map((opt) => opt.id))])
 				return
 			}
 
 			// Simple select
-			this.$emit('update:values', option ? [option.id] : [])
-		},
+			emit('update:values', option ? [option.id] : [])
+		}
+
+		return {
+			...question,
+			...questionMultiple,
+			input,
+			choices,
+			isDragging,
+			isLoading,
+			isMultiple,
+			isOptionDialogShown,
+			IconContentPaste,
+			onDragEnd,
+			onDragStart,
+			onInput,
+			OptionType,
+			selectedOption,
+			selectOptionPlaceholder,
+			shiftDragHandle,
+			t,
+			validate,
+		}
 	},
 })
 </script>
diff --git a/src/components/Questions/QuestionFile.vue b/src/components/Questions/QuestionFile.vue
index 24a9075dc..377822a76 100644
--- a/src/components/Questions/QuestionFile.vue
+++ b/src/components/Questions/QuestionFile.vue
@@ -166,7 +166,7 @@ import { formatFileSize } from '@nextcloud/files'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, onMounted, ref } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
@@ -236,62 +236,46 @@ export default defineComponent({
 
 	setup(props, { emit }) {
 		const question = useQuestion(props, { emit })
-
-		return {
-			...question,
-			IconChevronLeft,
-			IconDelete,
-			IconFile,
-			IconFileDocumentAlert,
-			IconUpload,
-			IconUploadMultiple,
-			t,
-		}
-	},
-
-	data() {
-		return {
-			fileTypes,
-			fileLoading: false as boolean,
-			maxFileSizeUnit: Object.keys(FILE_SIZE_UNITS)[0] as FileSizeUnit,
-			maxFileSizeValue: 0 as number,
-			allowedFileTypesDialogOpened: false as boolean,
-		}
-	},
-
-	computed: {
-		availableUnits(): FileSizeUnit[] {
+		const fileInput = ref<HTMLInputElement | null>(null)
+		const fileLoading = ref(false)
+		const maxFileSizeUnit = ref<FileSizeUnit>(
+			Object.keys(FILE_SIZE_UNITS)[0] as FileSizeUnit,
+		)
+		const maxFileSizeValue = ref(0)
+		const allowedFileTypesDialogOpened = ref(false)
+
+		const availableUnits = computed<FileSizeUnit[]>(() => {
 			return Object.keys(FILE_SIZE_UNITS) as FileSizeUnit[]
-		},
+		})
 
-		uploadedFiles(): UploadedFileValue[] {
-			return this.values as UploadedFileValue[]
-		},
+		const uploadedFiles = computed<UploadedFileValue[]>(() => {
+			return props.values as UploadedFileValue[]
+		})
 
-		maxAllowedFilesCount(): number {
-			const extraSettings = this.extraSettings as
+		const maxAllowedFilesCount = computed<number>(() => {
+			const extraSettings = props.extraSettings as
 				QuestionFileExtraSettings | undefined
 			return extraSettings?.maxAllowedFilesCount ?? 1
-		},
+		})
 
-		allowedFileExtensions(): string[] {
-			const extraSettings = this.extraSettings as
+		const allowedFileExtensions = computed<string[]>(() => {
+			const extraSettings = props.extraSettings as
 				QuestionFileExtraSettings | undefined
 			return extraSettings?.allowedFileExtensions ?? []
-		},
+		})
 
-		allowedFileTypes(): string[] {
-			const extraSettings = this.extraSettings as
+		const allowedFileTypes = computed<string[]>(() => {
+			const extraSettings = props.extraSettings as
 				QuestionFileExtraSettings | undefined
 			return extraSettings?.allowedFileTypes ?? []
-		},
+		})
 
-		allowedFileTypesLabel(): string {
-			const allowedFileTypes: string[] = []
-			const extraSettings = this.extraSettings as
+		const allowedFileTypesLabel = computed<string>(() => {
+			const allowedFileTypeLabels: string[] = []
+			const extraSettings = props.extraSettings as
 				QuestionFileExtraSettings | undefined
 			if (extraSettings?.allowedFileTypes?.length) {
-				allowedFileTypes.push(
+				allowedFileTypeLabels.push(
 					...extraSettings.allowedFileTypes.map(
 						(type: string) => fileTypes[type].label,
 					),
@@ -299,53 +283,49 @@ export default defineComponent({
 			}
 
 			if (extraSettings?.allowedFileExtensions?.length) {
-				allowedFileTypes.push(...extraSettings.allowedFileExtensions)
+				allowedFileTypeLabels.push(...extraSettings.allowedFileExtensions)
 			}
-
-			if (allowedFileTypes.length) {
+			if (allowedFileTypeLabels.length) {
 				return t('forms', 'Allowed file types: {fileTypes}.', {
-					fileTypes: allowedFileTypes.join(', '),
+					fileTypes: allowedFileTypeLabels.join(', '),
 				})
 			}
 
 			return t('forms', 'All file types are allowed.')
-		},
-	},
+		})
 
-	mounted(): void {
-		const extraSettings = this.extraSettings as
-			QuestionFileExtraSettings | undefined
-		if (extraSettings?.maxFileSize) {
-			const maxFileSize = extraSettings.maxFileSize
-			Object.keys(FILE_SIZE_UNITS).forEach((unit) => {
-				const typedUnit = unit as FileSizeUnit
-				if (maxFileSize > FILE_SIZE_UNITS[typedUnit]) {
-					this.maxFileSizeUnit = typedUnit
-				}
-			})
+		onMounted(() => {
+			const extraSettings = props.extraSettings as
+				QuestionFileExtraSettings | undefined
+			if (extraSettings?.maxFileSize) {
+				const maxFileSize = extraSettings.maxFileSize
+				Object.keys(FILE_SIZE_UNITS).forEach((unit) => {
+					const typedUnit = unit as FileSizeUnit
+					if (maxFileSize > FILE_SIZE_UNITS[typedUnit]) {
+						maxFileSizeUnit.value = typedUnit
+					}
+				})
+				maxFileSizeValue.value =
+					maxFileSize / FILE_SIZE_UNITS[maxFileSizeUnit.value]
+			}
+		})
 
-			this.maxFileSizeValue =
-				maxFileSize / FILE_SIZE_UNITS[this.maxFileSizeUnit]
+		const toggleFileInput = (): void => {
+			;(fileInput.value as HTMLInputElement | undefined)?.click()
 		}
-	},
-
-	methods: {
-		toggleFileInput(): void {
-			;(this.$refs.fileInput as HTMLInputElement | undefined)?.click()
-		},
 
-		async onFileInput(): Promise<void> {
-			const fileInput = this.$refs.fileInput as HTMLInputElement | undefined
-			if (!fileInput?.files) {
+		const onFileInput = async (): Promise<void> => {
+			const currentInput = fileInput.value
+			if (!currentInput?.files) {
 				return
 			}
 
 			const formData = new FormData()
 			let fileInvalid = false
-			const extraSettings = this.extraSettings as
+			const extraSettings = props.extraSettings as
 				QuestionFileExtraSettings | undefined
 
-			;[...fileInput.files].forEach((file) => {
+			;[...currentInput.files].forEach((file) => {
 				formData.append('files[]', file)
 
 				if (
@@ -382,14 +362,14 @@ export default defineComponent({
 			const url = generateOcsUrl(
 				'apps/forms/api/v3/forms/{id}/submissions/files/{questionId}',
 				{
-					id: this.formId,
-					questionId: this.id,
+					id: props.formId,
+					questionId: props.id,
 				},
 			)
 
 			let response
 			try {
-				this.fileLoading = true
+				fileLoading.value = true
 				response = await axios.post(url, formData, {
 					headers: { 'Content-Type': 'multipart/form-data' },
 				})
@@ -420,101 +400,154 @@ export default defineComponent({
 
 				return
 			} finally {
-				this.fileLoading = false
-				fileInput.value = ''
+				fileLoading.value = false
+				currentInput.value = ''
 			}
 
-			this.$emit('update:values', [
-				...(this.values as UploadedFileValue[]),
+			emit('update:values', [
+				...(props.values as UploadedFileValue[]),
 				...(OcsResponse2Data(response) as UploadedFileValue[]),
 			])
-		},
+		}
 
-		onMaxAllowedFilesCountInput(maxAllowedFilesCount: number | string): void {
-			return this.onExtraSettingsChange({
-				maxAllowedFilesCount: parseInt(String(maxAllowedFilesCount), 10),
+		const onMaxAllowedFilesCountInput = (
+			maxAllowedFilesCountValue: number | string,
+		): void => {
+			question.onExtraSettingsChange({
+				maxAllowedFilesCount: parseInt(
+					String(maxAllowedFilesCountValue),
+					10,
+				),
 			})
-		},
+		}
 
-		onMaxFileSizeValueInput(maxFileSizeValue: number | string): void {
-			this.maxFileSizeValue = Number(maxFileSizeValue)
+		const onMaxFileSizeValueInput = (
+			newMaxFileSizeValue: number | string,
+		): void => {
+			maxFileSizeValue.value = Number(newMaxFileSizeValue)
 			const maxFileSize = Math.round(
-				Number(maxFileSizeValue) * FILE_SIZE_UNITS[this.maxFileSizeUnit],
+				Number(newMaxFileSizeValue) * FILE_SIZE_UNITS[maxFileSizeUnit.value],
 			)
 
-			return this.onExtraSettingsChange({ maxFileSize })
-		},
+			question.onExtraSettingsChange({ maxFileSize })
+		}
 
-		onMaxFileSizeUnitInput(maxFileSizeUnit: FileSizeUnit): void {
-			this.maxFileSizeUnit = maxFileSizeUnit
+		const onMaxFileSizeUnitInput = (newMaxFileSizeUnit: FileSizeUnit): void => {
+			maxFileSizeUnit.value = newMaxFileSizeUnit
 			const maxFileSize = Math.round(
-				this.maxFileSizeValue * FILE_SIZE_UNITS[maxFileSizeUnit],
+				maxFileSizeValue.value * FILE_SIZE_UNITS[newMaxFileSizeUnit],
 			)
 
-			return this.onExtraSettingsChange({ maxFileSize })
-		},
+			question.onExtraSettingsChange({ maxFileSize })
+		}
 
-		onAllowedFileTypesChange(fileType: string, allowed: boolean): void {
-			const extraSettings = this.extraSettings as
+		const onAllowedFileTypesChange = (
+			fileType: string,
+			allowed: boolean,
+		): void => {
+			const extraSettings = props.extraSettings as
 				QuestionFileExtraSettings | undefined
-			let allowedFileTypes = extraSettings?.allowedFileTypes ?? []
+			let allowedFileTypesList = extraSettings?.allowedFileTypes ?? []
 
 			if (allowed) {
-				allowedFileTypes.push(fileType)
+				allowedFileTypesList.push(fileType)
 			} else {
-				allowedFileTypes = allowedFileTypes.filter(
+				allowedFileTypesList = allowedFileTypesList.filter(
 					(type) => type !== fileType,
 				)
 			}
 
-			return this.onExtraSettingsChange({ allowedFileTypes })
-		},
+			question.onExtraSettingsChange({
+				allowedFileTypes: allowedFileTypesList,
+			})
+		}
 
-		onAllowedFileExtensionsAdded(fileExtension: string): void {
-			const extraSettings = this.extraSettings as
+		const onAllowedFileExtensionsAdded = (fileExtension: string): void => {
+			const extraSettings = props.extraSettings as
 				QuestionFileExtraSettings | undefined
-			const allowedFileExtensions = extraSettings?.allowedFileExtensions ?? []
-			allowedFileExtensions.push(fileExtension)
-
-			return this.onExtraSettingsChange({ allowedFileExtensions })
-		},
+			const allowedFileExtensionsList =
+				extraSettings?.allowedFileExtensions ?? []
+			allowedFileExtensionsList.push(fileExtension)
+			question.onExtraSettingsChange({
+				allowedFileExtensions: allowedFileExtensionsList,
+			})
+		}
 
-		onAllowedFileExtensionsDeleted(fileExtension: string): void {
-			const extraSettings = this.extraSettings as
+		const onAllowedFileExtensionsDeleted = (fileExtension: string): void => {
+			const extraSettings = props.extraSettings as
 				QuestionFileExtraSettings | undefined
-			let allowedFileExtensions = extraSettings?.allowedFileExtensions ?? []
-			allowedFileExtensions = allowedFileExtensions.filter(
+			let allowedFileExtensionsList =
+				extraSettings?.allowedFileExtensions ?? []
+			allowedFileExtensionsList = allowedFileExtensionsList.filter(
 				(extension) => extension !== fileExtension,
 			)
 
-			return this.onExtraSettingsChange({ allowedFileExtensions })
-		},
+			question.onExtraSettingsChange({
+				allowedFileExtensions: allowedFileExtensionsList,
+			})
+		}
 
-		onDeleteUploadedFile(uploadedFileId: number | string): void {
-			const values = (this.values as UploadedFileValue[]).filter(
+		const onDeleteUploadedFile = (uploadedFileId: number | string): void => {
+			const values = (props.values as UploadedFileValue[]).filter(
 				(value) => value.uploadedFileId !== uploadedFileId,
 			)
 
-			this.$emit('update:values', values)
-		},
+			emit('update:values', values)
+		}
 
-		async validate(): Promise<boolean> {
-			if (this.fileLoading) {
-				this.errorMessage = t(
+		const validate = async (): Promise<boolean> => {
+			if (fileLoading.value) {
+				question.errorMessage.value = t(
 					'forms',
 					'Please wait until the file has been uploaded.',
 				)
 				return false
 			}
 
-			if (this.isRequired && this.uploadedFiles.length === 0) {
-				this.errorMessage = t('forms', 'You must answer this question')
+			if (props.isRequired && uploadedFiles.value.length === 0) {
+				question.errorMessage.value = t(
+					'forms',
+					'You must answer this question',
+				)
 				return false
 			}
 
-			this.errorMessage = null
+			question.errorMessage.value = null
 			return true
-		},
+		}
+
+		return {
+			...question,
+			IconChevronLeft,
+			IconDelete,
+			IconFile,
+			IconFileDocumentAlert,
+			IconUpload,
+			IconUploadMultiple,
+			t,
+			fileInput,
+			fileTypes,
+			fileLoading,
+			maxFileSizeUnit,
+			maxFileSizeValue,
+			allowedFileTypesDialogOpened,
+			availableUnits,
+			uploadedFiles,
+			maxAllowedFilesCount,
+			allowedFileExtensions,
+			allowedFileTypes,
+			allowedFileTypesLabel,
+			toggleFileInput,
+			onFileInput,
+			onMaxAllowedFilesCountInput,
+			onMaxFileSizeValueInput,
+			onMaxFileSizeUnitInput,
+			onAllowedFileTypesChange,
+			onAllowedFileExtensionsAdded,
+			onAllowedFileExtensionsDeleted,
+			onDeleteUploadedFile,
+			validate,
+		}
 	},
 })
 </script>
diff --git a/src/components/Questions/QuestionGrid.vue b/src/components/Questions/QuestionGrid.vue
index 8bdcc1768..cff92a380 100644
--- a/src/components/Questions/QuestionGrid.vue
+++ b/src/components/Questions/QuestionGrid.vue
@@ -179,7 +179,7 @@
 import type { FormsOption } from '../../models/Entities.d.ts'
 
 import { n, t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, nextTick, ref } from 'vue'
 import { VueDraggable as Draggable } from 'vue-draggable-plus'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcInputField from '@nextcloud/vue/components/NcInputField'
@@ -229,67 +229,70 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const question = useQuestion(props, { emit })
 		const questionMultiple = useQuestionMultiple(props, { emit })
-
-		return {
-			...question,
-			...questionMultiple,
-			t,
-		}
-	},
-
-	data() {
-		return {
-			isDragging: false as boolean,
-			isLoading: false as boolean,
-			questionTypes: [
-				{ label: t('forms', 'Radio'), id: GridCellType.Radio },
-				{ label: t('forms', 'Checkbox'), id: GridCellType.Checkbox },
-				{ label: t('forms', 'Number'), id: GridCellType.Number },
-				{ label: t('forms', 'Text'), id: 'text' },
-			] as Array<{ label: string; id: GridQuestionType }>,
-		}
-	},
-
-	computed: {
-		isUnique(): boolean {
-			return this.answerType.unique === true
-		},
-
-		shiftDragHandle(): boolean {
-			return !this.readOnly && this.options.length !== 0 && !this.isLastEmpty
-		},
-
-		questionType(): GridQuestionType {
-			const extraSettings = this.extraSettings as
+		const input = ref<
+			Array<{
+				focus?: () => void
+				$props?: { optionType?: string; index?: number }
+			} | null>
+		>([])
+		const isDragging = ref(false)
+		const isLoading = ref(false)
+		const questionTypes = [
+			{ label: t('forms', 'Radio'), id: GridCellType.Radio },
+			{ label: t('forms', 'Checkbox'), id: GridCellType.Checkbox },
+			{ label: t('forms', 'Number'), id: GridCellType.Number },
+			{ label: t('forms', 'Text'), id: 'text' },
+		] as Array<{ label: string; id: GridQuestionType }>
+
+		const isUnique = computed(() => {
+			return props.answerType.unique === true
+		})
+
+		const shiftDragHandle = computed(() => {
+			return (
+				!props.readOnly
+				&& props.options.length !== 0
+				&& !questionMultiple.isLastEmpty.value
+			)
+		})
+
+		const questionType = computed<GridQuestionType>(() => {
+			const extraSettings = props.extraSettings as
 				QuestionGridExtraSettings | undefined
 			return extraSettings?.questionType ?? GridCellType.Radio
-		},
-
-		columns: {
-			get(): FormsOption[] {
-				return this.sortOptionsOfType(this.options, OptionType.Column)
+		})
+
+		const columns = computed<FormsOption[]>({
+			get() {
+				return questionMultiple.sortOptionsOfType(
+					props.options,
+					OptionType.Column,
+				)
 			},
 
 			set(value: FormsOption[]) {
-				this.updateOptionsOrder(value, OptionType.Column)
+				questionMultiple.updateOptionsOrder(value, OptionType.Column)
 			},
-		},
-
-		rows: {
-			get(): FormsOption[] {
-				return this.sortOptionsOfType(this.options, OptionType.Row)
+		})
+
+		const rows = computed<FormsOption[]>({
+			get() {
+				return questionMultiple.sortOptionsOfType(
+					props.options,
+					OptionType.Row,
+				)
 			},
 
 			set(value: FormsOption[]) {
-				this.updateOptionsOrder(value, OptionType.Row)
+				questionMultiple.updateOptionsOrder(value, OptionType.Row)
 			},
-		},
+		})
 
-		plainValues(): GridMatrixValues {
+		const plainValues = computed<GridMatrixValues>(() => {
 			const values: GridMatrixValues = {}
-			const questionValues = this.values as GridQuestionValues
-			for (const row of this.rows) {
-				for (const column of this.columns) {
+			const questionValues = props.values as GridQuestionValues
+			for (const row of rows.value) {
+				for (const column of columns.value) {
 					values[row.id] = values[row.id] || {}
 					const rowValues = questionValues[row.id] as
 						Record<number, GridCellValue> | undefined
@@ -298,25 +301,26 @@ export default defineComponent({
 			}
 
 			return values
-		},
-	},
+		})
 
-	methods: {
-		async validate(): Promise<boolean> {
-			const extraSettings = this.extraSettings as
+		const validate = async (): Promise<boolean> => {
+			const extraSettings = props.extraSettings as
 				QuestionGridExtraSettings | undefined
-			const values = this.values as unknown[] & { length?: number }
-			if (this.isRequired && (values.length === 0 || this.values === null)) {
-				this.errorMessage = t('forms', 'You must answer this question')
+			const values = props.values as unknown[] & { length?: number }
+			if (props.isRequired && (values.length === 0 || props.values === null)) {
+				question.errorMessage.value = t(
+					'forms',
+					'You must answer this question',
+				)
 				return false
 			}
 
-			if (!this.isUnique) {
+			if (!isUnique.value) {
 				// Validate limits
 				const max = extraSettings?.optionsLimitMax ?? 0
 				const min = extraSettings?.optionsLimitMin ?? 0
 				if (max && (values.length ?? 0) > max) {
-					this.errorMessage = n(
+					question.errorMessage.value = n(
 						'forms',
 						'You must choose at most one option',
 						'You must choose a maximum of %n options',
@@ -325,7 +329,7 @@ export default defineComponent({
 					return false
 				}
 				if (min && (values.length ?? 0) < min) {
-					this.errorMessage = n(
+					question.errorMessage.value = n(
 						'forms',
 						'You must choose at least one option',
 						'You must choose at least %n options',
@@ -335,37 +339,59 @@ export default defineComponent({
 				}
 			}
 
-			this.errorMessage = null
+			question.errorMessage.value = null
 			return true
-		},
+		}
 
-		onDragStart(): void {
-			this.isDragging = true
-		},
+		const onDragStart = (): void => {
+			isDragging.value = true
+		}
 
-		onDragEnd(): void {
-			this.$nextTick(() => {
-				this.isDragging = false
+		const onDragEnd = (): void => {
+			nextTick(() => {
+				isDragging.value = false
 			})
-		},
+		}
 
-		onChangeCheckboxRadio(rowId: number, value: unknown): void {
-			const values = { ...(this.values as GridQuestionValues) }
+		const onChangeCheckboxRadio = (rowId: number, value: unknown): void => {
+			const values = { ...(props.values as GridQuestionValues) }
 			values[rowId] = value
 
-			this.$emit('update:values', values)
-		},
+			emit('update:values', values)
+		}
 
-		onChangeTextNumber(
+		const onChangeTextNumber = (
 			rowId: number,
 			columnId: number,
 			value: GridCellValue,
-		): void {
-			const values = { ...this.plainValues }
+		): void => {
+			const values = { ...plainValues.value }
 			values[rowId][columnId] = value
 
-			this.$emit('update:values', values)
-		},
+			emit('update:values', values)
+		}
+
+		return {
+			...question,
+			...questionMultiple,
+			columns,
+			input,
+			isDragging,
+			isLoading,
+			isUnique,
+			onChangeCheckboxRadio,
+			onChangeTextNumber,
+			onDragEnd,
+			onDragStart,
+			OptionType,
+			plainValues,
+			questionType,
+			questionTypes,
+			rows,
+			shiftDragHandle,
+			t,
+			validate,
+		}
 	},
 })
 </script>
diff --git a/src/components/Questions/QuestionLinearScale.vue b/src/components/Questions/QuestionLinearScale.vue
index 70393832a..730bf3160 100644
--- a/src/components/Questions/QuestionLinearScale.vue
+++ b/src/components/Questions/QuestionLinearScale.vue
@@ -120,7 +120,7 @@
 <script lang="ts">
 import IconPencil from '@material-symbols/svg-400/outlined/edit.svg?raw'
 import { t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, nextTick, onMounted, ref } from 'vue'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
@@ -155,145 +155,140 @@ export default defineComponent({
 
 	setup(props, { emit }) {
 		const question = useQuestion(props, { emit })
-
-		return {
-			...question,
-			IconPencil,
-			t,
-		}
-	},
-
-	data() {
-		return {
-			isLoading: false as boolean,
-		}
-	},
-
-	computed: {
-		scaleOptions(): number[] {
+		const lowest = ref<{ $refs: { input: HTMLTextAreaElement } } | null>(null)
+		const highest = ref<{ $refs: { input: HTMLTextAreaElement } } | null>(null)
+
+		const defaultLowestLabel = t('forms', 'Strongly disagree')
+		const defaultHighestLabel = t('forms', 'Strongly agree')
+
+		const optionsLowest = computed<number>({
+			get: () => {
+				const extraSettings = props.extraSettings as
+					LinearScaleExtraSettings | undefined
+				return extraSettings?.optionsLowest ?? 1
+			},
+			set: (value: number) => {
+				question.onExtraSettingsChange({
+					optionsLowest: value === 1 ? null : value,
+				})
+			},
+		})
+
+		const optionsHighest = computed<number>({
+			get: () => {
+				const extraSettings = props.extraSettings as
+					LinearScaleExtraSettings | undefined
+				return extraSettings?.optionsHighest ?? 5
+			},
+			set: (value: number) => {
+				question.onExtraSettingsChange({
+					optionsHighest: value === 5 ? null : value,
+				})
+			},
+		})
+
+		const optionsLabelLowest = computed<string>({
+			get: () => {
+				const extraSettings = props.extraSettings as
+					LinearScaleExtraSettings | undefined
+				return extraSettings?.optionsLabelLowest ?? defaultLowestLabel
+			},
+			set: (value: string) => {
+				question.onExtraSettingsChange({
+					optionsLabelLowest: value === defaultLowestLabel ? null : value,
+				})
+			},
+		})
+
+		const optionsLabelHighest = computed<string>({
+			get: () => {
+				const extraSettings = props.extraSettings as
+					LinearScaleExtraSettings | undefined
+				return extraSettings?.optionsLabelHighest ?? defaultHighestLabel
+			},
+			set: (value: string) => {
+				question.onExtraSettingsChange({
+					optionsLabelHighest:
+						value === defaultHighestLabel ? null : value,
+				})
+			},
+		})
+
+		const scaleOptions = computed<number[]>(() => {
 			return Array.from(
-				{ length: this.optionsHighest - this.optionsLowest + 1 },
-				(_, i) => i + this.optionsLowest,
+				{ length: optionsHighest.value - optionsLowest.value + 1 },
+				(_, i) => i + optionsLowest.value,
 			)
-		},
+		})
 
-		isUnique(): boolean {
-			return this.answerType.unique === true
-		},
-
-		questionValues(): unknown[] {
-			return this.values
-		},
+		const questionValues = computed(() => props.values)
 
 		/**
 		 * ID for the label for the lowest option
 		 */
-		labelId(): string {
-			return 'q' + this.index + '__label_lowest'
-		},
-
-		optionsLowest(): number {
-			const extraSettings = this.extraSettings as
-				LinearScaleExtraSettings | undefined
-			return extraSettings?.optionsLowest ?? 1
-		},
-
-		optionsHighest(): number {
-			const extraSettings = this.extraSettings as
-				LinearScaleExtraSettings | undefined
-			return extraSettings?.optionsHighest ?? 5
-		},
-
-		optionsLabelLowest(): string {
-			const extraSettings = this.extraSettings as
-				LinearScaleExtraSettings | undefined
-			return (
-				extraSettings?.optionsLabelLowest ?? t('forms', 'Strongly disagree')
-			)
-		},
-
-		optionsLabelHighest(): string {
-			const extraSettings = this.extraSettings as
-				LinearScaleExtraSettings | undefined
-			return extraSettings?.optionsLabelHighest ?? t('forms', 'Strongly agree')
-		},
-	},
-
-	mounted() {
-		if (!this.readOnly) {
-			this.resizeLabel('lowest')
-			this.resizeLabel('highest')
-		}
-	},
-
-	methods: {
-		async validate(): Promise<boolean> {
-			if (this.isRequired && this.values.length === 0) {
-				this.errorMessage = t('forms', 'You must answer this question')
-				return false
-			}
-
-			this.errorMessage = null
-			return true
-		},
-
-		onChange(option: string): void {
-			this.$emit('update:values', [option])
-		},
-
-		onOptionsLowestChange(value: number): void {
-			this.onExtraSettingsChange({ optionsLowest: value === 1 ? null : value })
-		},
-
-		onOptionsHighestChange(value: number): void {
-			this.onExtraSettingsChange({
-				optionsHighest: value === 5 ? null : value,
-			})
-		},
-
-		onOptionsLabelLowestChange(value: string): void {
-			this.onExtraSettingsChange({
-				optionsLabelLowest:
-					value === t('forms', 'Strongly disagree') ? null : value,
-			})
-		},
-
-		onOptionsLabelHighestChange(value: string): void {
-			this.onExtraSettingsChange({
-				optionsLabelHighest:
-					value === t('forms', 'Strongly agree') ? null : value,
-			})
-		},
+		const labelId = computed(() => 'q' + props.index + '__label_lowest')
+		const isUnique = computed(() => props.answerType.unique === true)
 
 		/**
 		 * Resizes the given label to fit within the specified constraints.
 		 *
 		 * @param label - The label identifier, either 'lowest' or 'highest', indicating which label to resize.
 		 */
-		resizeLabel(label: 'lowest' | 'highest'): void {
+		const resizeLabel = (label: 'lowest' | 'highest'): void => {
 			let textarea: HTMLTextAreaElement | undefined
-			if (label === 'lowest') {
-				textarea = (
-					this.$refs.lowest as {
-						$refs: { input: HTMLTextAreaElement }
-					}
-				).$refs.input
-			} else if (label === 'highest') {
-				textarea = (
-					this.$refs.highest as {
-						$refs: { input: HTMLTextAreaElement }
-					}
-				).$refs.input
+			const refTarget = label === 'lowest' ? lowest.value : highest.value
+			if (refTarget) {
+				textarea = refTarget.$refs.input
 			}
 			// next tick ensures that the textarea is attached to DOM
-			this.$nextTick(() => {
+			nextTick(() => {
 				if (textarea) {
 					textarea.style.cssText = 'height: 0'
 					// include 2px border
 					textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px; resize: none;`
 				}
 			})
-		},
+		}
+
+		onMounted(() => {
+			if (!props.readOnly) {
+				resizeLabel('lowest')
+				resizeLabel('highest')
+			}
+		})
+
+		const validate = async (): Promise<boolean> => {
+			if (props.isRequired && props.values.length === 0) {
+				question.errorMessage.value = t(
+					'forms',
+					'You must answer this question',
+				)
+				return false
+			}
+
+			question.errorMessage.value = null
+			return true
+		}
+
+		const onChange = (option: string): void => {
+			emit('update:values', [option])
+		}
+
+		const onOptionsLowestChange = (value: number): void => {
+			optionsLowest.value = value
+		}
+
+		const onOptionsHighestChange = (value: number): void => {
+			optionsHighest.value = value
+		}
+
+		const onOptionsLabelLowestChange = (value: string): void => {
+			optionsLabelLowest.value = value
+		}
+
+		const onOptionsLabelHighestChange = (value: string): void => {
+			optionsLabelHighest.value = value
+		}
 
 		/**
 		 * Handles the blur event for a label input.
@@ -302,18 +297,42 @@ export default defineComponent({
 		 *                         It can be either 'lowest' or 'highest' indicating
 		 *                         which label input (lowest value or highest value) triggered the blur event.
 		 */
-		onBlur(label: 'lowest' | 'highest'): void {
+		const onBlur = (label: 'lowest' | 'highest'): void => {
 			if (label === 'lowest') {
-				this.optionsLabelLowest = this.optionsLabelLowest
+				optionsLabelLowest.value = optionsLabelLowest.value
 					.replace(/[\r\n]+/gm, ' ')
 					.trim()
 			} else if (label === 'highest') {
-				this.optionsLabelHighest = this.optionsLabelHighest
+				optionsLabelHighest.value = optionsLabelHighest.value
 					.replace(/[\r\n]+/gm, ' ')
 					.trim()
 			}
-			this.resizeLabel(label)
-		},
+			resizeLabel(label)
+		}
+
+		return {
+			...question,
+			IconPencil,
+			t,
+			lowest,
+			highest,
+			scaleOptions,
+			isUnique,
+			questionValues,
+			labelId,
+			optionsLowest,
+			optionsHighest,
+			optionsLabelLowest,
+			optionsLabelHighest,
+			validate,
+			onChange,
+			onOptionsLowestChange,
+			onOptionsHighestChange,
+			onOptionsLabelLowestChange,
+			onOptionsLabelHighestChange,
+			resizeLabel,
+			onBlur,
+		}
 	},
 })
 </script>
diff --git a/src/components/Questions/QuestionLong.vue b/src/components/Questions/QuestionLong.vue
index cf1fa71b7..a26a07a3a 100644
--- a/src/components/Questions/QuestionLong.vue
+++ b/src/components/Questions/QuestionLong.vue
@@ -39,7 +39,7 @@
 
 <script lang="ts">
 import { t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, nextTick, ref, watch } from 'vue'
 import Question from './Question.vue'
 import {
 	QUESTION_EMITS,
@@ -58,72 +58,78 @@ export default defineComponent({
 	emits: [...QUESTION_EMITS, 'update:values', 'keydown'],
 
 	setup(props, { emit }) {
-		return useQuestion(props, { emit })
-	},
-
-	data() {
-		return {
-			height: 1 as number,
-		}
-	},
+		const textarea = ref<HTMLTextAreaElement | null>(null)
+		const question = useQuestion(props, { emit })
 
-	computed: {
-		submissionInputPlaceholder() {
-			if (this.readOnly) {
-				return this.answerType.submitPlaceholder
+		const submissionInputPlaceholder = computed(() => {
+			if (props.readOnly) {
+				return props.answerType.submitPlaceholder
 			}
-			return this.answerType.createPlaceholder
-		},
+			return props.answerType.createPlaceholder
+		})
 
-		textareaValue(): string | number | readonly string[] | null | undefined {
-			return this.values[0] as
+		const textareaValue = computed(() => {
+			return (props.values[0] ?? null) as
 				string | number | readonly string[] | null | undefined
-		},
-	},
+		})
+
+		const autoSizeText = (): void => {
+			const field = textarea.value
+			if (!field) {
+				return
+			}
+			field.style.cssText = 'height:auto; padding:0'
+			field.style.cssText = `height: ${field.scrollHeight + 28}px`
+		}
 
-	watch: {
-		values: {
-			handler() {
-				this.$nextTick(() => {
-					this.autoSizeText()
+		watch(
+			() => props.values,
+			() => {
+				nextTick(() => {
+					autoSizeText()
 				})
 			},
+			{ immediate: true },
+		)
 
-			immediate: true,
-		},
-	},
-
-	methods: {
-		async validate(): Promise<boolean> {
+		const validate = async (): Promise<boolean> => {
 			if (
-				this.isRequired
-				&& (this.values.length === 0 || this.values[0] === '')
+				props.isRequired
+				&& (props.values.length === 0 || props.values[0] === '')
 			) {
-				this.errorMessage = t('forms', 'You must answer this question')
+				question.errorMessage.value = t(
+					'forms',
+					'You must answer this question',
+				)
 				return false
 			}
 
-			this.errorMessage = null
+			question.errorMessage.value = null
 			return true
-		},
-
-		onInput(): void {
-			const textarea = this.$refs.textarea as HTMLTextAreaElement
-			this.$emit('update:values', [textarea.value])
-		},
+		}
 
-		autoSizeText(): void {
-			const textarea = this.$refs.textarea as HTMLTextAreaElement | undefined
-			if (!textarea) {
+		const onInput = (): void => {
+			const field = textarea.value
+			if (!field) {
 				return
 			}
-			textarea.style.cssText = 'height:auto; padding:0'
-			textarea.style.cssText = `height: ${textarea.scrollHeight + 28}px`
-		},
+			emit('update:values', [field.value])
+		}
 
-		onKeydownCtrlEnter(event: KeyboardEvent): void {
-			this.$emit('keydown', event)
-		},
+		const onKeydownCtrlEnter = (event: KeyboardEvent): void => {
+			emit('keydown', event)
+		}
+
+		return {
+			...question,
+			textarea,
+			submissionInputPlaceholder,
+			textareaValue,
+			autoSizeText,
+			validate,
+			onInput,
+			onKeydownCtrlEnter,
+		}
 	},
 })
 </script>
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 139b91a2f..2b28ea015 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -192,7 +192,7 @@ import IconContentPaste from '@material-symbols/svg-400/outlined/content_paste.s
 import IconRadioboxBlank from '@material-symbols/svg-400/outlined/radio_button_unchecked.svg?raw'
 import { showError } from '@nextcloud/dialogs'
 import { n, t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, nextTick, onMounted, 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'
@@ -253,101 +253,91 @@ 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>
+		>([])
+		/**
+		 * 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
+		 */
+		const cachedOtherAnswerText = ref('')
+		const isDragging = ref(false)
+		const isOptionDialogShown = ref(false)
+		const isLoading = ref(false)
 
-		return {
-			...question,
-			...questionMultiple,
-			IconCheckboxBlankOutline,
-			IconContentPaste,
-			IconRadioboxBlank,
-			t,
-		}
-	},
-
-	data() {
-		return {
-			/**
-			 * 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
-			 */
-			cachedOtherAnswerText: '' as string,
-			QUESTION_EXTRASETTINGS_OTHER_PREFIX:
-				typeof QUESTION_EXTRASETTINGS_OTHER_PREFIX,
-
-			isDragging: false as boolean,
-			isOptionDialogShown: false as boolean,
-			isLoading: false as boolean,
-
-			OptionType,
-		}
-	},
-
-	computed: {
-		isUnique(): boolean {
-			return this.answerType.unique === true
-		},
+		const isUnique = computed(() => props.answerType.unique === true)
 
-		shiftDragHandle(): boolean {
-			return !this.readOnly && this.options.length !== 0 && !this.isLastEmpty
-		},
+		const shiftDragHandle = computed(() => {
+			return (
+				!props.readOnly
+				&& props.options.length !== 0
+				&& !questionMultiple.isLastEmpty.value
+			)
+		})
 
-		pseudoIcon(): string {
-			return this.isUnique ? IconRadioboxBlank : IconCheckboxBlankOutline
-		},
+		const pseudoIcon = computed(() => {
+			return isUnique.value ? IconRadioboxBlank : IconCheckboxBlankOutline
+		})
 
-		placeholderOtherAnswer(): string {
-			if (this.readOnly) {
-				return this.answerType.submitPlaceholder
+		const placeholderOtherAnswer = computed(() => {
+			if (props.readOnly) {
+				return props.answerType.submitPlaceholder
 			}
-			return this.answerType.createPlaceholder
-		},
+			return props.answerType.createPlaceholder
+		})
 
-		questionValues(): string | string[] | undefined {
-			const values = this.values as string[]
-			return this.isUnique ? values?.[0] : values
-		},
+		const questionValues = computed<string | string[] | undefined>(() => {
+			const values = props.values as string[]
+			return isUnique.value ? values?.[0] : values
+		})
 
-		multipleSettings(): QuestionMultipleExtraSettings {
+		const multipleSettings = computed<QuestionMultipleExtraSettings>(() => {
 			return (
-				(this.extraSettings as QuestionMultipleExtraSettings | undefined)
+				(props.extraSettings as QuestionMultipleExtraSettings | undefined)
 				?? {}
 			)
-		},
+		})
 
-		allowOtherAnswer(): boolean {
-			return this.multipleSettings.allowOtherAnswer ?? false
-		},
+		const allowOtherAnswer = computed(() => {
+			return multipleSettings.value.allowOtherAnswer ?? false
+		})
 
 		/**
 		 * The full "other" answer including prefix, undefined if no "other answer"
 		 */
-		otherAnswer(): string | undefined {
-			const values = this.values as string[]
+		const otherAnswer = computed<string | undefined>(() => {
+			const values = props.values as string[]
 			return values.find((v) =>
 				v.startsWith(QUESTION_EXTRASETTINGS_OTHER_PREFIX),
 			)
-		},
+		})
 
-		choices: {
-			get(): FormsOption[] {
-				return this.sortOptionsOfType(this.options, OptionType.Choice)
+		const choices = computed<FormsOption[]>({
+			get() {
+				return questionMultiple.sortOptionsOfType(
+					props.options,
+					OptionType.Choice,
+				)
 			},
 
 			set(value: FormsOption[]) {
-				this.updateOptionsOrder(value, OptionType.Choice)
+				questionMultiple.updateOptionsOrder(value, OptionType.Choice)
 			},
-		},
+		})
 
-		availableOptions(): number {
+		const availableOptions = computed(() => {
 			return (
-				this.choices.filter(({ text }) => text.trim() !== '').length
-				+ (this.allowOtherAnswer ? 1 : 0)
+				choices.value.filter(({ text }) => text.trim() !== '').length
+				+ (allowOtherAnswer.value ? 1 : 0)
 			)
-		},
+		})
 
-		infoMessage(): string | null {
-			const min = this.multipleSettings.optionsLimitMin ?? 0
-			const max = this.multipleSettings.optionsLimitMax ?? 0
+		const infoMessage = computed<string | null>(() => {
+			const min = multipleSettings.value.optionsLimitMin ?? 0
+			const max = multipleSettings.value.optionsLimitMax ?? 0
 
 			if (!min && !max) {
 				return null
@@ -384,7 +374,7 @@ export default defineComponent({
 				'Choose at most %n options',
 				max,
 			)
-		},
+		})
 
 		/**
 		 * Is the provided answer required ?
@@ -395,48 +385,50 @@ export default defineComponent({
 		 *
 		 * @return
 		 */
-		checkRequired(): boolean {
+		const checkRequired = computed(() => {
 			// false, if question not required
-			if (!this.isRequired) {
+			if (!props.isRequired) {
 				return false
 			}
 
 			// true for Radiobuttons
-			if (this.isUnique) {
+			if (isUnique.value) {
 				return true
 			}
 
 			// For checkboxes, only required if no other is checked
-			return this.areNoneChecked
-		},
-	},
-
-	watch: {
-		// Ensure that the "other" answer is reset after toggling the checkbox
-		otherAnswer(): void {
-			this.resetOtherAnswerText()
-		},
-	},
+			return questionMultiple.areNoneChecked.value
+		})
 
-	mounted(): void {
-		// Ensure the initial "other" answer is set
-		this.resetOtherAnswerText()
-	},
+		/**
+		 * Resets the local "other" answer text to the one from the options if available
+		 */
+		const resetOtherAnswerText = (): void => {
+			if (otherAnswer.value) {
+				// make sure to use cached value if empty value is passed
+				cachedOtherAnswerText.value =
+					otherAnswer.value.slice(
+						QUESTION_EXTRASETTINGS_OTHER_PREFIX.length,
+					) || cachedOtherAnswerText.value
+			}
+		}
 
-	methods: {
-		async validate(): Promise<boolean> {
-			const values = this.values as string[]
-			if (this.isRequired && this.areNoneChecked) {
-				this.errorMessage = t('forms', 'You must answer this question')
+		const validate = async (): Promise<boolean> => {
+			const values = props.values as string[]
+			if (props.isRequired && questionMultiple.areNoneChecked.value) {
+				question.errorMessage.value = t(
+					'forms',
+					'You must answer this question',
+				)
 				return false
 			}
 
-			if (!this.isUnique) {
+			if (!isUnique.value) {
 				// Validate limits
-				const max = this.multipleSettings.optionsLimitMax ?? 0
-				const min = this.multipleSettings.optionsLimitMin ?? 0
+				const max = multipleSettings.value.optionsLimitMax ?? 0
+				const min = multipleSettings.value.optionsLimitMin ?? 0
 				if (max && values.length > max) {
-					this.errorMessage = n(
+					question.errorMessage.value = n(
 						'forms',
 						'You must choose at most one option',
 						'You must choose at most %n options',
@@ -445,7 +437,7 @@ export default defineComponent({
 					return false
 				}
 				if (min && values.length < min) {
-					this.errorMessage = n(
+					question.errorMessage.value = n(
 						'forms',
 						'You must choose at least one option',
 						'You must choose at least %n options',
@@ -455,47 +447,34 @@ export default defineComponent({
 				}
 			}
 
-			this.errorMessage = null
+			question.errorMessage.value = null
 			return true
-		},
+		}
 
-		onDragStart(): void {
-			this.isDragging = true
-		},
+		const onDragStart = (): void => {
+			isDragging.value = true
+		}
 
-		onDragEnd(): void {
-			this.$nextTick(() => {
-				this.isDragging = false
+		const onDragEnd = (): void => {
+			nextTick(() => {
+				isDragging.value = false
 			})
-		},
-
-		/**
-		 * Resets the local "other" answer text to the one from the options if available
-		 */
-		resetOtherAnswerText(): void {
-			if (this.otherAnswer) {
-				// make sure to use cached value if empty value is passed
-				this.cachedOtherAnswerText =
-					this.otherAnswer.slice(
-						QUESTION_EXTRASETTINGS_OTHER_PREFIX.length,
-					) || this.cachedOtherAnswerText
-			}
-		},
+		}
 
-		onChange(value: string | string[]): void {
+		const onChange = (value: string | string[]): void => {
 			const normalizedValue = Array.isArray(value) ? value : [value]
-			this.$emit(
+			emit(
 				'update:values',
-				this.isUnique ? normalizedValue.slice(0, 1) : normalizedValue,
+				isUnique.value ? normalizedValue.slice(0, 1) : normalizedValue,
 			)
-		},
+		}
 
 		/**
 		 * Handle toggling the "other"-answer checkbox / radio switch
 		 *
 		 * @param value The new value of the answer(s)
 		 */
-		onChangeOther(value: string | string[]): void {
+		const onChangeOther = (value: string | string[]): void => {
 			const normalizedValue = Array.isArray(value) ? value : [value]
 			const pureValue = normalizedValue.filter(
 				(v) => !v.startsWith(QUESTION_EXTRASETTINGS_OTHER_PREFIX),
@@ -503,41 +482,41 @@ export default defineComponent({
 
 			if (normalizedValue.length > pureValue.length) {
 				// make sure to add the cached text on re-enable
-				this.onChange([
+				onChange([
 					...pureValue,
-					`${QUESTION_EXTRASETTINGS_OTHER_PREFIX}${this.cachedOtherAnswerText}`,
+					`${QUESTION_EXTRASETTINGS_OTHER_PREFIX}${cachedOtherAnswerText.value}`,
 				])
 			} else {
-				this.onChange(normalizedValue)
+				onChange(normalizedValue)
 			}
-		},
+		}
 
 		/**
 		 * Updating the maximum number
 		 *
 		 * @param max Maximum options
 		 */
-		onLimitOptionsMax(max: number | string | null): void {
+		const onLimitOptionsMax = (max: number | string | null): void => {
 			const parsedMax =
 				max === null ? null : Number.parseInt(max.toString(), 10)
-			if (this.isUnique || max === null) {
+			if (isUnique.value || max === null) {
 				// For unique (radio) options we cannot set limits, also if null is passed then we need to remove the limit
-				this.onExtraSettingsChange({ optionsLimitMax: undefined })
+				question.onExtraSettingsChange({ optionsLimitMax: undefined })
 			} else if (parsedMax) {
-				if (parsedMax > this.availableOptions) {
+				if (parsedMax > availableOptions.value) {
 					showError(
 						t(
 							'forms',
 							'Upper options limit must not exceed the number of available options',
 						),
 					)
-					this.onExtraSettingsChange({
-						optionsLimitMax: this.availableOptions || undefined,
+					question.onExtraSettingsChange({
+						optionsLimitMax: availableOptions.value || undefined,
 					})
 					return
 				}
 
-				if ((this.multipleSettings.optionsLimitMin ?? 0) > parsedMax) {
+				if ((multipleSettings.value.optionsLimitMin ?? 0) > parsedMax) {
 					showError(
 						t(
 							'forms',
@@ -547,37 +526,37 @@ export default defineComponent({
 					return
 				}
 				// If a valid number was passed, update the backend
-				this.onExtraSettingsChange({ optionsLimitMax: parsedMax })
+				question.onExtraSettingsChange({ optionsLimitMax: parsedMax })
 			}
-		},
+		}
 
 		/**
 		 * Update the minimum of checked options
 		 *
 		 * @param min Minimum of checked options
 		 */
-		onLimitOptionsMin(min: number | string | null): void {
+		const onLimitOptionsMin = (min: number | string | null): void => {
 			const parsedMin =
 				min === null ? null : Number.parseInt(min.toString(), 10)
-			if (this.isUnique || min === null) {
-				this.onExtraSettingsChange({ optionsLimitMin: undefined })
+			if (isUnique.value || min === null) {
+				question.onExtraSettingsChange({ optionsLimitMin: undefined })
 			} else if (parsedMin) {
-				if (parsedMin > this.availableOptions - 1) {
+				if (parsedMin > availableOptions.value - 1) {
 					showError(
 						t(
 							'forms',
 							'Lower options limit must be smaller than the number of available options',
 						),
 					)
-					this.onExtraSettingsChange({
-						optionsLimitMin: this.availableOptions - 1 || undefined,
+					question.onExtraSettingsChange({
+						optionsLimitMin: availableOptions.value - 1 || undefined,
 					})
 					return
 				}
 
 				if (
-					this.multipleSettings.optionsLimitMax
-					&& parsedMin > this.multipleSettings.optionsLimitMax
+					multipleSettings.value.optionsLimitMax
+					&& parsedMin > multipleSettings.value.optionsLimitMax
 				) {
 					showError(
 						t(
@@ -587,21 +566,23 @@ export default defineComponent({
 					)
 					return
 				}
-				this.onExtraSettingsChange({ optionsLimitMin: parsedMin })
+				question.onExtraSettingsChange({ optionsLimitMin: parsedMin })
 				if (parsedMin > 0) {
-					this.$emit('update:isRequired', true)
+					emit('update:isRequired', true)
 				}
 			}
-		},
+		}
 
 		/**
 		 * Update status extra setting allowOtherAnswer and save on DB
 		 *
-		 * @param allowOtherAnswer show/hide field for other answer
+		 * @param allowOtherAnswerValue show/hide field for other answer
 		 */
-		onAllowOtherAnswerChange(allowOtherAnswer: boolean): void {
-			return this.onExtraSettingsChange({ allowOtherAnswer })
-		},
+		const onAllowOtherAnswerChange = (allowOtherAnswerValue: boolean): void => {
+			question.onExtraSettingsChange({
+				allowOtherAnswer: allowOtherAnswerValue,
+			})
+		}
 
 		/**
 		 * Handles the change event for the "Other" answer text input.
@@ -616,17 +597,17 @@ export default defineComponent({
 		 *    - If `isUnique` is false, the emitted values will include all existing values
 		 *      (excluding any that start with the "Other" prefix) and the new prefixed "Other" answer.
 		 */
-		onOtherAnswerTextChange(value: string | number): void {
-			this.cachedOtherAnswerText = String(value)
+		const onOtherAnswerTextChange = (value: string | number): void => {
+			cachedOtherAnswerText.value = String(value)
 			// Prefix the value
 			const prefixedValue = `${QUESTION_EXTRASETTINGS_OTHER_PREFIX}${String(value)}`
 			// emit the values and add the "other" answer
-			this.$emit(
+			emit(
 				'update:values',
-				this.isUnique
+				isUnique.value
 					? [prefixedValue]
 					: [
-							...(this.values as string[]).filter(
+							...(props.values as string[]).filter(
 								(v) =>
 									!v.startsWith(
 										QUESTION_EXTRASETTINGS_OTHER_PREFIX,
@@ -635,7 +616,55 @@ export default defineComponent({
 							prefixedValue,
 						],
 			)
-		},
+		}
+
+		watch(otherAnswer, () => {
+			// Ensure that the "other" answer is reset after toggling the checkbox
+			resetOtherAnswerText()
+		})
+
+		onMounted(() => {
+			// Ensure the initial "other" answer is set
+			resetOtherAnswerText()
+		})
+
+		return {
+			...question,
+			...questionMultiple,
+			allowOtherAnswer,
+			availableOptions,
+			cachedOtherAnswerText,
+			checkRequired,
+			choices,
+			infoMessage,
+			input,
+			isDragging,
+			isLoading,
+			isOptionDialogShown,
+			isUnique,
+			IconCheckboxBlankOutline,
+			IconContentPaste,
+			IconRadioboxBlank,
+			multipleSettings,
+			onAllowOtherAnswerChange,
+			onChange,
+			onChangeOther,
+			onDragEnd,
+			onDragStart,
+			onLimitOptionsMax,
+			onLimitOptionsMin,
+			onOtherAnswerTextChange,
+			OptionType,
+			otherAnswer,
+			placeholderOtherAnswer,
+			pseudoIcon,
+			QUESTION_EXTRASETTINGS_OTHER_PREFIX,
+			questionValues,
+			resetOtherAnswerText,
+			shiftDragHandle,
+			t,
+			validate,
+		}
 	},
 })
 </script>
diff --git a/src/components/Questions/QuestionRanking.vue b/src/components/Questions/QuestionRanking.vue
index 0a7d4c29b..620aec4d2 100644
--- a/src/components/Questions/QuestionRanking.vue
+++ b/src/components/Questions/QuestionRanking.vue
@@ -202,7 +202,14 @@ 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 { defineComponent } from 'vue'
+import {
+	computed,
+	defineComponent,
+	getCurrentInstance,
+	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'
@@ -246,228 +253,256 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const question = useQuestion(props, { emit })
 		const questionMultiple = useQuestionMultiple(props, { emit })
+		const instance = getCurrentInstance()
+		const input = ref<
+			Array<{
+				focus?: () => void
+				$props?: { optionType?: string; index?: number }
+			} | 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[]>([])
+
+		const shiftDragHandle = computed(() => {
+			return (
+				!props.readOnly
+				&& props.options.length !== 0
+				&& !questionMultiple.isLastEmpty.value
+			)
+		})
 
-		return {
-			...question,
-			...questionMultiple,
-			IconArrowDown,
-			IconArrowUp,
-			IconClose,
-			IconContentPaste,
-			IconDragIndicator,
-			t,
-		}
-	},
-
-	data() {
-		return {
-			errorMessage: null as string | null,
-			isDragging: false as boolean,
-			isRanking: false as boolean,
-			isLoading: false as boolean,
-			isOptionDialogShown: false as boolean,
-			rankedOptions: [] as FormsOption[],
-			unrankedOptions: [] as FormsOption[],
-			OptionType,
-		}
-	},
-
-	computed: {
-		shiftDragHandle(): boolean {
-			return !this.readOnly && this.options.length !== 0 && !this.isLastEmpty
-		},
-
-		choices: {
-			get(): FormsOption[] {
-				return this.sortOptionsOfType(this.options, OptionType.Choice)
-			},
-
-			set(value: FormsOption[]): void {
-				this.updateOptionsOrder(value, OptionType.Choice)
-			},
-		},
-	},
-
-	watch: {
-		options: {
-			immediate: true,
-			handler() {
-				this.initRankedOptions()
+		const choices = computed<FormsOption[]>({
+			get() {
+				return questionMultiple.sortOptionsOfType(
+					props.options,
+					OptionType.Choice,
+				)
 			},
-		},
 
-		values: {
-			immediate: true,
-			handler() {
-				this.initRankedOptions()
+			set(value: FormsOption[]) {
+				questionMultiple.updateOptionsOrder(value, OptionType.Choice)
 			},
-		},
-	},
+		})
 
-	methods: {
-		async validate(): Promise<boolean> {
-			const optionsCount = this.sortOptionsOfType(
-				this.options,
-				OptionType.Choice,
-			).length
-
-			if (
-				(this.isRequired && this.rankedOptions.length === 0)
-				|| (this.rankedOptions.length > 0
-					&& this.rankedOptions.length !== optionsCount)
-			) {
-				this.errorMessage = t('forms', 'You must rank all options')
-				return false
+		const emitValues = (): void => {
+			if (rankedOptions.value.length === 0) {
+				// Nothing ranked - emit empty to signal unanswered
+				emit('update:values', [])
+			} else {
+				emit(
+					'update:values',
+					rankedOptions.value.map((option) => option.id),
+				)
 			}
-
-			this.errorMessage = null
-			return true
-		},
-
-		onDragStart(): void {
-			this.isDragging = true
-		},
-
-		onDragEnd(): void {
-			this.$nextTick(() => {
-				this.isDragging = false
-			})
-		},
+		}
 
 		/**
 		 * Initialize ranked/unranked options from existing values or default order
 		 */
-		initRankedOptions(): void {
-			const sorted = this.sortOptionsOfType(this.options, OptionType.Choice)
+		const initRankedOptions = (): void => {
+			const sorted = questionMultiple.sortOptionsOfType(
+				props.options,
+				OptionType.Choice,
+			)
 
-			if (this.values && this.values.length > 0) {
+			if (props.values && props.values.length > 0) {
 				// Restore order from saved values (array of option IDs)
 				const byId = Object.fromEntries(
-					sorted.map((o) => [o.id, o]),
+					sorted.map((option) => [option.id, option]),
 				) as Record<number, FormsOption>
-				this.rankedOptions = this.values
+				rankedOptions.value = props.values
 					.map((id) => byId[parseInt(String(id), 10)])
 					.filter((option): option is FormsOption => Boolean(option))
-				this.unrankedOptions = sorted.filter(
-					(o) => !this.rankedOptions.some((r) => r.id === o.id),
+				unrankedOptions.value = sorted.filter(
+					(option) =>
+						!rankedOptions.value.some(
+							(ranked) => ranked.id === option.id,
+						),
 				)
-			} else if (this.readOnly) {
+			} else if (props.readOnly) {
 				// Submit mode: start with all options unranked
-				this.rankedOptions = []
-				this.unrankedOptions = [...sorted]
+				rankedOptions.value = []
+				unrankedOptions.value = [...sorted]
 			} else {
 				// Edit mode: show all options in default order
-				this.rankedOptions = [...sorted]
-				this.unrankedOptions = []
+				rankedOptions.value = [...sorted]
+				unrankedOptions.value = []
+			}
+		}
+
+		const validate = async (): Promise<boolean> => {
+			const optionsCount = questionMultiple.sortOptionsOfType(
+				props.options,
+				OptionType.Choice,
+			).length
+
+			if (
+				(props.isRequired && rankedOptions.value.length === 0)
+				|| (rankedOptions.value.length > 0
+					&& rankedOptions.value.length !== optionsCount)
+			) {
+				question.errorMessage.value = t('forms', 'You must rank all options')
+				return false
 			}
-		},
+
+			question.errorMessage.value = null
+			return true
+		}
+
+		const onDragStart = (): void => {
+			isDragging.value = true
+		}
+
+		const onDragEnd = (): void => {
+			nextTick(() => {
+				isDragging.value = false
+			})
+		}
 
 		/**
 		 * Move an option from the unranked pool to the ranked list
 		 *
 		 * @param option The option to rank
 		 */
-		rankOption(option: FormsOption): void {
-			this.unrankedOptions = this.unrankedOptions.filter(
-				(o) => o.id !== option.id,
+		const rankOption = (option: FormsOption): void => {
+			unrankedOptions.value = unrankedOptions.value.filter(
+				(unranked) => unranked.id !== option.id,
 			)
-			this.rankedOptions.push(option)
-			this.emitValues()
-		},
+			rankedOptions.value.push(option)
+			emitValues()
+		}
 
 		/**
 		 * Move an option from the ranked list back to the unranked pool
 		 *
 		 * @param option The option to unrank
 		 */
-		unrankOption(option: FormsOption): void {
-			this.rankedOptions = this.rankedOptions.filter((o) => o.id !== option.id)
-			this.unrankedOptions.push(option)
-			this.emitValues()
-		},
+		const unrankOption = (option: FormsOption): void => {
+			rankedOptions.value = rankedOptions.value.filter(
+				(ranked) => ranked.id !== option.id,
+			)
+			unrankedOptions.value.push(option)
+			emitValues()
+		}
+
+		/**
+		 * Re-focus a button ref inside a v-for after reorder
+		 *
+		 * @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 => {
+			nextTick(() => {
+				const refs = instance?.proxy?.$refs?.[refName] as
+					Array<{ $el?: { focus?: () => void } }> | undefined
+				if (Array.isArray(refs) && refs[index]) {
+					refs[index].$el?.focus?.()
+				}
+			})
+		}
 
 		/**
 		 * Move the ranked option at index up by one position
 		 *
 		 * @param index Current index
 		 */
-		onMoveUp(index: number): void {
+		const onMoveUp = (index: number): void => {
 			if (index <= 0) return
-			const items = [...this.rankedOptions] as FormsOption[]
+			const items = [...rankedOptions.value]
 			;[items[index - 1], items[index]] = [items[index], items[index - 1]]
-			this.rankedOptions = items
-			this.emitValues()
+			rankedOptions.value = items
+			emitValues()
 			const newIndex = index - 1
-			this.focusButton(
+			focusButton(
 				newIndex > 0 ? 'buttonOptionUp' : 'buttonOptionDown',
 				newIndex,
 			)
-		},
+		}
 
 		/**
 		 * Move the ranked option at index down by one position
 		 *
 		 * @param index Current index
 		 */
-		onMoveDown(index: number): void {
-			if (index >= this.rankedOptions.length - 1) return
-			const items = [...this.rankedOptions] as FormsOption[]
+		const onMoveDown = (index: number): void => {
+			if (index >= rankedOptions.value.length - 1) return
+			const items = [...rankedOptions.value]
 			;[items[index], items[index + 1]] = [items[index + 1], items[index]]
-			this.rankedOptions = items
-			this.emitValues()
+			rankedOptions.value = items
+			emitValues()
 			const newIndex = index + 1
-			this.focusButton(
-				newIndex < this.rankedOptions.length - 1
+			focusButton(
+				newIndex < rankedOptions.value.length - 1
 					? 'buttonOptionDown'
 					: 'buttonOptionUp',
 				newIndex,
 			)
-		},
-
-		/**
-		 * Re-focus a button ref inside a v-for after reorder
-		 *
-		 * @param refName The ref name ('buttonOptionUp' or 'buttonOptionDown')
-		 * @param index The index of the item in the v-for
-		 */
-		focusButton(refName: string, index: number): void {
-			this.$nextTick(() => {
-				const refs = this.$refs[refName] as
-					Array<{ $el?: { focus?: () => void } }> | undefined
-				if (Array.isArray(refs) && refs[index]) {
-					refs[index].$el?.focus?.()
-				}
-			})
-		},
+		}
 
-		onRankingStart(): void {
-			this.isRanking = true
-		},
+		const onRankingStart = (): void => {
+			isRanking.value = true
+		}
 
 		/**
 		 * Emit the current ranking after a drag reorder
 		 */
-		onRankingEnd(): void {
-			this.$nextTick(() => {
-				this.isRanking = false
+		const onRankingEnd = (): void => {
+			nextTick(() => {
+				isRanking.value = false
 			})
-			this.emitValues()
-		},
+			emitValues()
+		}
 
-		/**
-		 * Emit the current values based on ranking state
-		 */
-		emitValues(): void {
-			if (this.rankedOptions.length === 0) {
-				// Nothing ranked — emit empty to signal unanswered
-				this.$emit('update:values', [])
-			} else {
-				this.$emit(
-					'update:values',
-					this.rankedOptions.map((o) => o.id),
-				)
-			}
-		},
+		watch(
+			() => props.options,
+			() => {
+				initRankedOptions()
+			},
+			{ immediate: true },
+		)
+
+		watch(
+			() => props.values,
+			() => {
+				initRankedOptions()
+			},
+			{ immediate: true },
+		)
+
+		return {
+			...question,
+			...questionMultiple,
+			choices,
+			input,
+			initRankedOptions,
+			isDragging,
+			isLoading,
+			isOptionDialogShown,
+			isRanking,
+			IconArrowDown,
+			IconArrowUp,
+			IconClose,
+			IconContentPaste,
+			IconDragIndicator,
+			onDragEnd,
+			onDragStart,
+			onMoveDown,
+			onMoveUp,
+			onRankingEnd,
+			onRankingStart,
+			OptionType,
+			rankedOptions,
+			rankOption,
+			shiftDragHandle,
+			t,
+			unrankedOptions,
+			unrankOption,
+			validate,
+		}
 	},
 })
 </script>
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index e593249bd..d7c79dd83 100644
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@@ -82,7 +82,7 @@
 import IconRegex from '@material-symbols/svg-400/outlined/regular_expression.svg?raw'
 import { t } from '@nextcloud/l10n'
 import debounce from 'debounce'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcActionRadio from '@nextcloud/vue/components/NcActionRadio'
 import NcActions from '@nextcloud/vue/components/NcActions'
@@ -113,139 +113,135 @@ export default defineComponent({
 
 	setup(props, { emit }) {
 		const question = useQuestion(props, { emit })
-
-		return {
-			...question,
-			IconRegex,
-			t,
-		}
-	},
-
-	data() {
-		return {
-			validationTypes,
-			isValidationTypeMenuOpen: false as boolean,
-		}
-	},
-
-	computed: {
-		submissionInputPlaceholder() {
-			if (!this.readOnly) {
-				return (
-					this.validationObject.createPlaceholder
-					|| this.answerType.createPlaceholder
-				)
+		const input = ref<HTMLInputElement | null>(null)
+		const regexInput = ref<{
+			$el: {
+				querySelector: (selector: string) => HTMLInputElement | null
 			}
-			return (
-				this.validationObject.submitPlaceholder
-				|| this.answerType.submitPlaceholder
-			)
-		},
-
-		/**
-		 * Current user input validation type
-		 */
-		validationObject() {
-			return validationTypes[this.validationType]
-		},
+		} | null>(null)
+		const isValidationTypeMenuOpen = ref(false)
 
 		/**
 		 * Name of the current validation type, fallsback to 'text'
 		 */
-		validationType() {
+		const validationType = computed(() => {
 			return (
-				(this.extraSettings as { validationType?: string } | undefined)
+				(props.extraSettings as { validationType?: string } | undefined)
 					?.validationType || 'text'
 			)
-		},
+		})
+
+		/**
+		 * Current user input validation type
+		 */
+		const validationObject = computed(
+			() => validationTypes[validationType.value],
+		)
 
 		/**
 		 * Id of the validation type menu
 		 */
-		validationTypeMenuId() {
-			return 'q' + this.index + '__validation_menu'
-		},
+		const validationTypeMenuId = computed(
+			() => 'q' + props.index + '__validation_menu',
+		)
 
 		/**
 		 * The regular expression
 		 */
-		validationRegex() {
+		const validationRegex = computed(() => {
 			return (
-				(this.extraSettings as { validationRegex?: string } | undefined)
+				(props.extraSettings as { validationRegex?: string } | undefined)
 					?.validationRegex || ''
 			)
-		},
+		})
+
+		const submissionInputPlaceholder = computed(() => {
+			if (!props.readOnly) {
+				return (
+					validationObject.value.createPlaceholder
+					|| props.answerType.createPlaceholder
+				)
+			}
+			return (
+				validationObject.value.submitPlaceholder
+				|| props.answerType.submitPlaceholder
+			)
+		})
 
-		inputValue(): string | number | readonly string[] | null | undefined {
-			return this.values[0] as
+		const inputValue = computed(() => {
+			return (props.values[0] ?? null) as
 				string | number | readonly string[] | null | undefined
-		},
-	},
+		})
 
-	methods: {
-		async validate(): Promise<boolean> {
-			const input = this.$refs.input as unknown as HTMLInputElement
-			const value = input.value
+		const validate = async (): Promise<boolean> => {
+			const field = input.value
+			if (!field) {
+				return true
+			}
+			const value = field.value
 
 			// Clear the previous custom error before checking native validity.
-			input.setCustomValidity('')
+			field.setCustomValidity('')
 
-			if (this.isRequired && input.validity.valueMissing) {
-				this.errorMessage = t('forms', 'You must answer this question')
+			if (props.isRequired && field.validity.valueMissing) {
+				question.errorMessage.value = t(
+					'forms',
+					'You must answer this question',
+				)
 				return false
 			}
 
 			const isCustomValid =
 				!value
-				|| this.validationObject.validate(
+				|| validationObject.value.validate(
 					value,
-					splitRegex(this.validationRegex),
+					splitRegex(validationRegex.value),
 				)
 
-			if (!input.validity.valid || !isCustomValid) {
-				input.setCustomValidity(this.validationObject.errorMessage)
-				this.errorMessage = this.validationObject.errorMessage
+			if (!field.validity.valid || !isCustomValid) {
+				field.setCustomValidity(validationObject.value.errorMessage)
+				question.errorMessage.value = validationObject.value.errorMessage
 				return false
 			}
 
-			this.errorMessage = null
+			question.errorMessage.value = null
 			return true
-		},
+		}
 
-		debounceValidate: debounce(async function (this: {
-			validate: () => Promise<boolean>
-		}) {
-			this.validate()
-		}, INPUT_DEBOUNCE_MS),
+		const debounceValidate = debounce(async () => {
+			await validate()
+		}, INPUT_DEBOUNCE_MS)
 
-		onInput(): void {
-			const input = this.$refs.input as unknown as HTMLInputElement
-			const value = input.value
-			this.$emit('update:values', [value])
-			this.debounceValidate()
-		},
+		const onInput = (): void => {
+			const field = input.value
+			if (!field) {
+				return
+			}
+			emit('update:values', [field.value])
+			void debounceValidate()
+		}
 
 		/**
 		 * Change input type
 		 *
 		 * @param validationType new input type
 		 */
-		onChangeValidationType(validationType: string): void {
+		const onChangeValidationType = (validationType: string): void => {
 			if (validationType === 'regex') {
 				// Make sure to also submit a regex (even if empty)
-				this.onExtraSettingsChange({
+				question.onExtraSettingsChange({
 					validationType,
-					validationRegex: this.validationRegex,
+					validationRegex: validationRegex.value,
 				})
 			} else {
 				// For all other types except regex we close the menu (for regex we keep it open to allow entering a regex)
-				this.isValidationTypeMenuOpen = false
-				this.onExtraSettingsChange({
+				isValidationTypeMenuOpen.value = false
+				question.onExtraSettingsChange({
 					validationType:
 						validationType === 'text' ? undefined : validationType,
 				})
 			}
-		},
+		}
 
 		/**
 		 * Validate and save regex if valid
@@ -256,45 +252,62 @@ export default defineComponent({
 		 * @param event input event
 		 * @return true if the regex is valid
 		 */
-		onInputRegex(event: InputEvent | SubmitEvent): boolean {
+		const onInputRegex = (event: InputEvent | SubmitEvent): boolean => {
 			if ('isComposing' in event && event.isComposing) {
 				return false
 			}
 
-			const input = (
-				this.$refs.regexInput as unknown as {
-					$el: {
-						querySelector: (selector: string) => HTMLInputElement | null
-					}
-				}
-			).$el.querySelector('input')
-			if (!input) {
+			const regexField = regexInput.value?.$el.querySelector('input')
+			if (!regexField) {
 				return false
 			}
-			const validationRegex = input.value
+			const validationRegex = regexField.value
 
 			// remove potential previous validity
-			input.setCustomValidity('')
+			regexField.setCustomValidity('')
 
 			if (!validateExpression(validationRegex)) {
-				input.setCustomValidity(t('forms', 'Invalid regular expression'))
+				regexField.setCustomValidity(
+					t('forms', 'Invalid regular expression'),
+				)
 				return false
 			}
 
-			this.onExtraSettingsChange({ validationRegex })
+			question.onExtraSettingsChange({ validationRegex })
 			return true
-		},
+		}
 
 		/**
 		 * Same as `onInputRegex` but for convinience also closes the menu
 		 *
 		 * @param event regex submit event
 		 */
-		onSubmitRegex(event: SubmitEvent): void {
-			if (this.onInputRegex(event)) {
-				this.isValidationTypeMenuOpen = false
+		const onSubmitRegex = (event: SubmitEvent): void => {
+			if (onInputRegex(event)) {
+				isValidationTypeMenuOpen.value = false
 			}
-		},
+		}
+
+		return {
+			...question,
+			IconRegex,
+			t,
+			validationTypes,
+			isValidationTypeMenuOpen,
+			submissionInputPlaceholder,
+			validationObject,
+			validationType,
+			validationTypeMenuId,
+			validationRegex,
+			inputValue,
+			input,
+			regexInput,
+			validate,
+			onInput,
+			onChangeValidationType,
+			onInputRegex,
+			onSubmitRegex,
+		}
 	},
 })
 </script>
diff --git a/src/components/Results/ResultsSummary.vue b/src/components/Results/ResultsSummary.vue
index 0cd0c6fa7..e9663e808 100644
--- a/src/components/Results/ResultsSummary.vue
+++ b/src/components/Results/ResultsSummary.vue
@@ -162,7 +162,7 @@ import type { PropType } from 'vue'
 import IconFile from '@material-symbols/svg-400/outlined/draft.svg?raw'
 import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import answerTypes from '../../models/AnswerTypes.ts'
 import { GridCellType, OptionType } from '../../models/Constants.ts'
@@ -186,74 +186,62 @@ export default defineComponent({
 		},
 	},
 
-	setup() {
-		return {
-			IconFile,
-			t,
-		}
-	},
-
-	data() {
-		return {
-			answerTypes,
-		}
-	},
+	setup(props) {
+		const questionTypeLabel = computed(() => {
+			const label = answerTypes[props.question.type]?.label ?? ''
 
-	computed: {
-		questionTypeLabel() {
-			const label = this.answerTypes[this.question.type].label
-
-			if (this.question.type === 'grid') {
+			if (props.question.type === 'grid') {
 				if (
-					this.question.extraSettings.questionType
+					props.question.extraSettings?.questionType
 					=== GridCellType.Checkbox
 				) {
-					return label + ' (' + t('forms', 'Checkbox') + ')'
+					return `${label} (${t('forms', 'Checkbox')})`
 				}
 				if (
-					this.question.extraSettings.questionType === GridCellType.Number
+					props.question.extraSettings?.questionType
+					=== GridCellType.Number
 				) {
-					return label + ' (' + t('forms', 'Number') + ')'
+					return `${label} (${t('forms', 'Number')})`
 				}
 				if (
-					this.question.extraSettings.questionType === GridCellType.Radio
+					props.question.extraSettings?.questionType === GridCellType.Radio
 				) {
-					return label + ' (' + t('forms', 'Radio') + ')'
+					return `${label} (${t('forms', 'Radio')})`
 				}
 			}
 
-			if (this.question.type === 'linearscale') {
+			if (props.question.type === 'linearscale') {
 				const labelLowest =
-					this.question.extraSettings?.optionsLabelLowest
+					props.question.extraSettings?.optionsLabelLowest
 					?? t('forms', 'Strongly disagree')
 				const labelHighest =
-					this.question.extraSettings?.optionsLabelHighest
+					props.question.extraSettings?.optionsLabelHighest
 					?? t('forms', 'Strongly agree')
 				const optionsLowest =
-					this.question.extraSettings?.optionsLowest?.toString() ?? '1'
+					props.question.extraSettings?.optionsLowest?.toString() ?? '1'
 				const optionsHighest =
-					this.question.extraSettings?.optionsHighest?.toString() ?? '5'
+					props.question.extraSettings?.optionsHighest?.toString() ?? '5'
+				const descriptionParts: string[] = []
 
-				const descriptionParts = []
 				if (labelLowest !== '') {
 					descriptionParts.push(`${optionsLowest}: ${labelLowest}`)
 				}
 				if (labelHighest !== '') {
 					descriptionParts.push(`${optionsHighest}: ${labelHighest}`)
 				}
-				const description = ` (${descriptionParts.join(', ')})`
-				return label + description
+
+				return `${label} (${descriptionParts.join(', ')})`
 			}
 
 			return label
-		},
+		})
 
 		// For countable questions like multiple choice and checkboxes
-		questionOptions() {
+		const questionOptions = computed(() => {
 			// Build list of question options
-			let questionOptionsStats
-			if (this.question.type !== 'linearscale') {
-				questionOptionsStats = this.question.options.map((option: any) => ({
+			let questionOptionsStats: any[]
+			if (props.question.type !== 'linearscale') {
+				questionOptionsStats = props.question.options.map((option: any) => ({
 					...option,
 					count: 0,
 					percentage: 0,
@@ -262,13 +250,13 @@ export default defineComponent({
 				questionOptionsStats = Array.from(
 					{
 						length:
-							(this.question.extraSettings?.optionsHighest ?? 5)
-							- (this.question.extraSettings?.optionsLowest ?? 1)
+							(props.question.extraSettings?.optionsHighest ?? 5)
+							- (props.question.extraSettings?.optionsLowest ?? 1)
 							+ 1,
 					},
 					(_, i) => ({
 						text: (
-							i + (this.question.extraSettings?.optionsLowest ?? 1)
+							i + (props.question.extraSettings?.optionsLowest ?? 1)
 						).toString(),
 						count: 0,
 						percentage: 0,
@@ -277,7 +265,7 @@ export default defineComponent({
 			}
 
 			// Also record 'Other'
-			if (this.question.extraSettings?.allowOtherAnswer) {
+			if (props.question.extraSettings?.allowOtherAnswer) {
 				questionOptionsStats.unshift({
 					text: t('forms', 'Other'),
 					count: 0,
@@ -294,13 +282,13 @@ export default defineComponent({
 			})
 
 			// Go through submissions to check which options have how many responses
-			this.submissions.forEach((submission) => {
+			props.submissions.forEach((submission: any) => {
 				const answers = submission.answers.filter(
-					(answer: any) => answer.questionId === this.question.id,
+					(answer: any) => answer.questionId === props.question.id,
 				)
 				if (!answers.length) {
-					// Record 'No response'
 					questionOptionsStats[0].count++
+					return
 				}
 
 				// Check question options to find which needs to be increased
@@ -309,7 +297,7 @@ export default defineComponent({
 						(option: any) => option.text === answer.text,
 					)
 					if (optionsStatIndex < 0) {
-						if (this.question.extraSettings?.allowOtherAnswer) {
+						if (props.question.extraSettings?.allowOtherAnswer) {
 							questionOptionsStats[1].count++
 						} else {
 							questionOptionsStats.push({
@@ -325,10 +313,10 @@ export default defineComponent({
 			})
 
 			// Sort options by response count
-			if (this.question.type !== 'linearscale') {
-				questionOptionsStats.sort((object1: any, object2: any) => {
-					return object2.count - object1.count
-				})
+			if (props.question.type !== 'linearscale') {
+				questionOptionsStats.sort(
+					(object1: any, object2: any) => object2.count - object1.count,
+				)
 			} else {
 				// for linear scale questions move the "No response" element to the end
 				questionOptionsStats.push(questionOptionsStats.shift())
@@ -337,7 +325,7 @@ export default defineComponent({
 			questionOptionsStats.forEach((questionOptionsStat: any) => {
 				// Fill percentage values
 				questionOptionsStat.percentage = Math.round(
-					(100 * questionOptionsStat.count) / this.submissions.length,
+					(100 * questionOptionsStat.count) / props.submissions.length,
 				)
 				// Mark all best results
 				const maxCount = Math.max(
@@ -347,16 +335,16 @@ export default defineComponent({
 			})
 
 			return questionOptionsStats
-		},
+		})
 
 		/**
 		 * Borda count ranking statistics
 		 */
-		rankingStats() {
-			const n = this.question.options.length
+		const rankingStats = computed(() => {
+			const n = props.question.options.length
 			const stats: Record<string | number, any> = {}
 
-			for (const opt of this.question.options) {
+			for (const opt of props.question.options) {
 				stats[opt.id] = {
 					id: opt.id,
 					text: opt.text,
@@ -366,9 +354,9 @@ export default defineComponent({
 				}
 			}
 
-			for (const submission of this.submissions) {
+			for (const submission of props.submissions) {
 				const answer = submission.answers.find(
-					(a: any) => a.questionId === this.question.id,
+					(a: any) => a.questionId === props.question.id,
 				)
 				if (!answer) continue
 				const ranked = JSON.parse(answer.text)
@@ -397,29 +385,28 @@ export default defineComponent({
 			}
 
 			return result
-		},
+		})
 
-		maxBordaScore() {
-			const n = this.question.options.length
-			return n * this.submissions.length
-		},
+		const maxBordaScore = computed(
+			() => props.question.options.length * props.submissions.length,
+		)
 
-		gridColumns() {
-			return this.question.options.filter(
+		const gridColumns = computed(() => {
+			return props.question.options.filter(
 				(option: any) => option.optionType === OptionType.Column,
 			)
-		},
+		})
 
-		gridRows() {
-			return this.question.options.filter(
+		const gridRows = computed(() => {
+			return props.question.options.filter(
 				(option: any) => option.optionType === OptionType.Row,
 			)
-		},
+		})
 
-		gridValue() {
+		const gridValue = computed(() => {
 			const matrix: Record<string, Record<string, any>> = {}
-			for (const row of this.gridRows) {
-				for (const column of this.gridColumns) {
+			for (const row of gridRows.value) {
+				for (const column of gridColumns.value) {
 					matrix[row.id] = matrix[row.id] || {}
 					matrix[row.id][column.id] = {
 						answersCount: 0,
@@ -430,20 +417,20 @@ export default defineComponent({
 				}
 			}
 
-			const answers: any[] = []
-			this.submissions.forEach((submission: any) => {
+			const answersList: any[] = []
+			props.submissions.forEach((submission: any) => {
 				submission.answers.forEach((answer: any) => {
-					if (answer.questionId === this.question.id) {
-						answers.push(answer)
+					if (answer.questionId === props.question.id) {
+						answersList.push(answer)
 					}
 				})
 			})
 
-			answers.forEach((answer) => {
+			answersList.forEach((answer) => {
 				const answerJson = JSON.parse(answer.text)
 
 				if (
-					this.question.extraSettings.questionType === GridCellType.Radio
+					props.question.extraSettings?.questionType === GridCellType.Radio
 				) {
 					for (const rowId of Object.keys(answerJson)) {
 						const columnId = answerJson[rowId]
@@ -453,7 +440,7 @@ export default defineComponent({
 						}
 					}
 				} else if (
-					this.question.extraSettings.questionType
+					props.question.extraSettings?.questionType
 					=== GridCellType.Checkbox
 				) {
 					for (const rowId of Object.keys(answerJson)) {
@@ -467,14 +454,15 @@ export default defineComponent({
 						}
 					}
 				} else if (
-					this.question.extraSettings.questionType === GridCellType.Number
+					props.question.extraSettings?.questionType
+					=== GridCellType.Number
 				) {
 					for (const rowId of Object.keys(answerJson)) {
 						if (!matrix[rowId]) {
 							continue
 						}
 						for (const columnId of Object.keys(answerJson[rowId])) {
-							if ('' === answerJson[rowId][columnId]) {
+							if (answerJson[rowId][columnId] === '') {
 								continue
 							}
 
@@ -491,9 +479,9 @@ export default defineComponent({
 
 			for (const rowId of Object.keys(matrix)) {
 				for (const columnId of Object.keys(matrix[rowId])) {
-					let totalAnswersCount = this.submissions.length
+					let totalAnswersCount = props.submissions.length
 					if (
-						this.question.extraSettings.questionType
+						props.question.extraSettings?.questionType
 						=== GridCellType.Checkbox
 					) {
 						totalAnswersCount = Object.entries(matrix[rowId])
@@ -514,49 +502,50 @@ export default defineComponent({
 					)
 
 					if (
-						this.question.extraSettings.questionType
+						props.question.extraSettings?.questionType
 							=== GridCellType.Number
 						&& matrix[rowId][columnId].answersCount > 0
 					) {
-						matrix[rowId][columnId].averageValue =
+						matrix[rowId][columnId].averageValue = (
 							matrix[rowId][columnId].totalValue
 							/ matrix[rowId][columnId].answersCount
+						).toFixed(1)
 					}
 				}
 			}
 
 			return matrix
-		},
+		})
 
 		// For text answers like short answer and long text
-		answers() {
+		const answers = computed(() => {
 			const answersModels: any[] = []
 
 			// Also record 'No response'
 			let noResponseCount = 0
 
 			// Go through submissions to check which options have how many responses
-			this.submissions.forEach((submission: any) => {
-				const answers = submission.answers.filter(
-					(answer: any) => answer.questionId === this.question.id,
+			props.submissions.forEach((submission: any) => {
+				const answersForQuestion = submission.answers.filter(
+					(answer: any) => answer.questionId === props.question.id,
 				)
-				if (!answers.length) {
+				if (!answersForQuestion.length) {
 					// Record 'No response'
 					noResponseCount++
 				}
 
 				// Add text answers
 				if (
-					['date', 'time'].includes(this.question.type)
-					&& answers.length === 2
+					['date', 'time'].includes(props.question.type)
+					&& answersForQuestion.length === 2
 				) {
 					// Combine the first two answers in order for date range questions
 					answersModels.push({
-						id: `${answers[0].id}-${answers[1].id}`,
-						text: `${answers[0].text} - ${answers[1].text}`,
+						id: `${answersForQuestion[0].id}-${answersForQuestion[1].id}`,
+						text: `${answersForQuestion[0].text} - ${answersForQuestion[1].text}`,
 					})
 				} else {
-					answers.forEach((answer: any) => {
+					answersForQuestion.forEach((answer: any) => {
 						if (answer.fileId) {
 							answersModels.push({
 								id: answer.id,
@@ -577,20 +566,29 @@ export default defineComponent({
 
 			// Calculate no response percentage
 			const noResponsePercentage = Math.round(
-				(100 * noResponseCount) / this.submissions.length,
+				(100 * noResponseCount) / props.submissions.length,
 			)
 			answersModels.unshift({
 				id: 0,
-				text:
-					noResponseCount
-					+ ' ('
-					+ noResponsePercentage
-					+ '%): '
-					+ t('forms', 'No response'),
+				text: `${noResponseCount} (${noResponsePercentage}%): ${t('forms', 'No response')}`,
 			})
 
 			return answersModels
-		},
+		})
+
+		return {
+			IconFile,
+			answerTypes,
+			questionTypeLabel,
+			questionOptions,
+			rankingStats,
+			maxBordaScore,
+			gridColumns,
+			gridRows,
+			gridValue,
+			answers,
+			t,
+		}
 	},
 })
 </script>
diff --git a/src/components/Results/Submission.vue b/src/components/Results/Submission.vue
index 3808bb347..1bd93eba3 100644
--- a/src/components/Results/Submission.vue
+++ b/src/components/Results/Submission.vue
@@ -56,7 +56,7 @@ import IconPencil from '@material-symbols/svg-400/outlined/edit.svg?raw'
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionRouter from '@nextcloud/vue/components/NcActionRouter'
 import NcActions from '@nextcloud/vue/components/NcActions'
@@ -81,7 +81,7 @@ interface SubmissionModel {
 interface QuestionOption {
 	id: number
 	text: string
-	optionType: string
+	optionType?: string
 }
 
 interface QuestionModel {
@@ -89,18 +89,23 @@ interface QuestionModel {
 	text: string
 	type: string
 	options: QuestionOption[]
-	extraSettings: {
+	extraSettings?: {
 		questionType?: 'radio' | 'checkbox' | 'number'
 	}
 }
 
+type GridValueMap = Record<
+	string,
+	string | string[] | Record<string, string | number>
+>
+
 interface AnsweredQuestion {
 	id: number
 	text: string
 	type: string
 	squashedAnswers?: string
 	answers?: Array<{ id: number; text: string; url?: string }>
-	gridValue?: Record<string, string | string[] | Record<string, string>> | null
+	gridValue?: GridValueMap | null
 	gridCellType?: string
 	gridRows?: QuestionOption[]
 	gridColumns?: QuestionOption[]
@@ -152,19 +157,65 @@ export default defineComponent({
 
 	emits: ['delete'],
 
-	setup() {
-		return {
-			IconDelete,
-			IconPencil,
-			t,
-		}
-	},
-
-	computed: {
+	setup(props, { emit }) {
 		// Format submission-timestamp to DateTime
-		submissionDateTime(): string {
-			return moment(this.submission.timestamp, 'X').format('LLLL')
-		},
+		const submissionDateTime = computed(() => {
+			return moment(props.submission.timestamp, 'X').format('LLLL')
+		})
+
+		const serializeNode = (node: Node): string => {
+			if (node.nodeType === Node.TEXT_NODE) {
+				return node.textContent ?? ''
+			}
+			if (
+				node.nodeType !== Node.ELEMENT_NODE
+				&& node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE
+			) {
+				return ''
+			}
+
+			const tag = (node as Element).tagName?.toLowerCase()
+			if (tag && ['svg', 'script', 'style'].includes(tag)) {
+				return ''
+			}
+			if (tag === 'br') {
+				return '\n'
+			}
+
+			const children = Array.from(node.childNodes)
+				.map((child) => serializeNode(child))
+				.join('')
+
+			if (tag === 'div' && (node as Element).classList?.contains('answer')) {
+				const trimmed = children.replace(/\s+$/, '')
+				return trimmed ? '\n' + trimmed + '\n' : ''
+			}
+
+			const isBlock =
+				tag
+				&& [
+					'div',
+					'p',
+					'h1',
+					'h2',
+					'h3',
+					'h4',
+					'h5',
+					'h6',
+					'li',
+					'td',
+					'tr',
+					'th',
+					'dt',
+					'dd',
+				].includes(tag)
+			if (isBlock) {
+				const trimmed = children.replace(/\s+$/, '')
+				return trimmed ? trimmed + '\n' : ''
+			}
+
+			return children
+		}
 
 		/**
 		 * Join answered Questions with corresponding answers.
@@ -172,11 +223,11 @@ export default defineComponent({
 		 *
 		 * @return
 		 */
-		answeredQuestions(): AnsweredQuestion[] {
+		const answeredQuestions = computed<AnsweredQuestion[]>(() => {
 			const answeredQuestionsArray: AnsweredQuestion[] = []
 
-			this.questions.forEach((question: QuestionModel) => {
-				const answers = this.submission.answers.filter(
+			props.questions.forEach((question: QuestionModel) => {
+				const answers = props.submission.answers.filter(
 					(answer) => answer.questionId === question.id,
 				)
 				if (!answers.length) {
@@ -188,75 +239,78 @@ export default defineComponent({
 						id: question.id,
 						text: question.text,
 						type: question.type,
-						answers: answers.map((answer) => {
-							return {
-								id: answer.id,
-								text: answer.text,
-								url: generateUrl('/f/{fileId}', {
-									fileId: answer.fileId,
-								}),
-							}
-						}),
+						answers: answers.map((answer) => ({
+							id: answer.id,
+							text: answer.text,
+							url: answer.fileId
+								? generateUrl('/f/{fileId}', {
+										fileId: answer.fileId,
+									})
+								: undefined,
+						})),
 					})
 				} else if (question.type === 'grid') {
 					const optionsPerId: Record<string, QuestionOption> = {}
 					question.options.forEach((option) => {
-						optionsPerId[option.id] = option
+						optionsPerId[String(option.id)] = option
 					})
 					let squashedAnswers = ''
-
-					const gridValue = answers[0].text
-						? (JSON.parse(answers[0].text) as Record<
-								string,
-								string | string[] | Record<string, string>
-							>)
+					const gridValue = answers[0]?.text
+						? (JSON.parse(answers[0].text) as GridValueMap)
 						: null
 					// fixme: rename `questionType` to `gridCellType` everywhere in BE and FE
 					if (
 						gridValue
-						&& question.extraSettings.questionType === 'radio'
+						&& question.extraSettings?.questionType === 'radio'
 					) {
-						squashedAnswers = Object.keys(gridValue)
-							.filter(
-								(key) =>
-									optionsPerId[key]
-									&& optionsPerId[gridValue[key]],
-							)
-							.map((key: string) => {
-								return (
-									optionsPerId[key].text
-									+ ': '
-									+ optionsPerId[gridValue[key]].text
-								)
-							})
-							.join('\n')
+						for (const key of Object.keys(gridValue)) {
+							const selectedValue = gridValue[key]
+							if (
+								typeof selectedValue !== 'string'
+								|| !optionsPerId[key]
+								|| !optionsPerId[selectedValue]
+							) {
+								continue
+							}
+							squashedAnswers += `${optionsPerId[key].text}: ${optionsPerId[selectedValue].text}\n`
+						}
+						squashedAnswers = squashedAnswers.trimEnd()
 					} else if (
 						gridValue
-						&& question.extraSettings.questionType === 'checkbox'
+						&& question.extraSettings?.questionType === 'checkbox'
 					) {
-						squashedAnswers = Object.keys(gridValue)
-							.filter(
-								(key) =>
-									optionsPerId[key]
-									&& Array.isArray(gridValue[key]),
-							)
-							.map((key: string) => {
-								return (
-									optionsPerId[key].text
-									+ ': '
-									+ gridValue[key]
-										.filter(
-											(optionId: string) =>
-												optionsPerId[optionId],
-										)
-										.map(
-											(optionId: string) =>
-												optionsPerId[optionId].text,
-										)
-										.join(', ')
+						for (const key of Object.keys(gridValue)) {
+							const selectedValues = gridValue[key]
+							if (
+								!optionsPerId[key]
+								|| !Array.isArray(selectedValues)
+							) {
+								continue
+							}
+							const labels = selectedValues
+								.filter((optionId) => optionsPerId[String(optionId)])
+								.map(
+									(optionId) =>
+										optionsPerId[String(optionId)].text,
 								)
-							})
-							.join('\n')
+							if (!labels.length) {
+								continue
+							}
+							squashedAnswers += `${optionsPerId[key].text}: ${labels.join(', ')}\n`
+						}
+						squashedAnswers = squashedAnswers.trimEnd()
+					} else if (
+						gridValue
+						&& question.extraSettings?.questionType === 'number'
+					) {
+						for (const key of Object.keys(gridValue)) {
+							if (!optionsPerId[key]) {
+								continue
+							}
+							const value = gridValue[key]
+							squashedAnswers += `${optionsPerId[key].text}: ${String(value)}\n`
+						}
+						squashedAnswers = squashedAnswers.trimEnd()
 					}
 
 					answeredQuestionsArray.push({
@@ -265,7 +319,7 @@ export default defineComponent({
 						type: question.type,
 						gridValue,
 						squashedAnswers,
-						gridCellType: question.extraSettings.questionType,
+						gridCellType: question.extraSettings?.questionType,
 						gridRows: question.options.filter(
 							(option) => option.optionType === OptionType.Row,
 						),
@@ -287,14 +341,14 @@ export default defineComponent({
 				} else if (question.type === 'ranking') {
 					const optionsPerId: Record<string, QuestionOption> = {}
 					question.options.forEach((option) => {
-						optionsPerId[option.id] = option
+						optionsPerId[String(option.id)] = option
 					})
 					const rankedIds = answers[0]?.text
 						? JSON.parse(answers[0].text)
 						: []
 					const squashedAnswers = rankedIds
 						.map((id: string, index: number) => {
-							const option = optionsPerId[id]
+							const option = optionsPerId[String(id)]
 							return option
 								? `${index + 1}. ${option.text}`
 								: `${index + 1}. ?`
@@ -321,81 +375,38 @@ export default defineComponent({
 				}
 			})
 			return answeredQuestionsArray
-		},
-	},
-
-	methods: {
-		onDelete(): void {
-			this.$emit('delete')
-		},
+		})
 
-		onCopy(event: ClipboardEvent): void {
-			if (!event.clipboardData) return
+		const onDelete = (): void => {
+			emit('delete')
+		}
 
+		const onCopy = (event: ClipboardEvent): void => {
+			if (!event.clipboardData) {
+				return
+			}
 			const selection = window.getSelection()
-			if (!selection || selection.isCollapsed) return
-
+			if (!selection || selection.isCollapsed) {
+				return
+			}
 			const fragment = selection.getRangeAt(0).cloneContents()
-			const text = this.serializeNode(fragment).trim()
-
-			if (!text) return
-
+			const text = serializeNode(fragment).trim()
+			if (!text) {
+				return
+			}
 			event.clipboardData.setData('text/plain', text)
 			event.preventDefault()
-		},
-
-		serializeNode(node: Node): string {
-			if (node.nodeType === Node.TEXT_NODE) {
-				return node.textContent ?? ''
-			}
-
-			if (
-				node.nodeType !== Node.ELEMENT_NODE
-				&& node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE
-			) {
-				return ''
-			}
-
-			const tag = (node as Element).tagName?.toLowerCase()
-
-			if (tag && ['svg', 'script', 'style'].includes(tag)) return ''
-			if (tag === 'br') return '\n'
-
-			const children = Array.from(node.childNodes)
-				.map((child) => this.serializeNode(child))
-				.join('')
-
-			// Answer blocks get a blank line before them as visual separator
-			if (tag === 'div' && (node as Element).classList?.contains('answer')) {
-				const trimmed = children.replace(/\s+$/, '')
-				return trimmed ? '\n' + trimmed + '\n' : ''
-			}
-
-			const isBlock =
-				tag
-				&& [
-					'div',
-					'p',
-					'h1',
-					'h2',
-					'h3',
-					'h4',
-					'h5',
-					'h6',
-					'li',
-					'td',
-					'tr',
-					'th',
-					'dt',
-					'dd',
-				].includes(tag)
-			if (isBlock) {
-				const trimmed = children.replace(/\s+$/, '')
-				return trimmed ? trimmed + '\n' : ''
-			}
+		}
 
-			return children
-		},
+		return {
+			IconDelete,
+			IconPencil,
+			submissionDateTime,
+			answeredQuestions,
+			onDelete,
+			onCopy,
+			t,
+		}
 	},
 })
 </script>
diff --git a/src/composables/useQuestionMultiple.ts b/src/composables/useQuestionMultiple.ts
index f280ea004..fdf3acac5 100644
--- a/src/composables/useQuestionMultiple.ts
+++ b/src/composables/useQuestionMultiple.ts
@@ -189,7 +189,21 @@ export function useQuestionMultiple(
 	}
 
 	function focusIndex(index: number, optionType: string) {
-		const inputRefs = instance?.proxy?.$refs?.input
+		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
@@ -197,13 +211,13 @@ export function useQuestionMultiple(
 				: []
 
 		const item = refsArray.find((component) => {
-			return (
-				(component as { $props?: { optionType?: string; index?: number } })
-					?.$props?.optionType === optionType
-				&& (
-					component as { $props?: { optionType?: string; index?: number } }
-				)?.$props?.index === index
-			)
+			const props = (
+				component as {
+					$props?: { optionType?: string; index?: number }
+				}
+			)?.$props
+
+			return props?.optionType === optionType && props?.index === index
 		})
 
 		if (item?.focus) {
@@ -211,6 +225,7 @@ export function useQuestionMultiple(
 		} else {
 			logger.warn('Could not find option to focus', {
 				index,
+				optionType,
 				options: sortedOptionsPerType.value[optionType],
 			})
 		}