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/filters/CreateSavedFilter.vue

@@ -80,8 +80,8 @@ export default {
 				filter_concat: 'and',
 				filter_include_nulls: true,
 			},
-			savedFilterService: SavedFilterService,
-			savedFilter: SavedFilterModel,
+			savedFilterService: new SavedFilterService(),
+			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() {