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/components/tasks/partials/attachments.vue

@@ -151,7 +151,7 @@ export default {
 	},
 	data() {
 		return {
-			attachmentService: AttachmentService,
+			attachmentService: new AttachmentService(),
 			showDropzone: false,
 
 			showDeleteModal: false,
@@ -173,9 +173,6 @@ export default {
 			default: true,
 		},
 	},
-	created() {
-		this.attachmentService = new AttachmentService()
-	},
 	computed: mapState({
 		attachments: (state) => state.attachments.attachments,
 	}),

src/components/tasks/partials/comments.vue

@@ -180,13 +180,13 @@ export default {
 			comments: [],
 
 			showDeleteModal: false,
-			commentToDelete: TaskCommentModel,
+			commentToDelete: new TaskCommentModel(),
 
 			isCommentEdit: false,
-			commentEdit: TaskCommentModel,
+			commentEdit: new TaskCommentModel(),
 
-			taskCommentService: TaskCommentService,
-			newComment: TaskCommentModel,
+			taskCommentService: new TaskCommentService(),
+			newComment: new TaskCommentModel(),
 			editorActive: true,
 			actions: {},
 
@@ -195,22 +195,15 @@ export default {
 			creating: false,
 		}
 	},
-	created() {
-		this.taskCommentService = new TaskCommentService()
-		this.newComment = new TaskCommentModel({taskId: this.taskId})
-		this.commentEdit = new TaskCommentModel({taskId: this.taskId})
-		this.commentToDelete = new TaskCommentModel({taskId: this.taskId})
-		this.comments = []
-	},
-	mounted() {
-		this.loadComments()
-	},
 	watch: {
-		taskId() {
-			this.loadComments()
-			this.newComment.taskId = this.taskId
-			this.commentEdit.taskId = this.taskId
-			this.commentToDelete.taskId = this.taskId
+		taskId: {
+			handler(taskId) {
+				this.loadComments()
+				this.newComment.taskId = taskId
+				this.commentEdit.taskId = taskId
+				this.commentToDelete.taskId = taskId
+			},
+			immediate: true,
 		},
 		canWrite() {
 			this.makeActions()

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

@@ -45,7 +45,7 @@ export default {
 	name: 'defer-task',
 	data() {
 		return {
-			taskService: TaskService,
+			taskService: new TaskService(),
 			task: null,
 			// We're saving the due date seperately to prevent null errors in very short periods where the task is null.
 			dueDate: null,
@@ -61,14 +61,17 @@ export default {
 			required: true,
 		},
 	},
-	created() {
-		this.taskService = new TaskService()
+	watch: {
+		value: {
+			handler(value) {
+				this.task = value
+				this.dueDate = value.dueDate
+				this.lastValue = value.dueDate
+			},
+			immediate: true,
+		},
 	},
 	mounted() {
-		this.task = this.value
-		this.dueDate = this.task.dueDate
-		this.lastValue = this.dueDate
-
 		// Because we don't really have other ways of handling change since if we let flatpickr
 		// change events trigger updates, it would trigger a flatpickr change event which would trigger
 		// an update which would trigger a change event and so on...
@@ -86,13 +89,6 @@ export default {
 		}
 		this.updateDueDate()
 	},
-	watch: {
-		value(newVal) {
-			this.task = newVal
-			this.dueDate = this.task.dueDate
-			this.lastValue = this.dueDate
-		},
-	},
 	computed: {
 		flatPickerConfig() {
 			return {

src/components/tasks/partials/description.vue

@@ -68,13 +68,13 @@ export default {
 		},
 	},
 	watch: {
-		value(newVal) {
-			this.task = newVal
+		value: {
+			handler(value) {
+				this.task = value
+			},
+			immediate: true,
 		},
 	},
-	mounted() {
-		this.task = this.value
-	},
 	methods: {
 		save() {
 			this.saving = true

src/components/tasks/partials/editAssignees.vue

@@ -61,22 +61,19 @@ export default {
 	},
 	data() {
 		return {
-			newAssignee: UserModel,
-			listUserService: ListUserService,
+			newAssignee: new UserModel(),
+			listUserService: new ListUserService(),
 			foundUsers: [],
 			assignees: [],
-			taskAssigneeService: TaskAssigneeService,
+			taskAssigneeService: new TaskAssigneeService(),
 		}
 	},
-	created() {
-		this.assignees = this.value
-		this.listUserService = new ListUserService()
-		this.newAssignee = new UserModel()
-		this.taskAssigneeService = new TaskAssigneeService()
-	},
 	watch: {
-		value(newVal) {
-			this.assignees = newVal
+		value: {
+			handler(value) {
+				this.assignees = value
+			},
+			immediate: true,
 		},
 	},
 	methods: {

src/components/tasks/partials/editLabels.vue

@@ -64,7 +64,7 @@ export default {
 	},
 	data() {
 		return {
-			labelTaskService: LabelTaskService,
+			labelTaskService: new LabelTaskService(),
 			labelTimeout: null,
 			labels: [],
 			query: '',
@@ -74,14 +74,13 @@ export default {
 		Multiselect,
 	},
 	watch: {
-		value(newLabels) {
-			this.labels = newLabels
+		value: {
+			handler(value) {
+				this.labels = value
+			},
+			immediate: true,
 		},
 	},
-	created() {
-		this.labelTaskService = new LabelTaskService()
-		this.labels = this.value
-	},
 	computed: {
 		foundLabels() {
 			const labels = (Object.values(this.$store.state.labels.labels).filter(l => {

src/components/tasks/partials/heading.vue

@@ -9,7 +9,6 @@
 			@keydown.enter.prevent.stop="$event.target.blur()"
 			:contenteditable="canWrite ? 'true' : 'false'"
 			spellcheck="false"
-			ref="taskTitle"
 		>
 			{{ task.title.trim() }}
 		</h1>

src/components/tasks/partials/listSearch.vue

@@ -26,8 +26,8 @@ export default {
 	name: 'listSearch',
 	data() {
 		return {
-			listSerivce: ListService,
-			list: ListModel,
+			listSerivce: new ListService(),
+			list: new ListModel(),
 			foundLists: [],
 		}
 	},
@@ -39,18 +39,14 @@ export default {
 	components: {
 		Multiselect,
 	},
-	beforeMount() {
-		this.listSerivce = new ListService()
-		this.list = new ListModel()
-	},
 	watch: {
-		value(newVal) {
-			this.list = newVal
+		value: {
+			handler(value) {
+				this.list = value
+			},
+			immeditate: true,
 		},
 	},
-	mounted() {
-		this.list = this.value
-	},
 	methods: {
 		findLists(query) {
 			if (query === '') {

src/components/tasks/partials/prioritySelect.vue

@@ -33,13 +33,13 @@ export default {
 	},
 	watch: {
 		// Set the priority to the :value every time it changes from the outside
-		value(newVal) {
-			this.priority = newVal
+		value: {
+			handler(value) {
+				this.priority = value
+			},
+			immediate: true,
 		},
 	},
-	mounted() {
-		this.priority = this.value
-	},
 	methods: {
 		updateData() {
 			this.$emit('input', this.priority)

src/components/tasks/partials/relatedTasks.vue

@@ -134,12 +134,12 @@ export default {
 	data() {
 		return {
 			relatedTasks: {},
-			taskService: TaskService,
+			taskService: new TaskService(),
 			foundTasks: [],
 			relationKinds: relationKinds,
-			newTaskRelationTask: TaskModel,
+			newTaskRelationTask: new TaskModel(),
 			newTaskRelationKind: 'related',
-			taskRelationService: TaskRelationService,
+			taskRelationService: new TaskRelationService(),
 			showDeleteModal: false,
 			relationToDelete: {},
 			saved: false,
@@ -171,19 +171,14 @@ export default {
 			default: true,
 		},
 	},
-	created() {
-		this.taskService = new TaskService()
-		this.taskRelationService = new TaskRelationService()
-		this.newTaskRelationTask = new TaskModel()
-	},
 	watch: {
-		initialRelatedTasks(newVal) {
-			this.relatedTasks = newVal
+		initialRelatedTasks: {
+			handler(value) {
+				this.relatedTasks = value
+			},
+			immediate: true,
 		},
 	},
-	mounted() {
-		this.relatedTasks = this.initialRelatedTasks
-	},
 	computed: {
 		showCreate() {
 			return Object.keys(this.relatedTasks).length === 0 || this.showNewRelationForm

src/components/tasks/partials/repeatAfter.vue

@@ -75,19 +75,16 @@ export default {
 		},
 	},
 	watch: {
-		value(newVal) {
-			this.task = newVal
-			if (typeof newVal.repeatAfter !== 'undefined') {
-				this.repeatAfter = newVal.repeatAfter
-			}
+		value: {
+			handler(value) {
+				this.task = value
+				if (typeof value.repeatAfter !== 'undefined') {
+					this.repeatAfter = value.repeatAfter
+				}
+			},
+			immediate: true,
 		},
 	},
-	mounted() {
-		this.task = this.value
-		if (typeof this.value.repeatAfter !== 'undefined') {
-			this.repeatAfter = this.value.repeatAfter
-		}
-	},
 	methods: {
 		updateData() {
 			if (this.task.repeatMode !== repeatModes.REPEAT_MODE_DEFAULT && this.repeatAfter.amount === 0) {

src/components/tasks/partials/singleTaskInList.vue

@@ -99,8 +99,8 @@ export default {
 	name: 'singleTaskInList',
 	data() {
 		return {
-			taskService: TaskService,
-			task: TaskModel,
+			taskService: new TaskService(),
+			task: new TaskModel(),
 			showDefer: false,
 		}
 	},
@@ -146,10 +146,6 @@ export default {
 		this.task = this.theTask
 		document.addEventListener('click', this.hideDeferDueDatePopup)
 	},
-	created() {
-		this.task = new TaskModel()
-		this.taskService = new TaskService()
-	},
 	beforeDestroy() {
 		document.removeEventListener('click', this.hideDeferDueDatePopup)
 	},