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/input/colorPicker.vue

@@ -48,16 +48,16 @@ export default {
 		},
 	},
 	watch: {
-		value(newVal) {
-			this.color = newVal
+		value: {
+			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) {
-			this.setDateValue(newVal)
+		value: {
+			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) {
-			this.checked = newVal
+		value: {
+			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) {
-			this.setSelectedObject(newVal)
+		value: {
+			handler(value) {
+				this.setSelectedObject(value)
+			},
+			immediate: true,
 		},
 	},
 	computed: {