diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 2e717fd952..ca56e4e035 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -25,49 +25,48 @@
 					</transition>
 				</label>
 				<div class="field" key="field-search">
-					<multiselect
+					<Multiselect
 						:placeholder="$t('task.relation.searchPlaceholder')"
 						@search="findTasks"
 						:loading="taskService.loading"
 						:search-results="mappedFoundTasks"
 						label="title"
-						v-model="newTaskRelationTask"
+						v-model="newTaskRelation.task"
 						:creatable="true"
 						:create-placeholder="$t('task.relation.createPlaceholder')"
 						@create="createAndRelateTask"
-						@select="addTaskRelation"
 					>
-						<template #searchResult="props">
-							<span v-if="typeof props.option !== 'string'" class="search-result">
+						<template #searchResult="{option: task}">
+							<span v-if="typeof task !== 'string'" class="search-result">
 								<span
 									class="different-list"
-									v-if="props.option.listId !== listId"
+									v-if="task.listId !== listId"
 								>
 									<span
-										v-if="props.option.differentNamespace !== null"
+										v-if="task.differentNamespace !== null"
 										v-tooltip="$t('task.relation.differentNamespace')">
-										{{ props.option.differentNamespace }} >
+										{{ task.differentNamespace }} >
 									</span>
 									<span
-										v-if="props.option.differentList !== null"
+										v-if="task.differentList !== null"
 										v-tooltip="$t('task.relation.differentList')">
-										{{ props.option.differentList }} >
+										{{ task.differentList }} >
 									</span>
 								</span>
-								{{ props.option.title }}
+								{{ task.title }}
 							</span>
 							<span class="search-result" v-else>
-								{{ props.option }}
+								{{ task }}
 							</span>
 						</template>
-					</multiselect>
+					</Multiselect>
 				</div>
 				<div class="field has-addons mb-4" key="field-kind">
 					<div class="control is-expanded">
 						<div class="select is-fullwidth has-defaults">
-							<select v-model="newTaskRelationKind">
+							<select v-model="newTaskRelation.kind">
 								<option value="unset">{{ $t('task.relation.select') }}</option>
-								<option :key="rk" :value="rk" v-for="rk in relationKinds">
+								<option :key="`option_${rk}`" :value="rk" v-for="rk in RELATION_KINDS">
 									{{ $tc(`task.relation.kinds.${rk}`, 1) }}
 								</option>
 							</select>
@@ -85,7 +84,7 @@
 			<div class="tasks">
 				<div :key="t.id" class="task" v-for="t in rts.tasks">
 					<router-link
-						:to="{ name: $route.name, params: { id: t.id } }"
+						:to="{ name: route.name as string, params: { id: t.id } }"
 						:class="{ 'is-strikethrough': t.done}">
 						<span
 							class="different-list"
@@ -106,7 +105,10 @@
 					</router-link>
 					<BaseButton
 						v-if="editEnabled"
-						@click="() => {showDeleteModal = true; relationToDelete = {relationKind: rts.kind, otherTaskId: t.id}}"
+						@click="setRelationToDelete({
+							relationKind: rts.kind,
+							otherTaskId: t.id
+						})"
 						class="remove"
 					>
 						<icon icon="trash-alt"/>
@@ -118,204 +120,216 @@
 			{{ $t('task.relation.noneYet') }}
 		</p>
 
-		<!-- Delete modal -->
-		<transition name="modal">
-			<modal
-				@close="showDeleteModal = false"
-				@submit="removeTaskRelation()"
-				v-if="showDeleteModal"
-			>
-				<template #header><span>{{ $t('task.relation.delete') }}</span></template>
+		<modal
+			v-if="relationToDelete !== undefined"
+			@close="relationToDelete = undefined"
+			@submit="removeTaskRelation()"
+		>
+			<template #header><span>{{ $t('task.relation.delete') }}</span></template>
 
-				<template #text>
-					<p>
-						{{ $t('task.relation.deleteText1') }}<br/>
-						<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
-					</p>
-				</template>
-			</modal>
-		</transition>
+			<template #text>
+				<p>
+					{{ $t('task.relation.deleteText1') }}<br/>
+					<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
+				</p>
+			</template>
+		</modal>
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import {ref, reactive, shallowReactive, watch, computed, type PropType} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {useRoute} from 'vue-router'
+import {useStore} from '@/store'
 
-import TaskService from '../../../services/task'
-import TaskModel from '../../../models/task'
-import TaskRelationService from '../../../services/taskRelation'
+import TaskService from '@/services/task'
+import TaskModel from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'
+import type {ITaskRelation} from '@/modelTypes/ITaskRelation'
+import {RELATION_KINDS, RELATION_KIND, type IRelationKind} from '@/types/IRelationKind'
+
+import TaskRelationService from '@/services/taskRelation'
 import TaskRelationModel from '@/models/taskRelation'
-import { RELATION_KIND, RELATION_KINDS } from '@/types/IRelationKind'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
+import { error } from '@/message'
 
-export default defineComponent({
-	name: 'relatedTasks',
-	data() {
-		return {
-			relatedTasks: {},
-			taskService: new TaskService(),
-			foundTasks: [],
-			relationKinds: RELATION_KINDS,
-			newTaskRelationTask: new TaskModel(),
-			newTaskRelationKind: RELATION_KIND.RELATED,
-			taskRelationService: new TaskRelationService(),
-			showDeleteModal: false,
-			relationToDelete: {},
-			saved: false,
-			showNewRelationForm: false,
-			query: '',
-		}
+const props = defineProps({
+	taskId: {
+		type: Number,
+		required: true,
 	},
-	components: {
-		BaseButton,
-		Multiselect,
+	initialRelatedTasks: {
+		type: Object as PropType<ITask['relatedTasks']>,
+		default: () => ({}),
 	},
-	props: {
-		taskId: {
-			type: Number,
-			required: true,
-		},
-		initialRelatedTasks: {
-			type: Object,
-			default: () => {
-			},
-		},
-		showNoRelationsNotice: {
-			type: Boolean,
-			default: false,
-		},
-		listId: {
-			type: Number,
-			default: 0,
-		},
-		editEnabled: {
-			default: true,
-		},
+	showNoRelationsNotice: {
+		type: Boolean,
+		default: false,
 	},
-	watch: {
-		initialRelatedTasks: {
-			handler(value) {
-				this.relatedTasks = value
-			},
-			immediate: true,
-		},
+	listId: {
+		type: Number,
+		default: 0,
 	},
-	computed: {
-		showCreate() {
-			return Object.keys(this.relatedTasks).length === 0 || this.showNewRelationForm
-		},
-		namespace() {
-			return this.$store.getters['namespaces/getListAndNamespaceById'](this.listId, true)?.namespace
-		},
-		mappedRelatedTasks() {
-			return Object.entries(this.relatedTasks).map(([kind, tasks]) => ({
-				title: this.$tc(`task.relation.kinds.${kind}`, tasks.length),
-				tasks: this.mapRelatedTasks(tasks),
-				kind,
-			}))
-		},
-		mappedFoundTasks() {
-			return this.mapRelatedTasks(this.foundTasks.filter(t => t.id !== this.taskId))
-		},
-	},
-	methods: {
-		async findTasks(query: string) {
-			this.query = query
-			this.foundTasks = await this.taskService.getAll({}, {s: query})
-		},
-
-		async addTaskRelation() {
-			if (this.newTaskRelationTask.id === 0 && this.query !== '') {
-				return this.createAndRelateTask(this.query)
-			}
-
-			if (this.newTaskRelationTask.id === 0) {
-				this.$message.error({message: this.$t('task.relation.taskRequired')})
-				return
-			}
-
-			const rel = new TaskRelationModel({
-				taskId: this.taskId,
-				otherTaskId: this.newTaskRelationTask.id,
-				relationKind: this.newTaskRelationKind,
-			})
-			await this.taskRelationService.create(rel)
-			if (!this.relatedTasks[this.newTaskRelationKind]) {
-				this.relatedTasks[this.newTaskRelationKind] = []
-			}
-			this.relatedTasks[this.newTaskRelationKind].push(this.newTaskRelationTask)
-			this.newTaskRelationTask = null
-			this.saved = true
-			this.showNewRelationForm = false
-			setTimeout(() => {
-				this.saved = false
-			}, 2000)
-		},
-
-		async removeTaskRelation() {
-			const rel = new TaskRelationModel({
-				relationKind: this.relationToDelete.relationKind,
-				taskId: this.taskId,
-				otherTaskId: this.relationToDelete.otherTaskId,
-			})
-			try {
-				await this.taskRelationService.delete(rel)
-
-				const kind = this.relationToDelete.relationKind
-				for (const t in this.relatedTasks[kind]) {
-					if (this.relatedTasks[kind][t].id === this.relationToDelete.otherTaskId) {
-						this.relatedTasks[kind].splice(t, 1)
-
-						break
-					}
-				}
-
-				this.saved = true
-				setTimeout(() => {
-					this.saved = false
-				}, 2000)
-			} finally {
-				this.showDeleteModal = false
-			}
-		},
-
-		async createAndRelateTask(title) {
-			const newTask = new TaskModel({title: title, listId: this.listId})
-			this.newTaskRelationTask = await this.taskService.create(newTask)
-			await this.addTaskRelation()
-		},
-
-		relationKindTitle(kind, length) {
-			return this.$tc(`task.relation.kinds.${kind}`, length)
-		},
-
-		mapRelatedTasks(tasks) {
-			return tasks
-				.map(task => {
-					// by doing this here once we can save a lot of duplicate calls in the template
-					const listAndNamespace = this.$store.getters['namespaces/getListAndNamespaceById'](task.listId, true)
-					const {
-						list,
-						namespace,
-					} = listAndNamespace === null ? {list: null, namespace: null} : listAndNamespace
-
-					return {
-						...task,
-						differentNamespace:
-							(namespace !== null &&
-								namespace.id !== this.namespace.id &&
-								namespace?.title) || null,
-						differentList:
-							(list !== null &&
-								task.listId !== this.listId &&
-								list?.title) || null,
-					}
-				})
-		},
+	editEnabled: {
+		default: true,
 	},
 })
+
+const store = useStore()
+const route = useRoute()
+const {t} = useI18n({useScope: 'global'})
+
+type TaskRelation = {kind: IRelationKind, task: ITask}
+
+const taskService = shallowReactive(new TaskService())
+
+const relatedTasks = ref<ITask['relatedTasks']>({})
+
+const newTaskRelation: TaskRelation = reactive({
+	kind: RELATION_KIND.RELATED,
+	task: new TaskModel(),
+})
+
+watch(
+	() => props.initialRelatedTasks,
+	(value) => {
+		relatedTasks.value = value
+	},
+		{immediate: true},
+)
+
+const showNewRelationForm = ref(false)
+const showCreate = computed(() => Object.keys(relatedTasks.value).length === 0 || showNewRelationForm.value)
+
+const query = ref('')
+const foundTasks = ref<ITask[]>([])
+
+async function findTasks(newQuery: string) {
+	query.value = newQuery
+	foundTasks.value = await taskService.getAll({}, {s: newQuery})
+}
+
+const getListAndNamespaceById = (listId: number) => store.getters['namespaces/getListAndNamespaceById'](listId, true)
+
+const namespace = computed(() => getListAndNamespaceById(props.listId)?.namespace)
+
+function mapRelatedTasks(tasks: ITask[]) {
+	return tasks.map(task => {
+		// by doing this here once we can save a lot of duplicate calls in the template
+		const {
+			list,
+			namespace: taskNamespace,
+		} = getListAndNamespaceById(task.listId) || {list: null, namespace: null}
+
+		return {
+			...task,
+			differentNamespace:
+				(taskNamespace !== null &&
+					taskNamespace.id !== namespace.value.id &&
+					taskNamespace?.title) || null,
+			differentList:
+				(list !== null &&
+					task.listId !== props.listId &&
+					list?.title) || null,
+		}
+	})
+}
+
+const mapRelationKindsTitleGetter = computed(() => ({
+	'subtask': (count: number) => t('task.relation.kinds.subtask', count),
+	'parenttask': (count: number) => t('task.relation.kinds.parenttask', count),
+	'related': (count: number) => t('task.relation.kinds.related', count),
+	'duplicateof': (count: number) => t('task.relation.kinds.duplicateof', count),
+	'duplicates': (count: number) => t('task.relation.kinds.duplicates', count),
+	'blocking': (count: number) => t('task.relation.kinds.blocking', count),
+	'blocked': (count: number) => t('task.relation.kinds.blocked', count),
+	'precedes': (count: number) => t('task.relation.kinds.precedes', count),
+	'follows': (count: number) => t('task.relation.kinds.follows', count),
+	'copiedfrom': (count: number) => t('task.relation.kinds.copiedfrom', count),
+	'copiedto': (count: number) => t('task.relation.kinds.copiedto', count),
+}))
+
+const mappedRelatedTasks = computed(() => Object.entries(relatedTasks.value).map(
+	([kind, tasks]) => ({
+		title: mapRelationKindsTitleGetter.value[kind as IRelationKind](tasks.length),
+		tasks: mapRelatedTasks(tasks),
+		kind: kind as IRelationKind,
+	}),
+))
+const mappedFoundTasks = computed(() => mapRelatedTasks(foundTasks.value.filter(t => t.id !== props.taskId)))
+
+const taskRelationService = shallowReactive(new TaskRelationService())
+const saved = ref(false)
+
+async function addTaskRelation() {
+	if (newTaskRelation.task.id === 0 && query.value !== '') {
+		return createAndRelateTask(query.value)
+	}
+
+	if (newTaskRelation.task.id === 0) {
+		error({message: t('task.relation.taskRequired')})
+		return
+	}
+
+	await taskRelationService.create(new TaskRelationModel({
+		taskId: props.taskId,
+		otherTaskId: newTaskRelation.task.id,
+		relationKind: newTaskRelation.kind,
+	}))
+	relatedTasks.value[newTaskRelation.kind] = [
+		...(relatedTasks.value[newTaskRelation.kind] || []),
+		newTaskRelation.task,
+	]
+	newTaskRelation.task = new TaskModel()
+	saved.value = true
+	showNewRelationForm.value = false
+	setTimeout(() => {
+		saved.value = false
+	}, 2000)
+}
+
+const relationToDelete = ref<Partial<ITaskRelation>>()
+
+function setRelationToDelete(relation: Partial<ITaskRelation>) {
+	relationToDelete.value = relation
+}
+
+async function removeTaskRelation() {
+	const relation = relationToDelete.value
+	if (!relation || !relation.relationKind || !relation.otherTaskId) {
+		relationToDelete.value = undefined
+		return
+	}
+	try {
+		const relationKind = relation.relationKind
+		await taskRelationService.delete(new TaskRelationModel({
+			relationKind,
+			taskId: props.taskId,
+			otherTaskId: relation.otherTaskId,
+		}))
+
+		relatedTasks.value[relationKind] = relatedTasks.value[relationKind]?.filter(
+			({id}) => id !== relation.otherTaskId,
+		)
+
+		saved.value = true
+		setTimeout(() => {
+			saved.value = false
+		}, 2000)
+	} finally {
+		relationToDelete.value = undefined
+	}
+}
+
+async function createAndRelateTask(title: string) {
+	const newTask = await taskService.create(new TaskModel({title, listId: props.listId}))
+	console.log('new task created', JSON.parse(JSON.stringify(newTask)))
+	newTaskRelation.task = newTask
+	await addTaskRelation()
+}
 </script>
 
 <style lang="scss" scoped>
@@ -366,15 +380,16 @@ export default defineComponent({
 		}
 	}
 
-	.remove {
-		text-align: center;
-		color: var(--danger);
-		opacity: 0;
-		transition: opacity $transition;
-	}
 }
 
-.related-tasks:hover .tasks .task .remove {
+.remove {
+	text-align: center;
+	color: var(--danger);
+	opacity: 0;
+	transition: opacity $transition;
+}
+
+.task:hover .remove {
 	opacity: 1;
 }
 
diff --git a/src/modelTypes/ITask.ts b/src/modelTypes/ITask.ts
index 86bae8c2a3..6616a680fc 100644
--- a/src/modelTypes/ITask.ts
+++ b/src/modelTypes/ITask.ts
@@ -31,7 +31,7 @@ export interface ITask extends IAbstract {
 	parentTaskId: ITask['id']
 	hexColor: string
 	percentDone: number
-	relatedTasks: Partial<Record<IRelationKind, ITask>>,
+	relatedTasks: Partial<Record<IRelationKind, ITask[]>>,
 	attachments: IAttachment[]
 	identifier: string
 	index: number
diff --git a/src/models/task.ts b/src/models/task.ts
index 3d1a99bd1c..641b2bc538 100644
--- a/src/models/task.ts
+++ b/src/models/task.ts
@@ -56,7 +56,7 @@ export default class TaskModel extends AbstractModel<ITask> implements ITask {
 	parentTaskId: ITask['id'] = 0
 	hexColor = ''
 	percentDone = 0
-	relatedTasks:  Partial<Record<IRelationKind, ITask>> = {}
+	relatedTasks:  Partial<Record<IRelationKind, ITask[]>> = {}
 	attachments: IAttachment[] = []
 	identifier = ''
 	index = 0
@@ -73,7 +73,7 @@ export default class TaskModel extends AbstractModel<ITask> implements ITask {
 	listId: IList['id'] = 0
 	bucketId: IBucket['id'] = 0
 
-	constructor(data: Partial<ITask>) {
+	constructor(data: Partial<ITask> = {}) {
 		super()
 		this.assignData(data)
 
@@ -109,7 +109,7 @@ export default class TaskModel extends AbstractModel<ITask> implements ITask {
 			this.hexColor = '#' + this.hexColor
 		}
 
-		// Make all subtasks to task models
+		// Convert all subtasks to task models
 		Object.keys(this.relatedTasks).forEach(relationKind => {
 			this.relatedTasks[relationKind] = this.relatedTasks[relationKind].map(t => {
 				return new TaskModel(t)
diff --git a/src/models/taskRelation.ts b/src/models/taskRelation.ts
index 0dfdac81ff..a4df1159df 100644
--- a/src/models/taskRelation.ts
+++ b/src/models/taskRelation.ts
@@ -5,15 +5,15 @@ import type {ITaskRelation} from '@/modelTypes/ITaskRelation'
 import type {ITask} from '@/modelTypes/ITask'
 import type {IUser} from '@/modelTypes/IUser'
 
-import type {IRelationKind} from '@/types/IRelationKind'
+import {RELATION_KIND, type IRelationKind} from '@/types/IRelationKind'
 export default class TaskRelationModel extends AbstractModel<ITaskRelation> implements ITaskRelation {
 	id = 0
 	otherTaskId: ITask['id'] = 0
 	taskId: ITask['id'] = 0
-	relationKind: IRelationKind = ''
+	relationKind: IRelationKind = RELATION_KIND.RELATED
 
-	createdBy: IUser = UserModel
-	created: Date = null
+	createdBy: IUser = new UserModel()
+	created: Date = new Date
 
 	constructor(data: Partial<ITaskRelation>) {
 		super()
diff --git a/src/models/user.ts b/src/models/user.ts
index a946b4a2a8..a014844583 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -14,7 +14,7 @@ export default class UserModel extends AbstractModel<IUser> implements IUser {
 	updated: Date = null
 	settings: IUserSettings = null
 
-	constructor(data: Partial<IUser>) {
+	constructor(data: Partial<IUser> = {}) {
 		super()
 		this.assignData(data)
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 14afeb3892..acde7194f0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,8 +3,6 @@ import type { RouteLocation } from 'vue-router'
 import {saveLastVisited} from '@/helpers/saveLastVisited'
 import {store} from '@/store'
 
-import type ListModel from '@/models/list'
-
 import {saveListView, getListView} from '@/helpers/saveListView'
 import {parseDateOrString} from '@/helpers/time/parseDateOrString'
 import {getNextWeekDate} from '@/helpers/time/getNextWeekDate'
@@ -223,7 +221,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
-			props: route => ({ namespaceId: parseInt(route.params.id as string) }),
+			props: route => ({ namespaceId: Number(route.params.id as string) }),
 		},
 		{
 			path: '/namespaces/:namespaceId/settings/share',
@@ -254,7 +252,7 @@ const router = createRouter({
 			path: '/tasks/:id',
 			name: 'task.detail',
 			component: TaskDetailView,
-			props: route => ({ taskId: parseInt(route.params.id as string) }),
+			props: route => ({ taskId: Number(route.params.id as string) }),
 		},
 		{
 			path: '/tasks/by/upcoming',
@@ -279,7 +277,7 @@ const router = createRouter({
 			path: '/lists/:listId/settings/edit',
 			name: 'list.settings.edit',
 			component: ListSettingEdit,
-			props: route => ({ listId: parseInt(route.params.listId as ListModel['id']) }),
+			props: route => ({ listId: Number(route.params.listId as string) }),
 			meta: {
 				showAsModal: true,
 			},
@@ -371,21 +369,21 @@ const router = createRouter({
 			name: 'list.list',
 			component: ListList,
 			beforeEnter: (to) => saveListView(to.params.listId, to.name),
-			props: route => ({ listId: parseInt(route.params.listId as string) }),
+			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/gantt',
 			name: 'list.gantt',
 			component: ListGantt,
 			beforeEnter: (to) => saveListView(to.params.listId, to.name),
-			props: route => ({ listId: parseInt(route.params.listId as string) }),
+			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/table',
 			name: 'list.table',
 			component: ListTable,
 			beforeEnter: (to) => saveListView(to.params.listId, to.name),
-			props: route => ({ listId: parseInt(route.params.listId as string) }),
+			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/kanban',
@@ -400,7 +398,7 @@ const router = createRouter({
 					setTitle(listFromStore.title)
 				}
 			},
-			props: route => ({ listId: parseInt(route.params.listId as string) }),
+			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
 			path: '/teams',
diff --git a/src/stores/lists.ts b/src/stores/lists.ts
index 2f5193bf7b..b12923cd10 100644
--- a/src/stores/lists.ts
+++ b/src/stores/lists.ts
@@ -153,10 +153,10 @@ export const useListStore = defineStore('list', {
 	},
 })
 
-export function useList(listId: MaybeRef<ListModel['id']>) {
+export function useList(listId: MaybeRef<IList['id']>) {
 	const listService = shallowReactive(new ListService())
 	const {loading: isLoading} = toRefs(listService)
-	const list : ListModel = reactive(new ListModel({}))
+	const list: ListModel = reactive(new ListModel())
 	const {t} = useI18n({useScope: 'global'})
 
 	watch(