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/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,
-			namespaceService: NamespaceService,
+			namespace: new NamespaceModel(),
+			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,
-			namespace: NamespaceModel,
+			namespaceService: new NamespaceService(),
+			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,
-			namespace: NamespaceModel,
+			namespaceService: new NamespaceService(),
+			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() {