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) {
+		value: {
-			this.color = newVal
+			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) {
+		value: {
-			this.setDateValue(newVal)
+			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) {
+		value: {
-			this.checked = newVal
+			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) {
+		value: {
-			this.setSelectedObject(newVal)
+			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) {
+		value: {
-			this.$set(this, 'params', newVal)
+			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) {
+		value: {
-			this.$set(this, 'params', newVal)
+			handler(value) {
-			this.prepareFilters()
+				this.params = value
+				this.prepareFilters()
+			},
+			immediate: true,
 		},
 	},
 	computed: {

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

@@ -50,13 +50,11 @@ export default {
 		},
 	},
 	watch: {
-		list() {
+		list: {
-			this.loadBackground()
+			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() {
+		listId: {
-			// watch it
+			handler: 'load',
-			this.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,
+			listService: new ListService(),
-			taskService: TaskService,
+			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() {
+		task: {
-			this.taskEditTask = this.task
+			handler() {
-			this.initTaskFields()
+				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: {},
+			priorities: priorities,
-			taskCollectionService: TaskCollectionService,
+			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,
+			taskCommentService: new TaskCommentService(),
-			newComment: TaskCommentModel,
+			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() {
+		taskId: {
-			this.loadComments()
+			handler(taskId) {
-			this.newComment.taskId = this.taskId
+				this.loadComments()
-			this.commentEdit.taskId = this.taskId
+				this.newComment.taskId = taskId
-			this.commentToDelete.taskId = this.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() {
+	watch: {
-		this.taskService = new TaskService()
+		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) {
+		value: {
-			this.task = newVal
+			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,
+			newAssignee: new UserModel(),
-			listUserService: ListUserService,
+			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) {
+		value: {
-			this.assignees = newVal
+			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) {
+		value: {
-			this.labels = newLabels
+			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,
+			listSerivce: new ListService(),
-			list: ListModel,
+			list: new ListModel(),
 			foundLists: [],
 		}
 	},
@@ -39,18 +39,14 @@ export default {
 	components: {
 		Multiselect,
 	},
-	beforeMount() {
-		this.listSerivce = new ListService()
-		this.list = new ListModel()
-	},
 	watch: {
-		value(newVal) {
+		value: {
-			this.list = newVal
+			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) {
+		value: {
-			this.priority = newVal
+			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) {
+		initialRelatedTasks: {
-			this.relatedTasks = newVal
+			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) {
+		value: {
-			this.task = newVal
+			handler(value) {
-			if (typeof newVal.repeatAfter !== 'undefined') {
+				this.task = value
-				this.repeatAfter = newVal.repeatAfter
+				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,
+			taskService: new TaskService(),
-			task: TaskModel,
+			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),

src/views/filters/CreateSavedFilter.vue

@@ -80,8 +80,8 @@ export default {
 				filter_concat: 'and',
 				filter_include_nulls: true,
 			},
-			savedFilterService: SavedFilterService,
+			savedFilterService: new SavedFilterService(),
-			savedFilter: SavedFilterModel,
+			savedFilter: new SavedFilterModel(),
 		}
 	},
 	components: {
@@ -96,9 +96,6 @@ export default {
 	created() {
 		this.editorActive = false
 		this.$nextTick(() => this.editorActive = true)
-
-		this.savedFilterService = new SavedFilterService()
-		this.savedFilter = new SavedFilterModel()
 	},
 	methods: {
 		create() {

src/views/filters/settings/delete.vue

@@ -20,12 +20,9 @@ export default {
 	name: 'filter-settings-delete',
 	data() {
 		return {
-			filterService: SavedFilterService,
+			filterService: new SavedFilterService(),
 		}
 	},
-	created() {
-		this.filterService = new SavedFilterService()
-	},
 	methods: {
 		deleteSavedFilter() {
 			// We assume the listId in the route is the pseudolist

src/views/filters/settings/edit.vue

@@ -67,7 +67,7 @@ export default {
 	data() {
 		return {
 			filter: SavedFilterModel,
-			filterService: SavedFilterService,
+			filterService: new SavedFilterService(),
 			filters: {
 				sort_by: ['done', 'id'],
 				order_by: ['asc', 'desc'],
@@ -91,13 +91,13 @@ export default {
 			timeout: 60000,
 		}),
 	},
-	created() {
-		this.filterService = new SavedFilterService()
-		this.loadSavedFilter()
-	},
 	watch: {
 		// call again the method if the route changes
-		'$route': 'loadSavedFilter',
+		'$route': {
+			handler: 'loadSavedFilter',
+			deep: true,
+			immediate: true,
+		},
 	},
 	methods: {
 		loadSavedFilter() {

src/views/labels/ListLabels.vue

@@ -118,13 +118,12 @@ export default {
 	},
 	data() {
 		return {
-			labelEditLabel: LabelModel,
+			labelEditLabel: new LabelModel(),
 			isLabelEdit: false,
 			editorActive: false,
 		}
 	},
 	created() {
-		this.labelEditLabel = new LabelModel()
 		this.loadLabels()
 	},
 	mounted() {

src/views/labels/NewLabel.vue

@@ -35,7 +35,6 @@
 </template>
 
 <script>
-import labelModel from '../../models/label'
 import LabelModel from '../../models/label'
 import CreateEdit from '@/components/misc/create-edit.vue'
 import ColorPicker from '../../components/input/colorPicker'
@@ -46,7 +45,7 @@ export default {
 	name: 'NewLabel',
 	data() {
 		return {
-			label: labelModel,
+			label: new LabelModel(),
 			showError: false,
 		}
 	},
@@ -54,9 +53,6 @@ export default {
 		CreateEdit,
 		ColorPicker,
 	},
-	created() {
-		this.label = new LabelModel()
-	},
 	mounted() {
 		this.setTitle(this.$t('label.create.title'))
 	},

src/views/list/NewList.vue

@@ -42,18 +42,14 @@ export default {
 	data() {
 		return {
 			showError: false,
-			list: ListModel,
+			list: new ListModel(),
-			listService: ListService,
+			listService: new ListService(),
 		}
 	},
 	components: {
 		CreateEdit,
 		ColorPicker,
 	},
-	created() {
-		this.list = new ListModel()
-		this.listService = new ListService()
-	},
 	mounted() {
 		this.setTitle(this.$t('list.create.header'))
 	},

src/views/list/ShowList.vue

@@ -47,21 +47,20 @@ import {saveListToHistory} from '../../modules/listHistory'
 export default {
 	data() {
 		return {
-			listService: ListService,
+			listService: new ListService(),
-			list: ListModel,
+			list: new ListModel(),
 			listLoaded: 0,
 		}
 	},
-	created() {
-		this.listService = new ListService()
-		this.list = new ListModel()
-	},
 	mounted() {
 		this.loadList()
 	},
 	watch: {
 		// call again the method if the route changes
-		'$route.path': 'loadList',
+		'$route.path': {
+			handler: 'loadList',
+			immediate: true,
+		},
 	},
 	computed: {
 		// Computed property to let "listId" always have a value

src/views/list/settings/archive.vue

@@ -18,21 +18,25 @@ export default {
 	name: 'list-setting-archive',
 	data() {
 		return {
-			listService: ListService,
+			listService: new ListService(),
-			list: null,
 		}
 	},
 	created() {
-		this.listService = new ListService()
-		this.list = this.$store.getters['lists/getListById'](this.$route.params.listId)
 		this.setTitle(this.$t('list.archive.title', {list: this.list.title}))
 	},
+	computed: {
+		list() {
+			return this.$store.getters['lists/getListById'](this.$route.params.listId)
+		},
+	},
 	methods: {
 		archiveList() {
+			const newList = {
+				...this.list,
+				isArchived: !this.list.isArchived,
+			}
 
-			this.list.isArchived = !this.list.isArchived
+			this.listService.update(newList)
-
-			this.listService.update(this.list)
 				.then(r => {
 					this.$store.commit('currentList', r)
 					this.$store.commit('namespaces/setListInNamespaceById', r)

src/views/list/settings/background.vue

@@ -78,13 +78,13 @@ export default {
 		return {
 			backgroundSearchTerm: '',
 			backgroundSearchResult: [],
-			backgroundService: null,
+			backgroundService: new BackgroundUnsplashService(),
 			backgroundThumbs: {},
 			currentPage: 1,
 			backgroundSearchTimeout: null,
 
-			backgroundUploadService: null,
+			backgroundUploadService: new BackgroundUploadService(),
-			listService: null,
+			listService: new ListService(),
 		}
 	},
 	computed: mapState({
@@ -94,9 +94,6 @@ export default {
 		hasBackground: state => state.background !== null,
 	}),
 	created() {
-		this.backgroundService = new BackgroundUnsplashService()
-		this.backgroundUploadService = new BackgroundUploadService()
-		this.listService = new ListService()
 		this.setTitle(this.$t('list.background.title'))
 		// Show the default collection of backgrounds
 		this.newBackgroundSearch()

src/views/list/settings/delete.vue

@@ -16,14 +16,16 @@
 export default {
 	name: 'list-setting-delete',
 	created() {
-		const list = this.$store.getters['lists/getListById'](this.$route.params.listId)
+		this.setTitle(this.$t('list.delete.title', {list: this.list.title}))
-		this.setTitle(this.$t('list.delete.title', {list: list.title}))
+	},
+	computed: {
+		list() {
+			return this.$store.getters['lists/getListById'](this.$route.params.listId)
+		},
 	},
 	methods: {
 		deleteList() {
-			const list = this.$store.getters['lists/getListById'](this.$route.params.listId)
+			this.$store.dispatch('lists/deleteList', this.list)
-
-			this.$store.dispatch('lists/deleteList', list)
 				.then(() => {
 					this.$message.success({message: this.$t('list.delete.success')})
 					this.$router.push({name: 'home'})

src/views/list/settings/duplicate.vue

@@ -23,7 +23,7 @@ export default {
 	name: 'list-setting-duplicate',
 	data() {
 		return {
-			listDuplicateService: ListDuplicateService,
+			listDuplicateService: new ListDuplicateService(),
 			selectedNamespace: null,
 		}
 	},
@@ -32,7 +32,6 @@ export default {
 		NamespaceSearch,
 	},
 	created() {
-		this.listDuplicateService = new ListDuplicateService()
 		this.setTitle(this.$t('list.duplicate.title'))
 	},
 	methods: {

src/views/list/settings/edit.vue

@@ -80,7 +80,8 @@ export default {
 	data() {
 		return {
 			list: ListModel,
-			listService: ListService,
+			listService: new ListService(),
+			listDuplicateService: new ListDuplicateService(),
 		}
 	},
 	components: {
@@ -93,10 +94,11 @@ export default {
 			timeout: 60000,
 		}),
 	},
-	created() {
+	watch: {
-		this.listService = new ListService()
+		'$route.params.listId': {
-		this.listDuplicateService = new ListDuplicateService()
+			handler: 'loadList',
-		this.loadList()
+			immediate: true,
+		},
 	},
 	methods: {
 		loadList() {

src/views/list/settings/share.vue

@@ -34,7 +34,7 @@ export default {
 	data() {
 		return {
 			list: ListModel,
-			listService: ListService,
+			listService: new ListService(),
 			manageUsersComponent: '',
 			manageTeamsComponent: '',
 		}
@@ -53,7 +53,6 @@ export default {
 		},
 	},
 	created() {
-		this.listService = new ListService()
 		this.loadList()
 	},
 	methods: {

src/views/list/views/Gantt.vue

@@ -83,8 +83,8 @@ export default {
 		return {
 			showTaskswithoutDates: false,
 			dayWidth: 35,
-			dateFrom: null,
+			dateFrom: new Date((new Date()).setDate((new Date()).getDate() - 15)),
-			dateTo: null,
+			dateTo: new Date((new Date()).setDate((new Date()).getDate() + 30)),
 		}
 	},
 	computed: {
@@ -100,9 +100,5 @@ export default {
 			}
 		},
 	},
-	beforeMount() {
-		this.dateFrom = new Date((new Date()).setDate((new Date()).getDate() - 15))
-		this.dateTo = new Date((new Date()).setDate((new Date()).getDate() + 30))
-	},
 }
 </script>

src/views/list/views/List.vue

@@ -158,7 +158,7 @@ export default {
 	name: 'List',
 	data() {
 		return {
-			taskService: TaskService,
+			taskService: new TaskService(),
 			isTaskEdit: false,
 			taskEditTask: TaskModel,
 			ctaVisible: false,
@@ -184,8 +184,6 @@ export default {
 		Pagination,
 	},
 	created() {
-		this.taskService = new TaskService()
-
 		// Save the current list view to local storage
 		// We use local storage and not vuex here to make it persistent across reloads.
 		saveListView(this.$route.params.listId, this.$route.name)

src/views/namespaces/ListNamespaces.vue

@@ -78,12 +78,9 @@ export default {
 	},
 	data() {
 		return {
-			showArchived: false,
+			showArchived: JSON.parse(localStorage.getItem('showArchived')) ?? false,
 		}
 	},
-	created() {
-		this.showArchived = JSON.parse(localStorage.getItem('showArchived')) ?? false
-	},
 	mounted() {
 		this.setTitle(this.$t('namespace.title'))
 	},

src/views/namespaces/NewNamespace.vue

@@ -51,18 +51,14 @@ export default {
 	data() {
 		return {
 			showError: false,
-			namespace: NamespaceModel,
+			namespace: new NamespaceModel(),
-			namespaceService: NamespaceService,
+			namespaceService: new NamespaceService(),
 		}
 	},
 	components: {
 		ColorPicker,
 		CreateEdit,
 	},
-	created() {
-		this.namespace = new NamespaceModel()
-		this.namespaceService = new NamespaceService()
-	},
 	mounted() {
 		this.setTitle(this.$t('namespace.create.title'))
 	},

src/views/namespaces/settings/archive.vue

@@ -18,13 +18,12 @@ export default {
 	name: 'namespace-setting-archive',
 	data() {
 		return {
-			namespaceService: NamespaceService,
+			namespaceService: new NamespaceService(),
 			namespace: null,
 			title: '',
 		}
 	},
 	created() {
-		this.namespaceService = new NamespaceService()
 		this.namespace = this.$store.getters['namespaces/getNamespaceById'](this.$route.params.id)
 		this.title = this.namespace.isArchived ?
 			this.$t('namespace.archive.titleUnarchive', { namespace: this.namespace.title }) :

src/views/namespaces/settings/delete.vue

@@ -19,13 +19,11 @@ export default {
 	name: 'namespace-setting-delete',
 	data() {
 		return {
-			namespaceService: NamespaceService,
+			namespaceService: new NamespaceService(),
 			title: '',
 		}
 	},
 	created() {
-		this.namespaceService = new NamespaceService()
-
 		const namespace = this.$store.getters['namespaces/getNamespaceById'](this.$route.params.id)
 		this.title = this.$t('namespace.delete.title', {namespace: namespace.title})
 		this.setTitle(this.title)

src/views/namespaces/settings/edit.vue

@@ -69,8 +69,8 @@ export default {
 	name: 'namespace-setting-edit',
 	data() {
 		return {
-			namespaceService: NamespaceService,
+			namespaceService: new NamespaceService(),
-			namespace: NamespaceModel,
+			namespace: new NamespaceModel(),
 			editorActive: false,
 			title: '',
 		}
@@ -89,14 +89,13 @@ export default {
 	beforeMount() {
 		this.namespace.id = this.$route.params.id
 	},
-	created() {
-		this.namespaceService = new NamespaceService()
-		this.namespace = new NamespaceModel()
-		this.loadNamespace()
-	},
 	watch: {
 		// call again the method if the route changes
-		'$route': 'loadNamespace',
+		'$route': {
+			handler: 'loadNamespace',
+			deep: true,
+			immediate: true,
+		},
 	},
 	methods: {
 		loadNamespace() {

src/views/namespaces/settings/share.vue

@@ -29,8 +29,8 @@ export default {
 	name: 'namespace-setting-share',
 	data() {
 		return {
-			namespaceService: NamespaceService,
+			namespaceService: new NamespaceService(),
-			namespace: NamespaceModel,
+			namespace: new NamespaceModel(),
 			manageUsersComponent: '',
 			manageTeamsComponent: '',
 			title: '',
@@ -43,14 +43,13 @@ export default {
 	beforeMount() {
 		this.namespace.id = this.$route.params.id
 	},
-	created() {
-		this.namespaceService = new NamespaceService()
-		this.namespace = new NamespaceModel()
-		this.loadNamespace()
-	},
 	watch: {
 		// call again the method if the route changes
-		'$route': 'loadNamespace',
+		'$route': {
+			handler: 'loadNamespace',
+			deep: true,
+			immediate: true,
+		},
 	},
 	computed: {
 		userIsAdmin() {

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,
+			startDate: new Date(),
-			endDate: null,
+			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,
+			taskService: new TaskService(),
-			task: TaskModel,
+			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',
+		'$route': {
-	},
+			handler: 'loadTask',
-	created() {
+			deep: true,
-		this.taskService = new TaskService()
+			immediate: true,
-		this.task = new TaskModel()
+		},
-	},
-	mounted() {
-		this.loadTask()
 	},
 	computed: {
 		currentList() {

src/views/teams/EditTeam.vue

@@ -180,8 +180,8 @@ export default {
 	name: 'EditTeam',
 	data() {
 		return {
-			teamService: TeamService,
+			teamService: new TeamService(),
-			teamMemberService: TeamMemberService,
+			teamMemberService: new TeamMemberService(),
 			team: TeamModel,
 			teamId: this.$route.params.id,
 			member: TeamMemberModel,
@@ -191,7 +191,7 @@ export default {
 
 			newMember: UserModel,
 			foundUsers: [],
-			userService: UserService,
+			userService: new UserService(),
 
 			showError: false,
 			title: '',
@@ -206,15 +206,13 @@ export default {
 			timeout: 60000,
 		}),
 	},
-	created() {
-		this.teamService = new TeamService()
-		this.teamMemberService = new TeamMemberService()
-		this.userService = new UserService()
-		this.loadTeam()
-	},
 	watch: {
 		// call again the method if the route changes
-		$route: 'loadTeam',
+		'$route': {
+			handler: 'loadTeam',
+			deep: true,
+			immediate: true,
+		},
 	},
 	computed: {
 		userIsAdmin() {

src/views/teams/ListTeams.vue

@@ -32,12 +32,11 @@ export default {
 	name: 'ListTeams',
 	data() {
 		return {
-			teamService: TeamService,
+			teamService: new TeamService(),
 			teams: [],
 		}
 	},
 	created() {
-		this.teamService = new TeamService()
 		this.loadTeams()
 	},
 	mounted() {

src/views/teams/NewTeam.vue

@@ -37,18 +37,14 @@ export default {
 	name: 'NewTeam',
 	data() {
 		return {
-			teamService: TeamService,
+			teamService: new TeamService(),
-			team: TeamModel,
+			team: new TeamModel(),
 			showError: false,
 		}
 	},
 	components: {
 		CreateEdit,
 	},
-	created() {
-		this.teamService = new TeamService()
-		this.team = new TeamModel()
-	},
 	mounted() {
 		this.setTitle(this.$t('team.create.title'))
 	},

src/views/user/PasswordReset.vue

@@ -76,7 +76,7 @@ export default {
 	},
 	data() {
 		return {
-			passwordResetService: PasswordResetService,
+			passwordResetService: new PasswordResetService(),
 			credentials: {
 				password: '',
 				password2: '',
@@ -85,9 +85,6 @@ export default {
 			successMessage: '',
 		}
 	},
-	created() {
-		this.passwordResetService = new PasswordResetService()
-	},
 	mounted() {
 		this.setTitle(this.$t('user.auth.resetPassword'))
 	},

src/views/user/RequestPasswordReset.vue

@@ -59,16 +59,12 @@ export default {
 	},
 	data() {
 		return {
-			passwordResetService: PasswordResetService,
+			passwordResetService: new PasswordResetService(),
-			passwordReset: PasswordResetModel,
+			passwordReset: new PasswordResetModel(),
 			errorMsg: '',
 			isSuccess: false,
 		}
 	},
-	created() {
-		this.passwordResetService = new PasswordResetService()
-		this.passwordReset = new PasswordResetModel()
-	},
 	mounted() {
 		this.setTitle(this.$t('user.auth.resetPassword'))
 	},

src/views/user/Settings.vue

@@ -302,15 +302,15 @@ export default {
 	name: 'Settings',
 	data() {
 		return {
-			passwordUpdateService: PasswordUpdateService,
+			passwordUpdateService: new PasswordUpdateService(),
-			passwordUpdate: PasswordUpdateModel,
+			passwordUpdate: new PasswordUpdateModel(),
 			passwordConfirm: '',
 
-			emailUpdateService: EmailUpdateService,
+			emailUpdateService: new EmailUpdateService(),
-			emailUpdate: EmailUpdateModel,
+			emailUpdate: new EmailUpdateModel(),
 
-			totpService: TotpService,
+			totpService: new TotpService(),
-			totp: TotpModel,
+			totp: new TotpModel(),
 			totpQR: '',
 			totpEnrolled: false,
 			totpConfirmPasscode: '',
@@ -320,7 +320,7 @@ export default {
 			language: getCurrentLanguage(),
 
 			settings: UserSettingsModel,
-			userSettingsService: UserSettingsService,
+			userSettingsService: new UserSettingsService(),
 
 			defaultList: null,
 		}
@@ -332,16 +332,6 @@ export default {
 		DataExport,
 	},
 	created() {
-		this.passwordUpdateService = new PasswordUpdateService()
-		this.passwordUpdate = new PasswordUpdateModel()
-
-		this.emailUpdateService = new EmailUpdateService()
-		this.emailUpdate = new EmailUpdateModel()
-
-		this.totpService = new TotpService()
-		this.totp = new TotpModel()
-
-		this.userSettingsService = new UserSettingsService()
 		this.settings = this.$store.state.auth.settings
 
 		this.playSoundWhenDone = localStorage.getItem(playSoundWhenDoneKey) === 'true' || localStorage.getItem(playSoundWhenDoneKey) === null