fix: set and use correct type for destructured props

src/components/project/partials/useProjectBackground.ts

@@ -1,19 +1,19 @@
-import {ref, watch, type Ref} from 'vue'
+import {ref, watch, type ShallowReactive} from 'vue'
 import ProjectService from '@/services/project'
 import type {IProject} from '@/modelTypes/IProject'
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
-export function useProjectBackground(project: Ref<IProject>) {
+export function useProjectBackground(project: ShallowReactive<IProject>) {
 	const background = ref<string | null>(null)
 	const backgroundLoading = ref(false)
 	const blurHashUrl = ref('')
 
 	watch(
-		() => [project.value.id, project.value.backgroundBlurHash] as [IProject['id'], IProject['backgroundBlurHash']],
+		() => [project.id, project.backgroundBlurHash] as [IProject['id'], IProject['backgroundBlurHash']],
 		async ([projectId, blurHash], oldValue) => {
 			if (
-				project.value === null ||
-				!project.value.backgroundInformation ||
+				project === null ||
+				!project.backgroundInformation ||
 				backgroundLoading.value
 			) {
 				return
@@ -36,7 +36,7 @@ export function useProjectBackground(project: Ref<IProject>) {
 				})
 
 				const projectService = new ProjectService()
-				const backgroundPromise = projectService.background(project.value).then((result) => {
+				const backgroundPromise = projectService.background(project).then((result) => {
 					background.value = result
 				})
 				await Promise.all([blurHashPromise, backgroundPromise])

src/components/tasks/partials/singleTaskInProject.vue

@@ -185,7 +185,7 @@ watch(
 )
 
 onMounted(() => {
-	task.value = theTask.value
+	task.value = theTask
 	document.addEventListener('click', hideDeferDueDatePopup)
 })
 

src/composables/useTaskList.ts

@@ -1,9 +1,10 @@
-import {ref, shallowReactive, watch, computed} from 'vue'
+import {ref, shallowReactive, watch, computed, type ShallowReactive} from 'vue'
 import {useRoute} from 'vue-router'
 
 import TaskCollectionService from '@/services/taskCollection'
 import type {ITask} from '@/modelTypes/ITask'
 import {error} from '@/message'
+import type {IProject} from '@/modelTypes/IProject'
 
 export type Order = 'asc' | 'desc' | 'none'
 
@@ -60,7 +61,7 @@ const SORT_BY_DEFAULT: SortBy = {
 /**
  * This mixin provides a base set of methods and properties to get tasks.
  */
-export function useTaskList(projectId, sortByDefault: SortBy = SORT_BY_DEFAULT) {
+export function useTaskList(projectId: ShallowReactive<IProject['id']>, sortByDefault: SortBy = SORT_BY_DEFAULT) {
 	const params = ref({...getDefaultParams()})
 	
 	const search = ref('')
@@ -80,7 +81,7 @@ export function useTaskList(projectId, sortByDefault: SortBy = SORT_BY_DEFAULT)
 		loadParams = formatSortOrder(sortBy.value, loadParams)
 
 		return [
-			{projectId: projectId.value},
+			{projectId: projectId},
 			loadParams,
 			page.value || 1,
 		]