fix: use props destructuring everywhere

src/components/home/ProjectsNavigationItem.vue

@@ -84,14 +84,17 @@ import ColorBubble from '@/components/misc/colorBubble.vue'
 import ProjectsNavigation from '@/components/home/ProjectsNavigation.vue'
 import {canNestProjectDeeper} from '@/helpers/canNestProjectDeeper'
 
-const props = withDefaults(defineProps<{
+const {
+	project,
+	isLoading,
+	canCollapse,
+	level = 0,
+} = defineProps<{
 	project: IProject,
 	isLoading?: boolean,
 	canCollapse?: boolean,
 	level?: number,
-}>(), {
+}>()
-	level: 0,
-})
 
 const projectStore = useProjectStore()
 const baseStore = useBaseStore()
@@ -104,12 +107,12 @@ const childProjects = computed(() => {
 		return []
 	}
 
-	return projectStore.getChildProjects(props.project.id)
+	return projectStore.getChildProjects(project.id)
 		.filter(p => !p.isArchived)
 		.sort((a, b) => a.position - b.position)
 })
 
-const canNestDeeper = computed(() => canNestProjectDeeper(props.level))
+const canNestDeeper = computed(() => canNestProjectDeeper(level))
 </script>
 
 <style lang="scss" scoped>

src/components/input/ColorPicker.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, toRef, watch} from 'vue'
+import {computed, ref, watch} from 'vue'
 import {createRandomID} from '@/helpers/randomId'
 import XButton from '@/components/input/button.vue'
 
@@ -53,22 +53,16 @@ const lastChangeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
 const defaultColors = ref(DEFAULT_COLORS)
 const colorListID = ref(createRandomID())
 
-const props = defineProps({
+const {
-	modelValue: {
+	modelValue,
-		type: String,
+} = defineProps<{
-		required: true,
+	modelValue: string,
-	},
+}>()
-	menuPosition: {
-		type: String,
-		default: 'top',
-	},
-})
 
 const emit = defineEmits(['update:modelValue'])
 
-const modelValue = toRef(props, 'modelValue')
 watch(
-	modelValue,
+	() => modelValue,
 	(newValue) => {
 		color.value = newValue
 	},

src/components/misc/modal.vue

@@ -75,17 +75,19 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import {ref, useAttrs, watchEffect} from 'vue'
 import {useScrollLock} from '@vueuse/core'
 
-const props = withDefaults(defineProps<{
+const {
+	enabled = true,
+	overflow,
+	wide,
+	transitionName = 'modal',
+	variant = 'default',
+} = defineProps<{
 	enabled?: boolean,
 	overflow?: boolean,
 	wide?: boolean,
 	transitionName?: 'modal' | 'fade',
 	variant?: 'default' | 'hint-modal' | 'scrolling',
-}>(), {
+}>()
-	enabled: true,
-	transitionName: 'modal',
-	variant: 'default',
-})
 
 defineEmits(['close', 'submit'])
 
@@ -95,7 +97,7 @@ const modal = ref<HTMLElement | null>(null)
 const scrollLock = useScrollLock(modal)
 
 watchEffect(() => {
-	scrollLock.value = props.enabled
+	scrollLock.value = enabled
 })
 </script>
 

src/components/project/partials/ProjectCard.vue

@@ -44,8 +44,6 @@
 </template>
 
 <script lang="ts" setup>
-import {toRef, type PropType} from 'vue'
-
 import type {IProject} from '@/modelTypes/IProject'
 
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -53,14 +51,13 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import {useProjectBackground} from './useProjectBackground'
 import {useProjectStore} from '@/stores/projects'
 
-const props = defineProps({
+const {
-	project: {
+	project,
-		type: Object as PropType<IProject>,
+} = defineProps<{
-		required: true,
+	project: IProject,
-	},
+}>()
-})
 
-const {background, blurHashUrl} = useProjectBackground(toRef(props, 'project'))
+const {background, blurHashUrl} = useProjectBackground(project)
 
 const projectStore = useProjectStore()
 </script>

src/components/tasks/partials/attachments.vue

@@ -180,13 +180,13 @@ import {useI18n} from 'vue-i18n'
 const taskStore = useTaskStore()
 const {t} = useI18n({useScope: 'global'})
 
-const props = withDefaults(defineProps<{
+const {
+	task,
+	editEnabled = true,
+} = defineProps<{
 	task: ITask,
-	initialAttachments?: IAttachment[],
 	editEnabled: boolean,
-}>(), {
+}>()
-	editEnabled: true,
-})
 
 // FIXME: this should go through the store
 const emit = defineEmits(['task-changed'])
@@ -223,7 +223,7 @@ function uploadNewAttachment() {
 }
 
 function uploadFilesToTask(files: File[] | FileList) {
-	uploadFiles(attachmentService, props.task.id, files)
+	uploadFiles(attachmentService, task.id, files)
 }
 
 const attachmentToDelete = ref<IAttachment | null>(null)
@@ -260,11 +260,11 @@ async function viewOrDownload(attachment: IAttachment) {
 const copy = useCopyToClipboard()
 
 function copyUrl(attachment: IAttachment) {
-	copy(generateAttachmentUrl(props.task.id, attachment.id))
+	copy(generateAttachmentUrl(task.id, attachment.id))
 }
 
 async function setCoverImage(attachment: IAttachment | null) {
-	const task = await taskStore.setCoverImage(props.task, attachment)
+	const task = await taskStore.setCoverImage(task, attachment)
 	emit('task-changed', task)
 	success({message: t('task.attachment.successfullyChangedCoverImage')})
 }

src/components/tasks/partials/defer-task.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount, toRef, type PropType} from 'vue'
+import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount} from 'vue'
 import {useI18n} from 'vue-i18n'
 import flatPickr from 'vue-flatpickr-component'
 
@@ -46,12 +46,12 @@ import TaskService from '@/services/task'
 import type {ITask} from '@/modelTypes/ITask'
 import {useAuthStore} from '@/stores/auth'
 
-const props = defineProps({
+const {
-	modelValue: {
+	modelValue,
-		type: Object as PropType<ITask>,
+} = defineProps<{
-		required: true,
+	modelValue: ITask,
-	},
+}>()
-})
+
 const emit = defineEmits(['update:modelValue'])
 
 const {t} = useI18n({useScope: 'global'})
@@ -66,7 +66,7 @@ const lastValue = ref<Date | null>()
 const changeInterval = ref<ReturnType<typeof setInterval>>()
 
 watch(
-	toRef(props, 'modelValue'),
+	() => modelValue,
 	(value) => {
 		task.value = { ...value }
 		dueDate.value = value.dueDate

src/components/tasks/partials/kanban-card.vue

@@ -96,14 +96,15 @@ const router = useRouter()
 
 const loadingInternal = ref(false)
 
-const props = withDefaults(defineProps<{
+const {
+	task,
+	loading = false,
+} = defineProps<{
 	task: ITask,
 	loading: boolean,
-}>(), {
+}>()
-	loading: false,
-})
 
-const color = computed(() => getHexColor(props.task.hexColor))
+const color = computed(() => getHexColor(task.hexColor))
 
 async function toggleTaskDone(task: ITask) {
 	loadingInternal.value = true
@@ -120,7 +121,7 @@ async function toggleTaskDone(task: ITask) {
 function openTaskDetail() {
 	router.push({
 		name: 'task.detail',
-		params: {id: props.task.id},
+		params: {id: task.id},
 		state: {backdropView: router.currentRoute.value.fullPath},
 	})
 }
@@ -128,12 +129,12 @@ function openTaskDetail() {
 const coverImageBlobUrl = ref<string | null>(null)
 
 async function maybeDownloadCoverImage() {
-	if (!props.task.coverImageAttachmentId) {
+	if (!task.coverImageAttachmentId) {
 		coverImageBlobUrl.value = null
 		return
 	}
 
-	const attachment = props.task.attachments.find(a => a.id === props.task.coverImageAttachmentId)
+	const attachment = task.attachments.find(a => a.id === task.coverImageAttachmentId)
 	if (!attachment || !SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))) {
 		return
 	}
@@ -143,7 +144,7 @@ async function maybeDownloadCoverImage() {
 }
 
 watch(
-	() => props.task.coverImageAttachmentId,
+	() => task.coverImageAttachmentId,
 	maybeDownloadCoverImage,
 	{immediate: true},
 )

src/components/tasks/partials/reminder-detail.vue

@@ -65,7 +65,6 @@
 
 <script setup lang="ts">
 import {computed, ref, watch} from 'vue'
-import {toRef} from '@vueuse/core'
 import {SECONDS_A_DAY, SECONDS_A_HOUR} from '@/constants/date'
 import {IReminderPeriodRelativeTo, REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
 import {useI18n} from 'vue-i18n'
@@ -84,28 +83,27 @@ import SimpleButton from '@/components/input/SimpleButton.vue'
 
 const {t} = useI18n({useScope: 'global'})
 
-const props = withDefaults(defineProps<{
+const {
+	modelValue,
+	clearAfterUpdate = false,
+	defaultRelativeTo = REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE,
+} = defineProps<{
 	modelValue?: ITaskReminder,
-	disabled?: boolean,
 	clearAfterUpdate?: boolean,
 	defaultRelativeTo?: null | IReminderPeriodRelativeTo,
-}>(), {
+}>()
-	disabled: false,
-	clearAfterUpdate: false,
-	defaultRelativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE,
-})
 
 const emit = defineEmits(['update:modelValue'])
 
 const reminder = ref<ITaskReminder>(new TaskReminderModel())
 
 const presets = computed<TaskReminderModel[]>(() => [
-	{reminder: null, relativePeriod: 0, relativeTo: props.defaultRelativeTo},
+	{reminder: null, relativePeriod: 0, relativeTo: defaultRelativeTo},
-	{reminder: null, relativePeriod: -2 * SECONDS_A_HOUR, relativeTo: props.defaultRelativeTo},
+	{reminder: null, relativePeriod: -2 * SECONDS_A_HOUR, relativeTo: defaultRelativeTo},
-	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY, relativeTo: props.defaultRelativeTo},
+	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY, relativeTo: defaultRelativeTo},
-	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 3, relativeTo: props.defaultRelativeTo},
+	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 3, relativeTo: defaultRelativeTo},
-	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 7, relativeTo: props.defaultRelativeTo},
+	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 7, relativeTo: defaultRelativeTo},
-	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 30, relativeTo: props.defaultRelativeTo},
+	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 30, relativeTo: defaultRelativeTo},
 ])
 const reminderDate = ref(null)
 
@@ -114,7 +112,7 @@ type availableForms = null | 'relative' | 'absolute'
 const showFormSwitch = ref<availableForms>(null)
 
 const activeForm = computed<availableForms>(() => {
-	if (props.defaultRelativeTo === null) {
+	if (defaultRelativeTo === null) {
 		return 'absolute'
 	}
 
@@ -134,9 +132,8 @@ const reminderText = computed(() => {
 	return t('task.addReminder')
 })
 
-const modelValue = toRef(props, 'modelValue')
 watch(
-	modelValue,
+	() => modelValue,
 	(newReminder) => {
 		reminder.value = newReminder || new TaskReminderModel()
 	},
@@ -146,7 +143,7 @@ watch(
 function updateData() {
 	emit('update:modelValue', reminder.value)
 
-	if (props.clearAfterUpdate) {
+	if (clearAfterUpdate) {
 		reminder.value = new TaskReminderModel()
 	}
 }
@@ -168,7 +165,7 @@ function setReminderFromPreset(preset, toggle) {
 
 function updateDataAndMaybeClose(toggle) {
 	updateData()
-	if (props.clearAfterUpdate) {
+	if (clearAfterUpdate) {
 		toggle()
 	}
 }

src/components/tasks/partials/reminder-period.vue

@@ -47,8 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, watch, type PropType} from 'vue'
+import {ref, watch} from 'vue'
-import {toRef} from '@vueuse/core'
 
 import {periodToSeconds, PeriodUnit, secondsToPeriod} from '@/helpers/time/period'
 
@@ -57,16 +56,11 @@ import TaskReminderModel from '@/models/taskReminder'
 import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
 import {REMINDER_PERIOD_RELATIVE_TO_TYPES, type IReminderPeriodRelativeTo} from '@/types/IReminderPeriodRelativeTo'
 
-const props = defineProps({
+const {
-	modelValue: {
+	modelValue,
-		type: Object as PropType<ITaskReminder>,
+} = defineProps<{
-		required: false,
+	modelValue?: ITaskReminder,
-	},
+}>()
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-})
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -86,9 +80,8 @@ const period = ref<PeriodInput>({
 	sign: -1,
 })
 
-const modelValue = toRef(props, 'modelValue')
 watch(
-	modelValue,
+	() => modelValue,
 	(value) => {
 		const p = secondsToPeriod(value?.relativePeriod)
 		period.value.durationUnit = p.unit

src/components/tasks/partials/reminders.vue

@@ -41,20 +41,20 @@ import ReminderDetail from '@/components/tasks/partials/reminder-detail.vue'
 import type {ITask} from '@/modelTypes/ITask'
 import {REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
 
-const props = withDefaults(defineProps<{
+const {
+	modelValue,
+	disabled = false,
+} = defineProps<{
 	modelValue: ITask,
 	disabled?: boolean,
-}>(), {
+}>()
-	modelValue: [],
-	disabled: false,
-})
 
 const emit = defineEmits(['update:modelValue'])
 
 const reminders = ref<ITaskReminder[]>([])
 
 watch(
-	() => props.modelValue.reminders,
+	() => modelValue.reminders,
 	(newVal) => {
 		reminders.value = newVal
 	},
@@ -62,19 +62,19 @@ watch(
 )
 
 const defaultRelativeTo = computed(() => {
-	if (typeof props.modelValue === 'undefined') {
+	if (typeof modelValue === 'undefined') {
 		return null
 	}
 	
-	if (props.modelValue?.dueDate) {
+	if (modelValue?.dueDate) {
 		return REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE
 	}
 	
-	if (props.modelValue.dueDate === null && props.modelValue.startDate !== null) {
+	if (modelValue.dueDate === null && modelValue.startDate !== null) {
 		return REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE
 	}
 	
-	if (props.modelValue.dueDate === null && props.modelValue.startDate === null && props.modelValue.endDate !== null) {
+	if (modelValue.dueDate === null && modelValue.startDate === null && modelValue.endDate !== null) {
 		return REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE
 	}
 	
@@ -83,7 +83,7 @@ const defaultRelativeTo = computed(() => {
 
 function updateData() {
 	emit('update:modelValue', {
-		...props.modelValue,
+		...modelValue,
 		reminders: reminders.value,
 	})
 }

src/components/tasks/partials/singleTaskInProject.vue

@@ -126,7 +126,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, watch, shallowReactive, toRef, type PropType, onMounted, onBeforeUnmount, computed} from 'vue'
+import {ref, watch, shallowReactive, onMounted, onBeforeUnmount, computed} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import TaskModel, { getHexColor } from '@/models/task'
@@ -153,32 +153,21 @@ import {useProjectStore} from '@/stores/projects'
 import {useBaseStore} from '@/stores/base'
 import {useTaskStore} from '@/stores/tasks'
 
-const props = defineProps({
+const {
-	theTask: {
+	theTask,
-		type: Object as PropType<ITask>,
+	isArchived = false,
-		required: true,
+	showProject = false,
-	},
+	disabled = false,
-	isArchived: {
+	showProjectColor = false,
-		type: Boolean,
+	canMarkAsDone = true,
-		default: false,
+} = defineProps<{
-	},
+	theTask: ITask,
-	showProject: {
+	isArchived?: boolean,
-		type: Boolean,
+	showProject?: boolean,
-		default: false,
+	disabled?: boolean,
-	},
+	showProjectColor?: boolean,
-	disabled: {
+	canMarkAsDone?: boolean,
-		type: Boolean,
+}>()
-		default: false,
-	},
-	showProjectColor: {
-		type: Boolean,
-		default: true,
-	},
-	canMarkAsDone: {
-		type: Boolean,
-		default: true,
-	},
-})
 
 const emit = defineEmits(['task-updated'])
 
@@ -188,10 +177,8 @@ const taskService = shallowReactive(new TaskService())
 const task = ref<ITask>(new TaskModel())
 const showDefer = ref(false)
 
-const theTask = toRef(props, 'theTask')
-
 watch(
-	theTask,
+	() => theTask,
 	newVal => {
 		task.value = newVal
 	},

src/views/filters/FilterDelete.vue

@@ -14,11 +14,14 @@
 </template>
 
 <script setup lang="ts">
-import {toRef} from 'vue'
 import type {IProject} from '@/modelTypes/IProject'
 import {useSavedFilter} from '@/services/savedFilter'
 
-const props = defineProps<{ projectId: IProject['id'] }>()
+const {
+	projectId,
+} = defineProps<{
+	projectId: IProject['id'],
+}>()
 
-const {deleteFilter} = useSavedFilter(toRef(props, 'projectId'))
+const {deleteFilter} = useSavedFilter(projectId)
 </script>

src/views/filters/FilterEdit.vue

@@ -54,8 +54,6 @@
 </template>
 
 <script setup lang="ts">
-import {toRef} from 'vue'
-
 import Editor from '@/components/input/AsyncEditor'
 import CreateEdit from '@/components/misc/create-edit.vue'
 import Filters from '@/components/project/partials/filters.vue'
@@ -64,7 +62,11 @@ import {useSavedFilter} from '@/services/savedFilter'
 
 import type {IProject} from '@/modelTypes/IProject'
 
-const props = defineProps<{ projectId: IProject['id'] }>()
+const {
+	projectId,
+} = defineProps<{
+	projectId: IProject['id'],
+}>()
 
 const {
 	saveFilterWithValidation,
@@ -73,5 +75,5 @@ const {
 	filterService,
 	titleValid,
 	validateTitleField,
-} = useSavedFilter(toRef(props, 'projectId'))
+} = useSavedFilter(projectId)
 </script>

src/views/project/ProjectList.vue

@@ -120,7 +120,7 @@ export default { name: 'List' }
 </script>
 
 <script setup lang="ts">
-import {ref, computed, toRef, nextTick, onMounted, type PropType} from 'vue'
+import {ref, computed, nextTick, onMounted} from 'vue'
 import draggable from 'zhyswan-vuedraggable'
 import {useRoute, useRouter} from 'vue-router'
 
@@ -144,12 +144,11 @@ import {useTaskStore} from '@/stores/tasks'
 
 import type {IProject} from '@/modelTypes/IProject'
 
-const props = defineProps({
+const {
-	projectId: {
+	projectId,
-		type: Number as PropType<IProject['id']>,
+} = defineProps<{
-		required: true,
+	projectId: IProject['id'],
-	},
+}>()
-})
 
 const ctaVisible = ref(false)
 const showTaskSearch = ref(false)
@@ -169,7 +168,7 @@ const {
 	searchTerm,
 	params,
 	sortByParam,
-} = useTaskList(toRef(props, 'projectId'), {position: 'asc' })
+} = useTaskList(projectId, {position: 'asc' })
 
 
 const isAlphabeticalSorting = computed(() => {

src/views/project/ProjectTable.vue

@@ -180,7 +180,7 @@
 </template>
 
 <script setup lang="ts">
-import {toRef, computed, type Ref} from 'vue'
+import {computed, type Ref} from 'vue'
 
 import {useStorage} from '@vueuse/core'
 
@@ -200,6 +200,7 @@ import {useTaskList} from '@/composables/useTaskList'
 
 import type {SortBy} from '@/composables/useTaskList'
 import type {ITask} from '@/modelTypes/ITask'
+import type {IProject} from '@/modelTypes/IProject'
 
 const ACTIVE_COLUMNS_DEFAULT = {
 	index: true,
@@ -217,12 +218,11 @@ const ACTIVE_COLUMNS_DEFAULT = {
 	createdBy: false,
 }
 
-const props = defineProps({
+const {
-	projectId: {
+	projectId,
-		type: Number,
+} = defineProps<{
-		required: true,
+	projectId: IProject['id'],
-	},
+}>()
-})
 
 const SORT_BY_DEFAULT: SortBy = {
 	index: 'desc',
@@ -231,7 +231,7 @@ const SORT_BY_DEFAULT: SortBy = {
 const activeColumns = useStorage('tableViewColumns', {...ACTIVE_COLUMNS_DEFAULT})
 const sortBy = useStorage<SortBy>('tableViewSortBy', {...SORT_BY_DEFAULT})
 
-const taskList = useTaskList(toRef(props, 'projectId'), sortBy.value)
+const taskList = useTaskList(projectId, sortBy.value)
 
 const {
 	loading,

src/views/tasks/TaskDetailView.vue

@@ -447,7 +447,7 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive, toRef, shallowReactive, computed, watch, watchEffect, nextTick, type PropType} from 'vue'
+import {ref, reactive, toRef, shallowReactive, computed, watch, watchEffect, nextTick} from 'vue'
 import {useRouter, type RouteLocation} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 import {unrefElement} from '@vueuse/core'
@@ -500,15 +500,13 @@ import type {Action as MessageAction} from '@/message'
 import {useProjectStore} from '@/stores/projects'
 import {TASK_REPEAT_MODES} from '@/types/IRepeatMode'
 
-const props = defineProps({
+const {
-	taskId: {
+	taskId,
-		type: Number as PropType<ITask['id']>,
+	backdropView,
-		required: true,
+} = defineProps<{
-	},
+	taskId: ITask['id'],
-	backdropView: {
+	backdropView?: RouteLocation['fullPath'],
-		type: String as PropType<RouteLocation['fullPath']>,
+}>()
-	},
-})
 
 defineEmits(['close'])
 
@@ -535,8 +533,6 @@ const taskColor = ref<ITask['hexColor']>('')
 // Used to avoid flashing of empty elements if the task content is not yet loaded.
 const visible = ref(false)
 
-const taskId = toRef(props, 'taskId')
-
 const project = computed(() => projectStore.projects[task.value.projectId])
 watchEffect(() => {
 	if (typeof project.value === 'undefined') {
@@ -567,13 +563,14 @@ const color = computed(() => {
 
 const hasAttachments = computed(() => attachmentStore.attachments.length > 0)
 
-const isModal = computed(() => Boolean(props.backdropView))
+const isModal = computed(() => Boolean(backdropView))
 
 function attachmentUpload(file: File, onSuccess?: (url: string) => void) {
-	return uploadFile(taskId.value, file, onSuccess)
+	return uploadFile(taskId, file, onSuccess)
 }
 
 const heading = ref<HTMLElement | null>(null)
+
 async function scrollToHeading() {
 	scrollIntoView(unrefElement(heading))
 }
@@ -581,7 +578,9 @@ async function scrollToHeading() {
 const taskService = shallowReactive(new TaskService())
 
 // load task
-watch(taskId, async (id) => {
+watch(
+	() => taskId,
+	async (id) => {
 		if (id === undefined) {
 			return
 		}
@@ -596,7 +595,7 @@ watch(taskId, async (id) => {
 			scrollToHeading()
 			visible.value = true
 		}
-}, {immediate: true})
+	}, {immediate: true})
 
 type FieldType =
 	| 'assignees'
@@ -613,7 +612,7 @@ type FieldType =
 	| 'repeatAfter'
 	| 'startDate'
 
-const activeFields : {[type in FieldType]: boolean} = reactive({
+const activeFields: { [type in FieldType]: boolean } = reactive({
 	assignees: false,
 	attachments: false,
 	color: false,
@@ -648,7 +647,7 @@ function setActiveFields() {
 	activeFields.startDate = task.value.startDate !== null
 }
 
-const activeFieldElements : {[id in FieldType]: HTMLElement | null} = reactive({
+const activeFieldElements: { [id in FieldType]: HTMLElement | null } = reactive({
 	assignees: null,
 	attachments: null,
 	color: null,
@@ -723,6 +722,7 @@ async function saveTask(
 }
 
 const showDeleteModal = ref(false)
+
 async function deleteTask() {
 	await taskStore.delete(task.value)
 	success({message: t('task.detail.deleteSuccess')})
@@ -837,6 +837,7 @@ h3 .button {
 .icon.is-grey {
 	color: var(--grey-400);
 }
+
 .date-input {
 	display: flex;
 	align-items: center;

vite.config.ts

@@ -121,6 +121,9 @@ export default defineConfig(({mode}) => {
 		plugins: [
 			vue({
 				reactivityTransform: true,
+				script: {
+					propsDestructure: true,
+				},
 			}),
 			legacy,
 			svgLoader({