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/home/contentAuth.vue

@@ -49,7 +49,10 @@ export default {
 	name: 'contentAuth',
 	components: {QuickActions, Navigation},
 	watch: {
-		'$route': 'doStuffAfterRoute',
+		'$route': {
+			handler: 'doStuffAfterRoute',
+			deep: true,
+		},
 	},
 	created() {
 		this.renewTokenOnFocus()

src/components/input/colorPicker.vue

@@ -48,16 +48,16 @@ export default {
 		},
 	},
 	watch: {
-		value(newVal) {
-			this.color = newVal
+		value: {
+			handler(value) {
+				this.color = value
+			},
+			immediate: true,
 		},
 		color() {
 			this.update()
 		},
 	},
-	mounted() {
-		this.color = this.value
-	},
 	computed: {
 		empty() {
 			return this.color === '#000000' || this.color === ''

src/components/input/datepicker.vue

@@ -151,15 +151,15 @@ export default {
 		},
 	},
 	mounted() {
-		this.setDateValue(this.value)
 		document.addEventListener('click', this.hideDatePopup)
 	},
 	beforeDestroy() {
 		document.removeEventListener('click', this.hideDatePopup)
 	},
 	watch: {
-		value(newVal) {
-			this.setDateValue(newVal)
+		value: {
+			handler: 'setDateValue',
+			immediate: true,
 		},
 		flatPickrDate(newVal) {
 			this.date = createDateFromString(newVal)

src/components/input/fancycheckbox.vue

@@ -26,7 +26,7 @@ export default {
 	data() {
 		return {
 			checked: false,
-			checkBoxId: '',
+			checkBoxId: 'fancycheckbox' + Math.random(),
 		}
 	},
 	props: {
@@ -40,16 +40,14 @@ export default {
 		},
 	},
 	watch: {
-		value(newVal) {
-			this.checked = newVal
+		value: {
+			handler(value) {
+				this.checked = value
+
+			},
+			immediate: true,
 		},
 	},
-	mounted() {
-		this.checked = this.value
-	},
-	created() {
-		this.checkBoxId = 'fancycheckbox' + Math.random()
-	},
 	methods: {
 		updateData(checked) {
 			this.checked = checked

src/components/input/multiselect.vue

@@ -190,14 +190,16 @@ export default {
 	},
 	mounted() {
 		document.addEventListener('click', this.hideSearchResultsHandler)
-		this.setSelectedObject(this.value)
 	},
 	beforeDestroy() {
 		document.removeEventListener('click', this.hideSearchResultsHandler)
 	},
 	watch: {
-		value(newVal) {
-			this.setSelectedObject(newVal)
+		value: {
+			handler(value) {
+				this.setSelectedObject(value)
+			},
+			immediate: true,
 		},
 	},
 	computed: {

src/components/list/partials/filter-popup.vue

@@ -25,15 +25,17 @@ export default {
 		Filters,
 	},
 	mounted() {
-		this.params = this.value
 		document.addEventListener('click', this.hidePopup)
 	},
 	beforeDestroy() {
 		document.removeEventListener('click', this.hidePopup)
 	},
 	watch: {
-		value(newVal) {
-			this.$set(this, 'params', newVal)
+		value: {
+			handler(value) {
+				this.params = value
+			},
+			immediate: true,
 		},
 		visible() {
 			this.visibleInternal = !this.visibleInternal

src/components/list/partials/filters.vue

@@ -234,31 +234,24 @@ export default {
 			params: DEFAULT_PARAMS,
 			filters: DEFAULT_FILTERS,
 
-			usersService: UserService,
+			usersService: new UserService(),
 			foundusers: [],
 			users: [],
 
 			labelQuery: '',
 			labels: [],
 
-			listsService: ListService,
+			listsService: new ListService(),
 			foundlists: [],
 			lists: [],
 
-			namespaceService: NamespaceService,
+			namespaceService: new NamespaceService(),
 			foundnamespace: [],
 			namespace: [],
 		}
 	},
-	created() {
-		this.usersService = new UserService()
-		this.listsService = new ListService()
-		this.namespaceService = new NamespaceService()
-	},
 	mounted() {
-		this.params = this.value
 		this.filters.requireAllFilters = this.params.filter_concat === 'and'
-		this.prepareFilters()
 	},
 	props: {
 		value: {
@@ -266,9 +259,12 @@ export default {
 		},
 	},
 	watch: {
-		value(newVal) {
-			this.$set(this, 'params', newVal)
-			this.prepareFilters()
+		value: {
+			handler(value) {
+				this.params = value
+				this.prepareFilters()
+			},
+			immediate: true,
 		},
 	},
 	computed: {

src/components/list/partials/list-card.vue

@@ -50,13 +50,11 @@ export default {
 		},
 	},
 	watch: {
-		list() {
-			this.loadBackground()
+		list: {
+			handler: 'loadBackground',
+			immediate: true,
 		},
 	},
-	created() {
-		this.loadBackground()
-	},
 	methods: {
 		loadBackground() {
 			if (this.list === null || !this.list.backgroundInformation || this.backgroundLoading) {

src/components/misc/subscription.vue

@@ -30,7 +30,7 @@ export default {
 	name: 'task-subscription',
 	data() {
 		return {
-			subscriptionService: SubscriptionService,
+			subscriptionService: new SubscriptionService(),
 		}
 	},
 	props: {
@@ -49,9 +49,6 @@ export default {
 			default: true,
 		},
 	},
-	created() {
-		this.subscriptionService = new SubscriptionService()
-	},
 	computed: {
 		tooltipText() {
 			if (this.disabled) {

src/components/notifications/notifications.vue

@@ -61,15 +61,12 @@ export default {
 	components: {User},
 	data() {
 		return {
-			notificationService: NotificationService,
+			notificationService: new NotificationService(),
 			allNotifications: [],
 			showNotifications: false,
 			interval: null,
 		}
 	},
-	created() {
-		this.notificationService = new NotificationService()
-	},
 	mounted() {
 		this.loadNotifications()
 		document.addEventListener('click', this.hidePopup)

src/components/quick-actions/quick-actions.vue

@@ -90,11 +90,11 @@ export default {
 
 			foundTasks: [],
 			taskSearchTimeout: null,
-			taskService: null,
+			taskService: new TaskService(),
 
 			foundTeams: [],
 			teamSearchTimeout: null,
-			teamService: null,
+			teamService: new TeamService(),
 		}
 	},
 	mixins: [
@@ -261,10 +261,6 @@ export default {
 			return this.selectedCmd !== null && this.selectedCmd.action === CMD_NEW_TASK
 		},
 	},
-	created() {
-		this.taskService = new TaskService()
-		this.teamService = new TeamService()
-	},
 	methods: {
 		search() {
 			this.searchTasks()

src/components/sharing/linkSharing.vue

@@ -195,7 +195,7 @@ export default {
 	data() {
 		return {
 			linkShares: [],
-			linkShareService: LinkShareService,
+			linkShareService: new LinkShareService(),
 			rights: rights,
 			selectedRight: rights.READ,
 			name: '',
@@ -205,17 +205,10 @@ export default {
 			showNewForm: false,
 		}
 	},
-	beforeMount() {
-		this.linkShareService = new LinkShareService()
-	},
-	created() {
-		this.linkShareService = new LinkShareService()
-		this.load()
-	},
 	watch: {
-		listId() {
-			// watch it
-			this.load()
+		listId: {
+			handler: 'load',
+			immediate: true,
 		},
 	},
 	computed: mapState({

src/components/tasks/add-task.vue

@@ -45,7 +45,7 @@ export default {
 	data() {
 		return {
 			newTaskTitle: '',
-			taskService: TaskService,
+			taskService: new TaskService(),
 			errorMessage: '',
 		}
 	},
@@ -55,9 +55,6 @@ export default {
 	components: {
 		QuickAddMagic,
 	},
-	created() {
-		this.taskService = new TaskService()
-	},
 	props: {
 		defaultPosition: {
 			type: Number,

src/components/tasks/edit-task.vue

@@ -84,13 +84,13 @@ export default {
 	data() {
 		return {
 			listId: this.$route.params.id,
-			listService: ListService,
-			taskService: TaskService,
+			listService: new ListService(),
+			taskService: new TaskService(),
 
 			priorities: priorities,
 			list: {},
 			editorActive: false,
-			newTask: TaskModel,
+			newTask: new TaskModel(),
 			isTaskEdit: false,
 			taskEditTask: TaskModel,
 		}
@@ -113,18 +113,14 @@ export default {
 		},
 	},
 	watch: {
-		task() {
-			this.taskEditTask = this.task
-			this.initTaskFields()
+		task: {
+			handler() {
+				this.taskEditTask = this.task
+				this.initTaskFields()
+			},
+			immediate: true,
 		},
 	},
-	created() {
-		this.listService = new ListService()
-		this.taskService = new TaskService()
-		this.newTask = new TaskModel()
-		this.taskEditTask = this.task
-		this.initTaskFields()
-	},
 	methods: {
 		initTaskFields() {
 			this.taskEditTask.dueDate =

src/components/tasks/gantt-component.vue

@@ -232,17 +232,17 @@ export default {
 			endDate: null,
 			theTasks: [], // Pretty much a copy of the prop, since we cant mutate the prop directly
 			tasksWithoutDates: [],
-			taskService: TaskService,
+			taskService: new TaskService(),
 			taskDragged: null, // Saves to currently dragged task to be able to update it
 			fullWidth: 0,
-			now: null,
+			now: new Date(),
 			dayOffsetUntilToday: 0,
 			isTaskEdit: false,
 			taskToEdit: null,
 			newTaskTitle: '',
 			newTaskFieldActive: false,
-			priorities: {},
-			taskCollectionService: TaskCollectionService,
+			priorities: priorities,
+			taskCollectionService: new TaskCollectionService(),
 			showTaskFilter: false,
 
 			params: {
@@ -260,12 +260,6 @@ export default {
 		dateTo: 'buildTheGanttChart',
 		listId: 'parseTasks',
 	},
-	created() {
-		this.now = new Date()
-		this.taskCollectionService = new TaskCollectionService()
-		this.taskService = new TaskService()
-		this.priorities = priorities
-	},
 	mounted() {
 		this.buildTheGanttChart()
 	},

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)
 	},

src/components/user/avatar-settings.vue

@@ -74,14 +74,13 @@ export default {
 	data() {
 		return {
 			avatarProvider: '',
-			avatarService: AvatarService,
+			avatarService: new AvatarService(),
 			isCropAvatar: false,
 			avatarToCrop: null,
 			loading: false, // Seperate variable because some things we're doing in browser take a bit
 		}
 	},
 	created() {
-		this.avatarService = new AvatarService()
 		this.avatarStatus()
 	},
 	components: {

src/components/user/settings/deletion.vue

@@ -91,14 +91,11 @@ export default {
 	name: 'user-settings-deletion',
 	data() {
 		return {
-			accountDeleteService: AccountDeleteService,
+			accountDeleteService: new AccountDeleteService(),
 			password: '',
 			errPasswordRequired: false,
 		}
 	},
-	created() {
-		this.accountDeleteService = new AccountDeleteService()
-	},
 	computed: mapState({
 		userDeletionEnabled: state => state.config.userDeletionEnabled,
 		deletionScheduledAt: state => parseDateOrNull(state.auth.info.deletionScheduledAt),