feat: move from life cycle to data or watcher

- remove from created / mounted
- initialize component services in data
- use immediate watcher where appropriate
- deep watch for route changes

src/views/tasks/ShowTasks.vue

@@ -97,7 +97,10 @@ export default {
 		setTimeout(() => this.showNothingToDo = true, 100)
 	},
 	watch: {
-		'$route': 'loadPendingTasks',
+		'$route': {
+			handler: 'loadPendingTasks',
+			deep: true,
+		},
 		startDate(newVal) {
 			this.cStartDate = newVal
 		},

src/views/tasks/ShowTasksInRange.vue

@@ -10,6 +10,10 @@
 <script>
 import ShowTasks from './ShowTasks'
 
+function getNextWeekDate() {
+	return new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
+}
+
 export default {
 	name: 'ShowTasksInRange',
 	components: {
@@ -17,18 +21,9 @@ export default {
 	},
 	data() {
 		return {
-			startDate: null,
-			endDate: null,
+			startDate: new Date(),
+			endDate: getNextWeekDate(),
 		}
 	},
-	created() {
-		this.setDatesToNextWeek()
-	},
-	methods: {
-		setDatesToNextWeek() {
-			this.startDate = new Date()
-			this.endDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
-		},
-	},
 }
 </script>

src/views/tasks/TaskDetailView.vue

@@ -468,8 +468,8 @@ export default {
 	data() {
 		return {
 			taskId: Number(this.$route.params.id),
-			taskService: TaskService,
-			task: TaskModel,
+			taskService: new TaskService(),
+			task: new TaskModel(),
 			relationKinds: relationKinds,
 			// We doubled the task color property here because verte does not have a real change property, leading
 			// to the color property change being triggered when the # is removed from it, leading to an update,
@@ -503,14 +503,11 @@ export default {
 		}
 	},
 	watch: {
-		'$route': 'loadTask',
-	},
-	created() {
-		this.taskService = new TaskService()
-		this.task = new TaskModel()
-	},
-	mounted() {
-		this.loadTask()
+		'$route': {
+			handler: 'loadTask',
+			deep: true,
+			immediate: true,
+		},
 	},
 	computed: {
 		currentList() {