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/list/NewList.vue

@@ -42,18 +42,14 @@ export default {
 	data() {
 		return {
 			showError: false,
-			list: ListModel,
-			listService: ListService,
+			list: new ListModel(),
+			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,
-			list: ListModel,
+			listService: new ListService(),
+			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,
-			list: null,
+			listService: new ListService(),
 		}
 	},
 	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(this.list)
+			this.listService.update(newList)
 				.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,
-			listService: null,
+			backgroundUploadService: new BackgroundUploadService(),
+			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: list.title}))
+		this.setTitle(this.$t('list.delete.title', {list: this.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', list)
+			this.$store.dispatch('lists/deleteList', this.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() {
-		this.listService = new ListService()
-		this.listDuplicateService = new ListDuplicateService()
-		this.loadList()
+	watch: {
+		'$route.params.listId': {
+			handler: '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,
-			dateTo: null,
+			dateFrom: new Date((new Date()).setDate((new Date()).getDate() - 15)),
+			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)