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/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) {