diff --git a/.drone.yml b/.drone.yml
index a41dfe2a..6b7e89aa 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -5,6 +5,7 @@ trigger:
   branch:
     include:
       - main
+      - vue3
   event:
     include:
       - push
diff --git a/cypress/factories/user.js b/cypress/factories/user.js
index 37fcaaab..9e133b55 100644
--- a/cypress/factories/user.js
+++ b/cypress/factories/user.js
@@ -11,7 +11,7 @@ export class UserFactory extends Factory {
 
 		return {
             id: '{increment}',
-            username: faker.lorem.word(10) + faker.random.uuid(),
+            username: faker.lorem.word(10) + faker.datatype.uuid(),
             password: '$2a$14$dcadBoMBL9jQoOcZK8Fju.cy0Ptx2oZECkKLnaa8ekRoTFe1w7To.', // 1234
 			status: 0,
 			created: formatISO(now),
diff --git a/cypress/integration/list/list.spec.js b/cypress/integration/list/list.spec.js
index 8242984e..596c6adc 100644
--- a/cypress/integration/list/list.spec.js
+++ b/cypress/integration/list/list.spec.js
@@ -38,8 +38,7 @@ describe('Lists', () => {
 			.contains('Create')
 			.click()
 
-		cy.wait(1000) // Waiting until the request to create the new list is done
-		cy.get('.global-notification')
+		cy.get('.global-notification', { timeout: 1000 }) // Waiting until the request to create the new list is done
 			.should('contain', 'Success')
 		cy.url()
 			.should('contain', '/lists/')
@@ -446,7 +445,7 @@ describe('Lists', () => {
 			cy.get('.kanban .bucket .tasks .task')
 				.contains(tasks[0].title)
 				.first()
-				.drag('.kanban .bucket:nth-child(2) .tasks .dropper div')
+				.drag('.kanban .bucket:nth-child(2) .tasks .dropper')
 			
 			cy.get('.kanban .bucket:nth-child(2) .tasks')
 				.should('contain', tasks[0].title)
@@ -501,7 +500,7 @@ describe('Lists', () => {
 				.first()
 				.click()
 
-			cy.get('.global-notification')
+			cy.get('.global-notification', { timeout: 1000 })
 				.should('contain', 'Success')
 			cy.go('back')
 			cy.get('.kanban .bucket')
diff --git a/cypress/integration/list/namespaces.spec.js b/cypress/integration/list/namespaces.spec.js
index e8c15443..7d092113 100644
--- a/cypress/integration/list/namespaces.spec.js
+++ b/cypress/integration/list/namespaces.spec.js
@@ -67,7 +67,7 @@ describe('Namepaces', () => {
 			.contains('Save')
 			.click()
 
-		cy.get('.global-notification')
+		cy.get('.global-notification', { timeout: 1000 })
 			.should('contain', 'Success')
 		cy.get('.namespace-container .menu.namespaces-lists')
 			.should('contain', newNamespaceName)
diff --git a/cypress/integration/user/settings.spec.js b/cypress/integration/user/settings.spec.js
index 36467bae..42b1f893 100644
--- a/cypress/integration/user/settings.spec.js
+++ b/cypress/integration/user/settings.spec.js
@@ -12,7 +12,7 @@ describe('User Settings', () => {
 
 		cy.get('input[name=avatarProvider][value=upload]')
 			.click()
-		cy.get('input[type=file]')
+		cy.get('input[type=file]', { timeout: 1000 })
 			.attachFile('image.jpg')
 		cy.get('.vue-handler-wrapper.vue-handler-wrapper--south .vue-simple-handler.vue-simple-handler--south')
 			.trigger('mousedown', {which: 1})
diff --git a/package.json b/package.json
index 56891745..b07cadc4 100644
--- a/package.json
+++ b/package.json
@@ -16,27 +16,32 @@
     "browserslist:update": "npx browserslist@latest --update-db"
   },
   "dependencies": {
+    "@kyvg/vue3-notification": "2.3.4",
+    "@vue/compat": "3.2.20",
     "bulma": "0.9.3",
     "camel-case": "4.1.2",
+    "codemirror": "^5.63.3",
     "copy-to-clipboard": "3.3.1",
     "date-fns": "2.25.0",
     "dompurify": "2.3.3",
-    "flatpickr": "4.6.9",
+    "easymde": "^2.15.0",
+    "flatpickr": "^4.6.9",
     "highlight.js": "11.3.0",
     "is-touch-device": "1.0.1",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.debounce": "^4.0.8",
     "marked": "3.0.7",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
     "ufo": "0.7.9",
-    "verte": "0.0.12",
-    "vue": "2.6.14",
-    "vue-advanced-cropper": "1.8.2",
-    "vue-drag-resize": "1.5.4",
-    "vue-easymde": "1.4.0",
-    "vue-i18n": "8.26.5",
-    "vue-shortkey": "3.1.7",
-    "vuedraggable": "2.24.3",
-    "vuex": "3.6.2",
+    "vue": "3.2.20",
+    "vue-advanced-cropper": "^2.6.3",
+    "vue-drag-resize": "^2.0.3",
+    "vue-flatpickr-component": "9.0.5",
+    "vue-i18n": "9.2.0-beta.11",
+    "vue-router": "4.0.12",
+    "vuedraggable": "4.0.1",
+    "vuex": "4.0.2",
     "workbox-precaching": "6.3.0"
   },
   "devDependencies": {
@@ -44,13 +49,13 @@
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/vue-fontawesome": "2.0.5",
+    "@fortawesome/vue-fontawesome": "3.0.0-4",
     "@types/jest": "27.0.2",
     "@typescript-eslint/eslint-plugin": "5.0.0",
     "@typescript-eslint/parser": "5.0.0",
     "@vitejs/plugin-legacy": "1.6.2",
+    "@vitejs/plugin-vue": "^1.9.3",
     "@vue/eslint-config-typescript": "8.0.0",
-    "@vue/runtime-dom": "latest",
     "autoprefixer": "10.3.7",
     "axios": "0.23.0",
     "browserslist": "4.17.4",
@@ -70,11 +75,6 @@
     "typescript": "4.4.4",
     "vite": "2.6.7",
     "vite-plugin-pwa": "0.11.3",
-    "vite-plugin-vue2": "1.9.0",
-    "vue-flatpickr-component": "8.1.7",
-    "vue-notification": "1.3.20",
-    "vue-router": "3.5.2",
-    "vue-template-compiler": "2.6.14",
     "wait-on": "6.0.0",
     "workbox-cli": "6.3.0"
   },
@@ -87,7 +87,7 @@
     },
     "extends": [
       "eslint:recommended",
-      "plugin:vue/essential",
+      "plugin:vue/vue3-essential",
       "@vue/typescript"
     ],
     "rules": {
diff --git a/src/App.vue b/src/App.vue
index 5da2d0e8..d2690c26 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import {defineComponent} from 'vue'
 import {mapState, mapGetters} from 'vuex'
 import isTouchDevice from 'is-touch-device'
 
@@ -33,10 +34,10 @@ import TopNavigation from './components/home/topNavigation'
 import ContentAuth from './components/home/contentAuth'
 import ContentLinkShare from './components/home/contentLinkShare'
 import ContentNoAuth from './components/home/contentNoAuth'
-import {setLanguage} from './i18n/setup'
+import {setLanguage} from './i18n'
 import AccountDeleteService from '@/services/accountDelete'
 
-export default {
+export default defineComponent({
 	name: 'app',
 	components: {
 		ContentNoAuth,
@@ -53,6 +54,7 @@ export default {
 		this.setupAccountDeletionVerification()
 	},
 	beforeCreate() {
+		// FIXME: async action in beforeCreate, might be not finished when component mounts
 		this.$store.dispatch('config/update')
 			.then(() => {
 				this.$store.dispatch('auth/checkAuth')
@@ -87,30 +89,31 @@ export default {
 			window.addEventListener('offline', () => this.$store.commit(ONLINE, navigator.onLine))
 		},
 		setupPasswortResetRedirect() {
-			if (typeof this.$route.query.userPasswordReset !== 'undefined') {
-				localStorage.removeItem('passwordResetToken') // Delete an eventually preexisting old token
-				localStorage.setItem('passwordResetToken', this.$route.query.userPasswordReset)
-				this.$router.push({name: 'user.password-reset.reset'})
+			if (typeof this.$route.query.userPasswordReset === 'undefined') {
+				return
 			}
+
+			localStorage.setItem('passwordResetToken', this.$route.query.userPasswordReset)
+			this.$router.push({name: 'user.password-reset.reset'})
 		},
 		setupEmailVerificationRedirect() {
-			if (typeof this.$route.query.userEmailConfirm !== 'undefined') {
-				localStorage.removeItem('emailConfirmToken') // Delete an eventually preexisting old token
-				localStorage.setItem('emailConfirmToken', this.$route.query.userEmailConfirm)
-				this.$router.push({name: 'user.login'})
+			if (typeof this.$route.query.userEmailConfirm === 'undefined') {
+				return
 			}
+
+			localStorage.setItem('emailConfirmToken', this.$route.query.userEmailConfirm)
+			this.$router.push({name: 'user.login'})
 		},
-		setupAccountDeletionVerification() {
-			if (typeof this.$route.query.accountDeletionConfirm !== 'undefined') {
-				const accountDeletionService = new AccountDeleteService()
-				accountDeletionService.confirm(this.$route.query.accountDeletionConfirm)
-					.then(() => {
-						this.$message.success({message: this.$t('user.deletion.confirmSuccess')})
-						this.$store.dispatch('auth/refreshUserInfo')
-					})
-					.catch(e => this.$message.error(e))
+		async setupAccountDeletionVerification() {
+			if (typeof this.$route.query.accountDeletionConfirm === 'undefined') {
+				return
 			}
+
+			const accountDeletionService = new AccountDeleteService()
+			await accountDeletionService.confirm(this.$route.query.accountDeletionConfirm)
+			this.$message.success({message: this.$t('user.deletion.confirmSuccess')})
+			this.$store.dispatch('auth/refreshUserInfo')
 		},
 	},
-}
+})
 </script>
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index a8972d42..b4b6c527 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -22,9 +22,11 @@
 
 				<router-view/>
 
-				<transition name="modal">
-					<router-view name="popup"/>
-				</transition>
+				<router-view name="popup" v-slot="{ Component }">
+					<transition name="modal">
+						<component :is="Component" />
+					</transition>
+				</router-view>
 
 				<a
 					class="keyboard-shortcuts-button"
@@ -84,7 +86,7 @@ export default {
 				this.$route.name === 'user.settings' ||
 				this.$route.name === 'namespaces.index'
 			) {
-				this.$store.commit(CURRENT_LIST, null)
+				return this.$store.dispatch(CURRENT_LIST, null)
 			}
 		},
 		renewTokenOnFocus() {
@@ -126,9 +128,6 @@ export default {
 		},
 		loadLabels() {
 			this.$store.dispatch('labels/loadAllLabels')
-				.catch(e => {
-					this.$message.error(e)
-				})
 		},
 	},
 }
diff --git a/src/components/home/contentLinkShare.vue b/src/components/home/contentLinkShare.vue
index 3647aec7..24ae436e 100644
--- a/src/components/home/contentLinkShare.vue
+++ b/src/components/home/contentLinkShare.vue
@@ -40,11 +40,5 @@ export default {
 		currentList: CURRENT_LIST,
 		background: 'background',
 	}),
-	methods: {
-		logout() {
-			this.$store.dispatch('auth/logout')
-			this.$router.push({name: 'user.login'})
-		},
-	},
 }
 </script>
diff --git a/src/components/home/contentNoAuth.vue b/src/components/home/contentNoAuth.vue
index 08483506..c60a070b 100644
--- a/src/components/home/contentNoAuth.vue
+++ b/src/components/home/contentNoAuth.vue
@@ -28,12 +28,23 @@ export default {
 			logoUrl,	
 		}
 	},
-	created() {
-		this.redirectToHome()
+	computed: {
+		routeName() {
+			return this.$route.name
+		},
+		...mapState({
+			motd: state => state.config.motd,
+		}),
+	},
+	watch: {
+		routeName: {
+			handler(routeName) {
+				if (!routeName) return
+				this.redirectToHome()
+			},
+			immediate: true,
+		},
 	},
-	computed: mapState({
-		motd: state => state.config.motd,
-	}),
 	methods: {
 		redirectToHome() {
 			// Check if the user is already logged in and redirect them to the home page if not
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index e65df812..d19b9dae 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -49,19 +49,19 @@
 		</div>
 
 		<aside class="menu namespaces-lists loader-container" :class="{'is-loading': loading}">
-			<template v-for="(n, nk) in namespaces">
-				<div :key="n.id" class="namespace-title" :class="{'has-menu': n.id > 0}">
+			<template v-for="(n, nk) in namespaces" :key="n.id" >
+				<div class="namespace-title" :class="{'has-menu': n.id > 0}">
 					<span
 						@click="toggleLists(n.id)"
 						class="menu-label"
-						v-tooltip="getNamespaceTitle(n) + ' (' + n.lists.filter(l => !l.isArchived).length + ')'">
+						v-tooltip="namespaceTitles[nk]">
 						<span class="name">
 							<span
 								:style="{ backgroundColor: n.hexColor }"
 								class="color-bubble"
 								v-if="n.hexColor !== ''">
 							</span>
-							{{ getNamespaceTitle(n) }} ({{ n.lists.filter(l => !l.isArchived).length }})
+							{{ namespaceTitles[nk] }}
 						</span>
 					</span>
 					<a
@@ -84,56 +84,65 @@
 					--> 
 					<draggable
 						v-bind="dragOptions"
-						:value="activeLists[nk]"
-						@input="(lists) => updateActiveLists(n, lists)"
+						:modelValue="activeLists[nk]"
+						@update:modelValue="(lists) => updateActiveLists(n, lists)"
 						:group="`namespace-${n.id}-lists`"
 						@start="() => drag = true"
 						@end="e => saveListPosition(e, nk)"
 						handle=".handle"
-						:disabled="n.id < 0"
-						:class="{'dragging-disabled': n.id < 0}"
+						:disabled="n.id < 0 || null"
+						tag="transition-group"
+						item-key="id"
+						:component-data="{
+							type: 'transition',
+							tag: 'ul',
+							name: !drag ? 'flip-list' : null,
+							class: [
+								'menu-list can-be-hidden',
+								{ 'dragging-disabled': n.id < 0 }
+							]
+						}"
 					>
-						<transition-group
-							type="transition"
-							:name="!drag ? 'flip-list' : null"
-							tag="ul"
-							class="menu-list can-be-hidden"
-						>
+						<template #item="{element: l}">
 							<li
-								v-for="l in activeLists[nk]"
-								:key="l.id"
 								class="loader-container"
 								:class="{'is-loading': listUpdating[l.id]}"
 							>
 								<router-link
-									class="list-menu-link"
-									:class="{'router-link-exact-active': currentList.id === l.id}"
 									:to="{ name: 'list.index', params: { listId: l.id} }"
-									tag="span"
+									v-slot="{ href, navigate, isActive }"
+									custom
 								>
-									<span class="icon handle">
-										<icon icon="grip-lines"/>
-									</span>
-									<span
-										:style="{ backgroundColor: l.hexColor }"
-										class="color-bubble"
-										v-if="l.hexColor !== ''">
-									</span>
-									<span class="list-menu-title">
-										{{ getListTitle(l) }}
-									</span>
-									<span
-										:class="{'is-favorite': l.isFavorite}"
-										@click.stop="toggleFavoriteList(l)"
-										class="favorite">
-										<icon icon="star" v-if="l.isFavorite"/>
-										<icon :icon="['far', 'star']" v-else/>
-									</span>
+									<a
+										@click="navigate"
+										:href="href"
+										class="list-menu-link"
+										:class="{'router-link-exact-active': isActive || currentList?.id === l.id}"
+									>
+										<span class="icon handle">
+											<icon icon="grip-lines"/>
+										</span>
+										<span
+											:style="{ backgroundColor: l.hexColor }"
+											class="color-bubble"
+											v-if="l.hexColor !== ''">
+										</span>
+										<span class="list-menu-title">
+											{{ getListTitle(l) }}
+										</span>
+										<span
+											:class="{'is-favorite': l.isFavorite}"
+											@click.prevent.stop="toggleFavoriteList(l)"
+											class="favorite">
+											<icon icon="star" v-if="l.isFavorite"/>
+											<icon :icon="['far', 'star']" v-else/>
+										</span>
+									</a>
 								</router-link>
 								<list-settings-dropdown :list="l" v-if="l.id > 0"/>
 								<span class="list-setting-spacer" v-else></span>
 							</li>
-						</transition-group>
+						</template>
 					</draggable>
 				</div>
 			</template>
@@ -182,15 +191,22 @@ export default {
 			loading: state => state[LOADING] && state[LOADING_MODULE] === 'namespaces',
 		}),
 		activeLists() {
-			return this.namespaces.map(({lists}) => lists.filter(item => !item.isArchived))
+			return this.namespaces.map(({lists}) => lists?.filter(item => !item.isArchived))
+		},
+		namespaceTitles() {
+			return this.namespaces.map((namespace, index) => {
+				const title = this.getNamespaceTitle(namespace)
+				return `${title} (${this.activeLists[index]?.length ?? 0})`
+			})
 		},
 	},
 	beforeCreate() {
+		// FIXME: async action in beforeCreate, might be unfinished when component mounts
 		this.$store.dispatch('namespaces/loadNamespaces')
 			.then(namespaces => {
 				namespaces.forEach(n => {
 					if (typeof this.listsVisible[n.id] === 'undefined') {
-						this.$set(this.listsVisible, n.id, true)
+						this.listsVisible[n.id] = true
 					}
 				})
 			})
@@ -209,18 +225,13 @@ export default {
 				return
 			}
 			this.$store.dispatch('lists/toggleListFavorite', list)
-				.catch(e => this.$message.error(e))
 		},
 		resize() {
 			// Hide the menu by default on mobile
-			if (window.innerWidth < 770) {
-				this.$store.commit(MENU_ACTIVE, false)
-			} else {
-				this.$store.commit(MENU_ACTIVE, true)
-			}
+			this.$store.commit(MENU_ACTIVE, window.innerWidth >= 770)
 		},
 		toggleLists(namespaceId) {
-			this.$set(this.listsVisible, namespaceId, !this.listsVisible[namespaceId] ?? false)
+			this.listsVisible[namespaceId] = !this.listsVisible[namespaceId]
 		},
 		updateActiveLists(namespace, activeLists) {
 			// this is a bit hacky: since we do have to filter out the archived items from the list
@@ -240,26 +251,25 @@ export default {
 
 			this.$store.commit('namespaces/setNamespaceById', newNamespace)
 		},
-		saveListPosition(e, namespaceIndex) {
+
+		async saveListPosition(e, namespaceIndex) {
 			const listsActive = this.activeLists[namespaceIndex]
 			const list = listsActive[e.newIndex]
 			const listBefore = listsActive[e.newIndex - 1] ?? null
 			const listAfter = listsActive[e.newIndex + 1] ?? null
-			this.$set(this.listUpdating, list.id, true)
+			this.listUpdating[list.id] = true
 
 			const position = calculateItemPosition(listBefore !== null ? listBefore.position : null, listAfter !== null ? listAfter.position : null)
 
-			// create a copy of the list in order to not violate vuex mutations
-			this.$store.dispatch('lists/updateList', {
-				...list,
-				position,
-			})
-				.catch(e => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.$set(this.listUpdating, list.id, false)
+			try {
+				// create a copy of the list in order to not violate vuex mutations
+				await this.$store.dispatch('lists/updateList', {
+					...list,
+					position,
 				})
+			} finally {
+				this.listUpdating[list.id] = false
+			}
 		},
 	},
 }
diff --git a/src/components/input/AsyncEditor.js b/src/components/input/AsyncEditor.js
new file mode 100644
index 00000000..30278c29
--- /dev/null
+++ b/src/components/input/AsyncEditor.js
@@ -0,0 +1,12 @@
+import { defineAsyncComponent } from 'vue'
+import ErrorComponent from '@/components/misc/error.vue'
+import LoadingComponent from '@/components/misc/loading.vue'
+
+const Editor = () => import('@/components/input/editor.vue')
+
+export default defineAsyncComponent({
+	loader: Editor,
+	loadingComponent: LoadingComponent,
+	errorComponent: ErrorComponent,
+	timeout: 60000,
+})
diff --git a/src/components/input/button.vue b/src/components/input/button.vue
index 80151200..aadfcc9d 100644
--- a/src/components/input/button.vue
+++ b/src/components/input/button.vue
@@ -52,6 +52,7 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['click'],
 	computed: {
 		showIconOnly() {
 			return this.icon !== '' && typeof this.$slots.default === 'undefined'
diff --git a/src/components/input/colorPicker.vue b/src/components/input/colorPicker.vue
index 080089a9..539a9dcb 100644
--- a/src/components/input/colorPicker.vue
+++ b/src/components/input/colorPicker.vue
@@ -1,31 +1,43 @@
 <template>
 	<div class="color-picker-container">
-		<verte
-			:showHistory="true"
-			:colorHistory="[
-				'#1973ff',
-				'#7F23FF',
-				'#ff4136',
-				'#ff851b',
-				'#ffeb10',
-				'#00db60',
-			]"
-			:enableAlpha="false"
-			:menuPosition="menuPosition"
-			:rgbSliders="true"
-			model="hex"
-			picker="square"
-			v-model="color"
-			:class="{'is-empty': empty}"
-		/>
-		<x-button @click="reset" class="is-small ml-2" :shadow="false" type="secondary">
+		<datalist :id="colorListID">
+			<option v-for="color in defaultColors" :key="color" :value="color" />
+		</datalist>
+		
+		<div class="picker">
+			<input
+				class="picker__input"
+				type="color"
+				v-model="color"
+				:list="colorListID"
+				:class="{'is-empty': isEmpty}"
+			/>
+			<svg class="picker__pattern" v-show="isEmpty" viewBox="0 0 22 22" fill="fff">
+				<pattern id="checker" width="11" height="11" patternUnits="userSpaceOnUse" fill="FFF">
+					<rect fill="#cccccc" x="0" width="5.5" height="5.5" y="0"></rect>
+					<rect fill="#cccccc" x="5.5" width="5.5" height="5.5" y="5.5"></rect>
+				</pattern>
+				<rect width="22" height="22" fill="url(#checker)"></rect>
+			</svg>
+		</div>
+
+		<x-button :disabled="isEmpty" @click="reset" class="is-small ml-2" :shadow="false" type="secondary">
 			{{ $t('input.resetColor') }}
 		</x-button>
 	</div>
 </template>
 
 <script>
-import verte from 'verte'
+import {createRandomID} from '@/helpers/randomId'
+
+const DEFAULT_COLORS = [
+	'#1973ff',
+	'#7F23FF',
+	'#ff4136',
+	'#ff851b',
+	'#ffeb10',
+	'#00db60',
+]
 
 export default {
 	name: 'colorPicker',
@@ -33,13 +45,12 @@ export default {
 		return {
 			color: '',
 			lastChangeTimeout: null,
+			defaultColors: DEFAULT_COLORS,
+			colorListID: createRandomID(),
 		}
 	},
-	components: {
-		verte,
-	},
 	props: {
-		value: {
+		modelValue: {
 			required: true,
 		},
 		menuPosition: {
@@ -47,10 +58,11 @@ export default {
 			default: 'top',
 		},
 	},
+	emits: ['update:modelValue', 'change'],
 	watch: {
-		value: {
-			handler(value) {
-				this.color = value
+		modelValue: {
+			handler(modelValue) {
+				this.color = modelValue
 			},
 			immediate: true,
 		},
@@ -59,14 +71,14 @@ export default {
 		},
 	},
 	computed: {
-		empty() {
+		isEmpty() {
 			return this.color === '#000000' || this.color === ''
 		},
 	},
 	methods: {
 		update(force = false) {
 
-			if(this.empty && !force) {
+			if(this.isEmpty && !force) {
 				return
 			}
 
@@ -75,7 +87,7 @@ export default {
 			}
 
 			this.lastChangeTimeout = setTimeout(() => {
-				this.$emit('input', this.color)
+				this.$emit('update:modelValue', this.color)
 				this.$emit('change')
 			}, 500)
 		},
@@ -87,18 +99,4 @@ export default {
 		},
 	},
 }
-</script>
-
-<style lang="scss">
-@import 'verte/dist/verte.css';
-
-.verte.is-empty {
-	.verte__icon {
-		opacity: 0;
-	}
-
-	.verte__guide {
-		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGklEQVQYlWM4c+bMf3TMgA0MBYWDzDkUKQQAlHCpV9ycHeMAAAAASUVORK5CYII=);
-	}
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index f5aa3247..724764c7 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -112,6 +112,7 @@
 <script>
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
+import { i18n } from '@/i18n'
 
 import {format} from 'date-fns'
 import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
@@ -136,13 +137,13 @@ export default {
 		flatPickr,
 	},
 	props: {
-		value: {
+		modelValue: {
 			validator: prop => prop instanceof Date || prop === null || typeof prop === 'string',
 		},
 		chooseDateLabel: {
 			type: String,
 			default() {
-				return this.$t('input.datepicker.chooseDate')
+				return i18n.global.t('input.datepicker.chooseDate')
 			},
 		},
 		disabled: {
@@ -150,14 +151,15 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['update:modelValue', 'change', 'close', 'close-on-change'],
 	mounted() {
 		document.addEventListener('click', this.hideDatePopup)
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		document.removeEventListener('click', this.hideDatePopup)
 	},
 	watch: {
-		value: {
+		modelValue: {
 			handler: 'setDateValue',
 			immediate: true,
 		},
@@ -191,7 +193,7 @@ export default {
 		},
 		updateData() {
 			this.changed = true
-			this.$emit('input', this.date)
+			this.$emit('update:modelValue', this.date)
 			this.$emit('change', this.date)
 		},
 		toggleDatePopup() {
diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index be2826ea..a2042db0 100644
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@@ -5,7 +5,7 @@
 		<vue-easymde
 			:configs="config"
 			@change="bubble"
-			@input="handleInput"
+			@update:modelValue="handleInput"
 			class="content"
 			v-if="isEditActive"
 			v-model="text"/>
@@ -21,12 +21,10 @@
 		</p>
 
 		<ul class="actions" v-if="bottomActions.length > 0">
-			<template v-if="isEditEnabled && !showPreviewText && showSave">
-				<li>
-					<a v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
-					<a v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</a>
-				</li>
-			</template>
+			<li v-if="isEditEnabled && !showPreviewText && showSave">
+				<a v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
+				<a v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</a>
+			</li>
 			<li v-for="(action, k) in bottomActions" :key="k">
 				<a @click="action.action">{{ action.title }}</a>
 			</li>
@@ -45,15 +43,17 @@
 </template>
 
 <script>
-import VueEasymde from 'vue-easymde'
-import EasyMDE from 'easymde'
+import VueEasymde from './vue-easymde/vue-easymde.vue'
 import marked from 'marked'
 import DOMPurify from 'dompurify'
 import hljs from 'highlight.js/lib/common'
 
+import {createEasyMDEConfig} from './editorConfig'
+
 import AttachmentModel from '../../models/attachment'
 import AttachmentService from '../../services/attachment'
 import {findCheckboxesInText} from '../../helpers/checklistFromText'
+import {createRandomID} from '@/helpers/randomId'
 
 export default {
 	name: 'editor',
@@ -61,7 +61,7 @@ export default {
 		VueEasymde,
 	},
 	props: {
-		value: {
+		modelValue: {
 			type: String,
 			default: '',
 		},
@@ -71,9 +71,7 @@ export default {
 		},
 		uploadEnabled: {
 			type: Boolean,
-			default() {
-				return false
-			},
+			default: false,
 		},
 		uploadCallback: {
 			type: Function,
@@ -94,13 +92,14 @@ export default {
 		},
 		emptyText: {
 			type: String,
-			default: () => '',
+			default: '',
 		},
 		showSave: {
 			type: Boolean,
 			default: false,
 		},
 	},
+	emits: ['update:modelValue', 'change'],
 	computed: {
 		showPreviewText() {
 			return this.isPreviewActive && this.text === '' && this.emptyText !== ''
@@ -119,154 +118,30 @@ export default {
 			preview: '',
 			attachmentService: null,
 			loadedAttachments: {},
-
-			config: {
-				autoDownloadFontAwesome: false,
-				spellChecker: false,
+			config: createEasyMDEConfig({
 				placeholder: this.placeholder,
 				uploadImage: this.uploadEnabled,
 				imageUploadFunction: this.uploadCallback,
-				minHeight: '150px',
-				toolbar: [
-					{
-						name: 'heading-1',
-						action: EasyMDE.toggleHeading1,
-						title: this.$t('input.editor.heading1'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
-					},
-					{
-						name: 'heading-2',
-						action: EasyMDE.toggleHeading2,
-						title: this.$t('input.editor.heading2'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
-					},
-					{
-						name: 'heading-3',
-						action: EasyMDE.toggleHeading3,
-						title: this.$t('input.editor.heading3'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
-					},
-					{
-						name: 'heading-smaller',
-						action: EasyMDE.toggleHeadingSmaller,
-						title: this.$t('input.editor.headingSmaller'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
-					},
-					{
-						name: 'heading-bigger',
-						action: EasyMDE.toggleHeadingBigger,
-						title: this.$t('input.editor.headingBigger'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
-					},
-					'|',
-					{
-						name: 'bold',
-						action: EasyMDE.toggleBold,
-						title: this.$t('input.editor.bold'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 3H6.5H15.25C18.15 3 20.5 5.36 20.5 8.25C20.5 9.8 19.81 11.19 18.73 12.15C20.37 13.04 21.5 14.76 21.5 16.75C21.5 19.64 19.15 22 16.25 22H6.5H3.5C2.95 22 2.5 21.55 2.5 21C2.5 20.45 2.95 20 3.5 20H5.5V5H3.5C2.95 5 2.5 4.55 2.5 4C2.5 3.45 2.95 3 3.5 3ZM7.5 20H16.25C18.04 20 19.5 18.54 19.5 16.75C19.5 14.96 18.04 13.5 16.25 13.5H7.5V20ZM7.5 11.5H15.25C17.04 11.5 18.5 10.04 18.5 8.25C18.5 6.46 17.04 5 15.25 5H7.5V11.5Z"/></svg>',
-					},
-					{
-						name: 'italic',
-						action: EasyMDE.toggleItalic,
-						title: this.$t('input.editor.italic'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14.0967 4.2H17.0001C17.3301 4.2 17.6001 3.93 17.6001 3.6C17.6001 3.27 17.3301 3 17.0001 3H10.2001C9.8701 3 9.6001 3.27 9.6001 3.6C9.6001 3.93 9.8701 4.2 10.2001 4.2H12.8748L9.90335 19.8H6.9999C6.6699 19.8 6.3999 20.07 6.3999 20.4C6.3999 20.73 6.6699 21 6.9999 21H13.7999C14.1299 21 14.3999 20.73 14.3999 20.4C14.3999 20.07 14.1299 19.8 13.7999 19.8H11.1253L14.0967 4.2Z"/></svg>',
-					},
-					{
-						name: 'strikethrough',
-						action: EasyMDE.toggleStrikethrough,
-						title: this.$t('input.editor.strikethrough'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.25 7.17005C18.25 7.50005 17.98 7.77005 17.65 7.77005C17.32 7.77005 17.05 7.50005 17.05 7.17005V5.96005C15.97 5.12005 14.17 4.56005 12.79 4.31005C11.1 4.00005 9.51 4.30005 8.41 5.12005C7.2 6.03005 6.67 7.67005 7.19 8.88005C7.56 9.73005 8.37 10.31 8.98 10.64C9.57215 10.9644 10.1961 11.2013 10.8465 11.3999H20.4C20.73 11.3999 21 11.6699 21 11.9999C21 12.3299 20.73 12.5999 20.4 12.5999H15.3012C16.6583 13.0929 17.5255 13.7765 17.95 14.69C18.73 16.36 17.74 18.33 16.36 19.41C15.05 20.4401 13.35 21 11.54 21H11.16C9.78 20.9401 8.34 20.5301 6.95 19.85V20.3601C6.95 20.6901 6.68 20.96 6.35 20.96C6.02 20.96 5.75 20.6901 5.75 20.3601V17.36C5.75 17.03 6.02 16.76 6.35 16.76C6.68 16.76 6.95 17.03 6.95 17.36V18.5C8.35 19.2801 9.81 19.74 11.21 19.8C12.86 19.89 14.46 19.39 15.62 18.48C16.6 17.71 17.37 16.3 16.86 15.21C16.55 14.54 15.8 14.0201 14.58 13.63C13.9711 13.4331 13.3222 13.2762 12.6906 13.1235C12.6168 13.1056 12.5432 13.0878 12.47 13.07C12.4313 13.0607 12.3925 13.0514 12.3537 13.0421C11.7861 12.9055 11.2108 12.767 10.6413 12.5999H3.6C3.27 12.5999 3 12.3299 3 11.9999C3 11.6699 3.27 11.3999 3.6 11.3999H7.90288C7.04984 10.8343 6.42752 10.1363 6.09 9.36005C5.34 7.63005 6.03 5.40005 7.69 4.16005C9.05 3.15005 10.99 2.77005 13 3.13005C13.64 3.25005 15.53 3.66005 17.05 4.53005V4.17005C17.05 3.84005 17.32 3.57005 17.65 3.57005C17.98 3.57005 18.25 3.84005 18.25 4.17005V7.17005Z"/></svg>',
-					},
-					{
-						name: 'code',
-						action: EasyMDE.toggleCodeBlock,
-						title: this.$t('input.editor.code'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.57 20.9601C8.64 20.9901 8.71 21.0001 8.78 21.0001C9.02 21.0001 9.24 20.8501 9.34 20.6101L15.79 3.81005C15.9 3.50005 15.75 3.15005 15.44 3.03005C15.14 2.92005 14.79 3.07005 14.67 3.38005L8.22 20.1801C8.11 20.4901 8.26 20.8401 8.57 20.9601ZM7.00007 18.0001C6.85007 18.0001 6.69007 17.9401 6.58007 17.8201L1.18007 12.4201C0.950068 12.1901 0.950068 11.8101 1.18007 11.5701L6.58007 6.17006C6.81007 5.94006 7.19007 5.94006 7.43007 6.17006C7.66007 6.40006 7.66007 6.78006 7.43007 7.02006L2.45007 12.0001L7.43007 16.9801C7.66007 17.2101 7.66007 17.5901 7.43007 17.8301C7.31007 17.9401 7.15007 18.0001 7.00007 18.0001ZM17 18.0001C16.85 18.0001 16.69 17.9401 16.58 17.8201C16.35 17.5901 16.35 17.2101 16.58 16.9701L21.55 12.0001L16.57 7.02006C16.34 6.79006 16.34 6.41006 16.57 6.17006C16.81 5.94006 17.19 5.94006 17.42 6.17006L22.82 11.5701C23.05 11.8001 23.05 12.1801 22.82 12.4201L17.42 17.8201C17.31 17.9401 17.15 18.0001 17 18.0001Z"/></svg>',
-					},
-					{
-						name: 'quote',
-						action: EasyMDE.toggleBlockquote,
-						title: this.$t('input.editor.quote'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19.373 5.16357H5.62695C4.79102 5.16357 4.11133 5.84326 4.11133 6.6792V16.2095C4.11133 17.0464 4.79102 17.7261 5.62695 17.7261H6.8877V21.1245C6.8877 21.3667 7.0332 21.5854 7.25684 21.6782C7.33203 21.7095 7.41016 21.7241 7.4873 21.7241C7.64258 21.7241 7.7959 21.6636 7.91113 21.5493L11.748 17.7261H19.373C20.209 17.7261 20.8887 17.0464 20.8887 16.2095V6.6792C20.8887 5.84326 20.209 5.16357 19.373 5.16357ZM19.6895 16.2095C19.6895 16.3843 19.5469 16.5269 19.373 16.5269H11.5C11.3408 16.5269 11.1895 16.5894 11.0762 16.7017L8.08691 19.6802V17.1265C8.08691 16.7954 7.81836 16.5269 7.4873 16.5269H5.62695C5.45312 16.5269 5.31055 16.3843 5.31055 16.2095V6.6792C5.31055 6.50537 5.45312 6.36279 5.62695 6.36279H19.373C19.5469 6.36279 19.6895 6.50537 19.6895 6.6792V16.2095ZM10.3431 8.45264C9.46326 8.45264 8.75 9.16589 8.75 10.0458C8.75 10.9257 9.46326 11.639 10.3431 11.639C10.4775 11.639 10.6058 11.6173 10.7305 11.5861V11.6195C10.7305 12.1322 10.3135 12.5492 9.75586 12.5492C9.4248 12.5492 9.17871 12.8177 9.17871 13.1488C9.17871 13.4799 9.46973 13.7484 9.80078 13.7484C10.9746 13.7484 11.9297 12.7933 11.9297 11.6195V10.1176L11.9294 10.1165L11.9292 10.1155C11.9297 10.1049 11.9312 10.0946 11.9326 10.0843L11.9326 10.0843C11.9345 10.0716 11.9363 10.059 11.9363 10.0458C11.9363 9.16589 11.223 8.45264 10.3431 8.45264ZM13.0637 10.0458C13.0637 9.16589 13.7771 8.45264 14.657 8.45264C15.5369 8.45264 16.2501 9.16589 16.2501 10.0458C16.2501 10.0584 16.2484 10.0706 16.2466 10.0828C16.2452 10.0929 16.2437 10.103 16.2433 10.1134C16.2433 10.1149 16.2441 10.1161 16.2441 10.1176V11.6195C16.2441 12.7933 15.2891 13.7484 14.1152 13.7484C13.7842 13.7484 13.4922 13.4799 13.4922 13.1488C13.4922 12.8177 13.7383 12.5492 14.0693 12.5492C14.6279 12.5492 15.0449 12.1322 15.0449 11.6195V11.5858C14.9202 11.6173 14.7915 11.639 14.657 11.639C13.7771 11.639 13.0637 10.9257 13.0637 10.0458Z"/></svg>',
-					},
-					{
-						name: 'unordered-list',
-						action: EasyMDE.toggleUnorderedList,
-						title: this.$t('input.editor.unorderedList'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.5281 3.7002H3.5281C3.1981 3.7002 2.9281 3.9702 2.9281 4.3002V7.3002C2.9281 7.6302 3.1981 7.9002 3.5281 7.9002H6.5281C6.8581 7.9002 7.1281 7.6302 7.1281 7.3002V4.3002C7.1281 3.9702 6.8581 3.7002 6.5281 3.7002ZM5.9281 6.7002H4.1281V4.9002H5.9281V6.7002ZM3.5281 9.90015H6.5281C6.8581 9.90015 7.1281 10.1701 7.1281 10.5001V13.5001C7.1281 13.8301 6.8581 14.1001 6.5281 14.1001H3.5281C3.1981 14.1001 2.9281 13.8301 2.9281 13.5001V10.5001C2.9281 10.1701 3.1981 9.90015 3.5281 9.90015ZM4.1281 12.9001H5.9281V11.1001H4.1281V12.9001ZM3.5281 16.1001H6.5281C6.8581 16.1001 7.1281 16.3701 7.1281 16.7001V19.7001C7.1281 20.0301 6.8581 20.3001 6.5281 20.3001H3.5281C3.1981 20.3001 2.9281 20.0301 2.9281 19.7001V16.7001C2.9281 16.3701 3.1981 16.1001 3.5281 16.1001ZM4.1281 19.1001H5.9281V17.3001H4.1281V19.1001ZM9.72817 6.4002H20.7282C21.0582 6.4002 21.3282 6.1302 21.3282 5.8002C21.3282 5.4702 21.0582 5.2002 20.7282 5.2002H9.72817C9.39817 5.2002 9.12817 5.4702 9.12817 5.8002C9.12817 6.1302 9.39817 6.4002 9.72817 6.4002ZM9.72817 11.4001H20.7282C21.0582 11.4001 21.3282 11.6701 21.3282 12.0001C21.3282 12.3301 21.0582 12.6001 20.7282 12.6001H9.72817C9.39817 12.6001 9.12817 12.3301 9.12817 12.0001C9.12817 11.6701 9.39817 11.4001 9.72817 11.4001ZM9.72817 17.6001H20.7282C21.0582 17.6001 21.3282 17.8701 21.3282 18.2001C21.3282 18.5301 21.0582 18.8001 20.7282 18.8001H9.72817C9.39817 18.8001 9.12817 18.5301 9.12817 18.2001C9.12817 17.8701 9.39817 17.6001 9.72817 17.6001Z"/></svg>',
-					},
-					{
-						name: 'ordered-list',
-						action: EasyMDE.toggleOrderedList,
-						title: this.$t('input.editor.orderedList'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4.19494 8.29994H5.99494C6.26494 8.29994 6.49494 8.07995 6.49494 7.79994C6.49494 7.51995 6.27494 7.29994 5.99494 7.29994H5.59494V3.79994C5.59494 3.62994 5.50494 3.46994 5.36494 3.37994C5.22494 3.28994 5.04494 3.26994 4.89494 3.33994L3.89494 3.76994C3.64494 3.87994 3.52494 4.17994 3.63494 4.42994C3.74494 4.67994 4.03494 4.79994 4.29494 4.68994L4.59494 4.55994V7.29994H4.19494C3.91494 7.29994 3.69494 7.51995 3.69494 7.79994C3.69494 8.07995 3.91494 8.29994 4.19494 8.29994ZM20.195 6.39995H9.19497C8.86497 6.39995 8.59497 6.12995 8.59497 5.79995C8.59497 5.46995 8.86497 5.19995 9.19497 5.19995H20.195C20.525 5.19995 20.795 5.46995 20.795 5.79995C20.795 6.12995 20.525 6.39995 20.195 6.39995ZM3.78486 14.36H6.37486C6.65486 14.36 6.87486 14.14 6.87486 13.86C6.87486 13.58 6.65486 13.36 6.37486 13.36H4.88486C5.00486 13.23 5.12486 13.09 5.23486 12.95C5.26626 12.9151 5.29645 12.8802 5.32626 12.8458L5.32629 12.8457C5.38192 12.7814 5.43627 12.7186 5.49486 12.66C5.73486 12.4 5.98486 12.12 6.17486 11.79C6.47486 11.25 6.41486 10.63 6.01486 10.17C5.57486 9.66 4.86486 9.5 4.24486 9.74C3.74486 9.95 3.39486 10.35 3.22486 10.91C3.14486 11.18 3.29486 11.46 3.56486 11.54C3.82486 11.61 4.10486 11.46 4.18486 11.2C4.29486 10.85 4.48486 10.73 4.62486 10.67C4.88486 10.57 5.13486 10.68 5.26486 10.82C5.38486 10.96 5.40486 11.12 5.30486 11.29C5.17595 11.5202 4.99618 11.7165 4.80458 11.9257L4.75486 11.98C4.67298 12.0801 4.58283 12.1801 4.49946 12.2727L4.49945 12.2727L4.47486 12.3C4.12486 12.72 3.76486 13.13 3.40486 13.53C3.27486 13.68 3.23486 13.9 3.32486 14.07C3.41486 14.24 3.58486 14.36 3.78486 14.36ZM3.68486 20.3699C4.04486 20.5899 4.46486 20.6999 4.87486 20.6999C5.13486 20.6999 5.38486 20.6499 5.61486 20.5499C6.31486 20.2799 6.73486 19.5599 6.60486 18.8799C6.53486 18.5499 6.35486 18.2899 6.12486 18.0899C6.32486 17.8999 6.45486 17.6499 6.50486 17.3799C6.57486 17.0099 6.49486 16.6299 6.27486 16.3099C5.85486 15.6899 5.07486 15.5199 4.10486 15.8299C3.83486 15.9199 3.69486 16.1999 3.77486 16.4599C3.86486 16.7299 4.14486 16.8699 4.40486 16.7899C4.70486 16.6999 5.24486 16.5799 5.45486 16.8899C5.51486 16.9899 5.54486 17.0999 5.52486 17.1999C5.51486 17.2699 5.47486 17.3599 5.36486 17.4299C5.26486 17.4999 5.12486 17.5399 4.95486 17.5799L4.77486 17.6299C4.54486 17.6999 4.40486 17.9099 4.41486 18.1499C4.42486 18.3899 4.61486 18.5799 4.84486 18.6099C5.20486 18.6599 5.58486 18.8299 5.63486 19.0799C5.67486 19.2999 5.46486 19.5499 5.25486 19.6299C4.94486 19.7599 4.52486 19.7099 4.21486 19.5199C3.97486 19.3699 3.67486 19.4399 3.52486 19.6799C3.37486 19.9199 3.44486 20.2299 3.68486 20.3699ZM20.195 18.7999H9.19497C8.86497 18.7999 8.59497 18.5299 8.59497 18.1999C8.59497 17.8699 8.86497 17.5999 9.19497 17.5999H20.195C20.525 17.5999 20.795 17.8699 20.795 18.1999C20.795 18.5299 20.525 18.7999 20.195 18.7999ZM9.19497 12.5999H20.195C20.525 12.5999 20.795 12.3299 20.795 11.9999C20.795 11.6699 20.525 11.3999 20.195 11.3999H9.19497C8.86497 11.3999 8.59497 11.6699 8.59497 11.9999C8.59497 12.3299 8.86497 12.5999 9.19497 12.5999Z"/></svg>',
-					},
-					'|',
-					{
-						name: 'clean-block',
-						action: EasyMDE.cleanBlock,
-						title: this.$t('input.editor.cleanBlock'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.25989 6.18384H20.4513C20.7823 6.18384 21.0509 6.45239 21.0509 6.78345V17.9749C21.0509 18.3059 20.7823 18.5745 20.4513 18.5745H9.25989C9.0929 18.5745 8.93469 18.5061 8.82043 18.384L3.6095 12.7883C3.39563 12.5579 3.39563 12.2004 3.6095 11.97L8.82043 6.37427C8.93469 6.2522 9.0929 6.18384 9.25989 6.18384ZM9.52063 17.3752H19.8517V7.38306H9.52063L4.86926 12.3792L9.52063 17.3752ZM12.7755 15.0686C12.6222 15.0686 12.4679 15.01 12.3517 14.8928C12.1173 14.6584 12.1173 14.2786 12.3517 14.0452L14.0503 12.3469L12.3517 10.6487C12.1173 10.4153 12.1173 10.0354 12.3517 9.80103C12.5841 9.56665 12.965 9.56665 13.1993 9.80103L14.8981 11.4994L16.5968 9.80103C16.8312 9.56665 17.212 9.56665 17.4445 9.80103C17.6788 10.0354 17.6788 10.4153 17.4445 10.6487L15.7458 12.3469L17.4445 14.0452C17.6788 14.2786 17.6788 14.6584 17.4445 14.8928C17.3282 15.01 17.174 15.0686 17.0206 15.0686C16.8673 15.0686 16.714 15.01 16.5968 14.8928L14.8981 13.1945L13.1993 14.8928C13.0822 15.01 12.9288 15.0686 12.7755 15.0686Z"/></svg>',
-					},
-					{
-						name: 'link',
-						action: EasyMDE.drawLink,
-						title: this.$t('input.editor.link'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.4399 15.3452C11.4999 15.3652 11.5699 15.3752 11.6299 15.3752C11.8799 15.3752 12.1199 15.2152 12.1999 14.9652C12.2999 14.6452 12.1299 14.3052 11.8199 14.2052C11.3499 14.0452 10.9299 13.7852 10.5699 13.4152C10.1999 13.0552 9.9399 12.6452 9.7799 12.1552C9.6599 11.8252 9.5999 11.4652 9.5999 11.0952C9.5999 10.2152 9.9399 9.38518 10.5699 8.75518L15.1599 4.15518C16.4499 2.87518 18.5399 2.87518 19.8299 4.15518C20.4499 4.78518 20.7899 5.61518 20.7899 6.49518C20.7899 7.37518 20.4499 8.20518 19.8299 8.82518L16.7399 11.9052C16.5099 12.1452 16.5099 12.5252 16.7399 12.7552C16.9799 12.9852 17.3599 12.9852 17.5899 12.7552L20.6799 9.67518C21.5299 8.83518 21.9999 7.69518 21.9999 6.49518C21.9999 5.29518 21.5299 4.16518 20.6899 3.30518C18.9299 1.55518 16.0799 1.55518 14.3199 3.30518L9.7299 7.90518C8.8699 8.75518 8.3999 9.88518 8.3999 11.0952C8.3999 11.6152 8.4899 12.1152 8.6499 12.5552C8.8599 13.1952 9.2399 13.7952 9.7199 14.2652C10.1999 14.7552 10.7999 15.1352 11.4399 15.3452ZM3.32 20.6851C4.2 21.5551 5.35 21.9951 6.5 21.9951C7.65 21.9951 8.81 21.5551 9.69 20.7051L14.28 16.1051C15.14 15.2551 15.61 14.1251 15.61 12.9151C15.61 12.4551 15.54 11.9951 15.4 11.5551C15.17 10.8651 14.8 10.2551 14.28 9.73509C13.76 9.21509 13.15 8.84509 12.46 8.61509C12.14 8.51509 11.8 8.68509 11.7 8.99509C11.6 9.30509 11.77 9.64509 12.1 9.75509C12.61 9.91509 13.06 10.1951 13.44 10.5751C13.82 10.9551 14.09 11.4051 14.26 11.9151C14.36 12.2351 14.41 12.5651 14.41 12.9051C14.41 13.7951 14.06 14.6251 13.43 15.2451L8.84 19.8451C7.55 21.1251 5.46 21.1251 4.17 19.8451C3.55 19.2151 3.21 18.3951 3.21 17.5051C3.21 16.6151 3.55 15.7851 4.17 15.1651L7.35 11.9851C7.58 11.7451 7.59 11.3651 7.35 11.1351C7.11 10.9051 6.73 10.9051 6.5 11.1351L3.32 14.3151C2.47 15.1551 2 16.2851 2 17.4951C2 18.7051 2.47 19.8351 3.32 20.6851Z"/></svg>',
-					},
-					{
-						name: 'image',
-						action: EasyMDE.drawImage,
-						title: this.$t('input.editor.image'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4 4C2.89543 4 2 4.89543 2 6V16V17.5152V18C2 19.1046 2.89543 20 4 20H20C21.0528 20 21.9156 19.1866 21.9942 18.1539L22 18.1632V18V16V6C22 4.89543 21.1046 4 20 4H4ZM3.2 17.7V16.5642L6.78192 13.7254C6.8616 13.6622 6.97597 13.6689 7.04776 13.7409L10.3126 17.0146C10.7026 17.4056 11.3357 17.4065 11.7268 17.0165C11.7606 16.9827 11.792 16.9465 11.8207 16.9083L16.736 10.352C16.8023 10.2636 16.9277 10.2457 17.016 10.312C17.0355 10.3265 17.0521 10.3445 17.0651 10.365L20.8 16.2669V17.7C20.8 18.3075 20.3075 18.8 19.7 18.8H4.3C3.69249 18.8 3.2 18.3075 3.2 17.7ZM17.3865 8.61836L20.8 14.08V6.3C20.8 5.69249 20.3075 5.2 19.7 5.2H4.3C3.69249 5.2 3.2 5.69249 3.2 6.3V15.04L6.65054 12.2796C6.84949 12.1204 7.13629 12.1363 7.31645 12.3164L10.8369 15.8369C10.915 15.915 11.0417 15.915 11.1198 15.8369C11.1265 15.8302 16.5625 8.58336 16.5625 8.58336C16.7282 8.36245 17.0416 8.31768 17.2625 8.48336C17.3118 8.52034 17.3538 8.56611 17.3865 8.61836ZM8 8.5C8 9.32843 7.32843 10 6.5 10C5.67157 10 5 9.32843 5 8.5C5 7.67157 5.67157 7 6.5 7C7.32843 7 8 7.67157 8 8.5Z"/></svg>',
-					},
-					{
-						name: 'table',
-						action: EasyMDE.drawTable,
-						title: this.$t('input.editor.table'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.18524 3.08496H19.4152C20.6752 3.08496 21.7152 4.11496 21.7152 5.38496V18.615C21.7152 19.885 20.6852 20.915 19.4152 20.915H6.18524C4.91524 20.915 3.88525 19.885 3.88525 18.615V5.38496C3.88525 4.11496 4.91524 3.08496 6.18524 3.08496ZM19.4052 19.705C20.0152 19.705 20.5052 19.215 20.5052 18.605H20.5153V5.38496C20.5153 4.77496 20.0252 4.28496 19.4152 4.28496H6.18524C5.57524 4.28496 5.08521 4.77496 5.08521 5.38496V18.605C5.08521 19.215 5.57524 19.705 6.18524 19.705H19.4052ZM17.4453 9.15503H8.15527C7.82527 9.15503 7.5553 9.42503 7.5553 9.75503C7.5553 10.085 7.82527 10.355 8.15527 10.355H17.4453C17.7753 10.355 18.0453 10.085 18.0453 9.75503C18.0453 9.42503 17.7753 9.15503 17.4453 9.15503ZM17.4453 13.635H8.15527C7.82527 13.635 7.5553 13.905 7.5553 14.235C7.5553 14.565 7.82527 14.835 8.15527 14.835H17.4453C17.7753 14.835 18.0453 14.565 18.0453 14.235C18.0453 13.905 17.7753 13.635 17.4453 13.635Z"/></svg>',
-					},
-					{
-						name: 'horizontal-rule',
-						action: EasyMDE.drawHorizontalRule,
-						title: this.$t('input.editor.horizontalRule'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 13H3C2.45 13 2 12.55 2 12C2 11.45 2.45 11 3 11H21C21.55 11 22 11.45 22 12C22 12.55 21.55 13 21 13Z"/></svg>',
-					},
-					'|',
-					{
-						name: 'side-by-side',
-						action: EasyMDE.toggleSideBySide,
-						title: this.$t('input.editor.sideBySide'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.4787 14.58C18.3587 14.69 18.2987 14.85 18.2987 15C18.2987 15.15 18.3587 15.31 18.4787 15.42C18.7187 15.65 19.0987 15.65 19.3287 15.42L22.3287 12.42C22.5587 12.18 22.5587 11.8 22.3287 11.57L19.3287 8.56996C19.0887 8.33996 18.7087 8.33996 18.4787 8.56996C18.2487 8.80996 18.2487 9.18996 18.4787 9.41996L20.451 11.3999L14.4487 11.3999L14.4487 4.6C14.4487 4.27 14.1787 4 13.8487 4C13.5187 4 13.2487 4.27 13.2487 4.6L13.2487 19.4C13.2487 19.73 13.5187 20 13.8487 20C14.1787 20 14.4487 19.73 14.4487 19.4L14.4487 12.5999L20.4511 12.5999L18.4787 14.58ZM9.54878 19.4L9.54878 12.5999L3.5486 12.5999L5.52867 14.58C5.75867 14.81 5.75867 15.19 5.52867 15.43C5.29867 15.66 4.91867 15.66 4.67867 15.43L1.67867 12.43C1.63274 12.384 1.5956 12.3323 1.56725 12.2774C1.53058 12.2077 1.50724 12.1299 1.50068 12.0477C1.49934 12.0317 1.49867 12.0158 1.49867 12C1.49867 11.9841 1.49933 11.9682 1.50067 11.9522C1.51454 11.778 1.60365 11.6242 1.73526 11.5234L4.67867 8.57997C4.90867 8.34997 5.28867 8.34997 5.52867 8.57997C5.75867 8.80997 5.75867 9.18997 5.52867 9.42997L3.55107 11.3999L9.54878 11.3999L9.54878 4.6C9.54878 4.27 9.81878 4 10.1488 4C10.4788 4 10.7488 4.27 10.7488 4.6L10.7488 11.9999L10.7488 19.4C10.7488 19.73 10.4788 20 10.1488 20C9.81878 20 9.54878 19.73 9.54878 19.4Z"/></svg>',
-					},
-					{
-						name: 'guide',
-						action: () => {
-							window.open('https://www.markdownguide.org/basic-syntax/', '_blank')
-						},
-						title: this.$t('input.editor.guide'),
-						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19.4999 2.3999H6.4999C5.0699 2.3999 3.8999 3.5699 3.8999 4.9999V18.9999C3.8999 20.4299 5.0699 21.5999 6.4999 21.5999H19.4999C19.8299 21.5999 20.0999 21.3299 20.0999 20.9999V16.9999V2.9999C20.0999 2.6699 19.8299 2.3999 19.4999 2.3999ZM5.0999 4.9999V16.8118C5.50468 16.5513 5.98546 16.3999 6.4999 16.3999H18.8999V3.5999H6.4999C5.7299 3.5999 5.0999 4.2299 5.0999 4.9999ZM6.4999 17.5999H18.8999V20.3999H6.4999C5.7299 20.3999 5.0999 19.7699 5.0999 18.9999C5.0999 18.2299 5.7299 17.5999 6.4999 17.5999ZM8.4999 8.5999H15.4999C15.8299 8.5999 16.0999 8.3299 16.0999 7.9999C16.0999 7.6699 15.8299 7.3999 15.4999 7.3999H8.4999C8.1699 7.3999 7.8999 7.6699 7.8999 7.9999C7.8999 8.3299 8.1699 8.5999 8.4999 8.5999ZM15.4999 11.3999H8.4999C8.1699 11.3999 7.8999 11.6699 7.8999 11.9999C7.8999 12.3299 8.1699 12.5999 8.4999 12.5999H15.4999C15.8299 12.5999 16.0999 12.3299 16.0999 11.9999C16.0999 11.6699 15.8299 11.3999 15.4999 11.3999Z"/></svg>',
-					},
-				],
-			},
+			}),
+			checkboxId: createRandomID(),
 		}
 	},
 	watch: {
-		value(newVal) {
-			this.text = newVal
+		modelValue(modelValue) {
+			this.text = modelValue
 			this.$nextTick(this.renderPreview)
 		},
 		text(newVal, oldVal) {
 			// Only bubble the new value if it actually changed, but not if the component just got mounted and the text changed from the outside.
-			if (oldVal === '' && this.text === this.value) {
+			if (oldVal === '' && this.text === this.modelValue) {
 				return
 			}
 			this.bubble()
 		},
 	},
 	mounted() {
-		if (this.value !== '') {
-			this.text = this.value
+		if (this.modelValue !== '') {
+			this.text = this.modelValue
 		}
 
 		if (this.previewIsDefault && this.hasPreview) {
@@ -299,7 +174,7 @@ export default {
 			}
 
 			this.changeTimeout = setTimeout(() => {
-				this.$emit('input', this.text)
+				this.$emit('update:modelValue',this.text)
 				this.$emit('change', this.text)
 			}, timeout)
 		},
@@ -335,7 +210,7 @@ export default {
 						}
 
 						checkboxNum++
-						return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${this._uid}"/>`
+						return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${this.checkboxId}"/>`
 					},
 					link: (href, title, text) => {
 						const isLocal = href.startsWith(`${location.protocol}//${location.hostname}`)
@@ -358,7 +233,7 @@ export default {
 			// dom tree. If we're calling this right after setting this.preview it could be the images were
 			// not already made available.
 			// Some docs at https://stackoverflow.com/q/62865160/10924593
-			this.$nextTick(() => {
+			this.$nextTick(async () => {
 				const attachmentImage = document.getElementsByClassName('attachment-image')
 				if (attachmentImage) {
 					for (const img of attachmentImage) {
@@ -379,15 +254,13 @@ export default {
 							this.attachmentService = new AttachmentService()
 						}
 
-						this.attachmentService.getBlobUrl(attachment)
-							.then(url => {
-								img.src = url
-								this.loadedAttachments[cacheKey] = url
-							})
+						const url = await this.attachmentService.getBlobUrl(attachment)
+						img.src = url
+						this.loadedAttachments[cacheKey] = url
 					}
 				}
 
-				const textCheckbox = document.getElementsByClassName(`text-checkbox-${this._uid}`)
+				const textCheckbox = document.getElementsByClassName(`text-checkbox-${this.checkboxId}`)
 				if (textCheckbox) {
 					for (const check of textCheckbox) {
 						check.removeEventListener('change', this.handleCheckboxClick)
@@ -435,8 +308,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../node_modules/highlight.js/scss/base16/equilibrium-gray-light';
-@import '../../../node_modules/easymde/dist/easymde.min.css';
+@import 'codemirror/lib/codemirror.css';
+@import './vue-easymde/vue-easymde.css';
+@import 'highlight.js/scss/base16/equilibrium-gray-light';
 
 .editor {
 	.clear {
diff --git a/src/components/input/editorConfig.js b/src/components/input/editorConfig.js
new file mode 100644
index 00000000..1629eccd
--- /dev/null
+++ b/src/components/input/editorConfig.js
@@ -0,0 +1,134 @@
+import EasyMDE from 'easymde'
+import {i18n} from '@/i18n'
+
+export function createEasyMDEConfig({ placeholder, uploadImage, imageUploadFunction }) {
+    return {
+        autoDownloadFontAwesome: false,
+        spellChecker: false,
+        placeholder,
+        uploadImage,
+        imageUploadFunction,
+        minHeight: '150px',
+        toolbar: [
+            {
+                name: 'heading-1',
+                action: EasyMDE.toggleHeading1,
+                title: i18n.global.t('input.editor.heading1'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
+            },
+            {
+                name: 'heading-2',
+                action: EasyMDE.toggleHeading2,
+                title: i18n.global.t('input.editor.heading2'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
+            },
+            {
+                name: 'heading-3',
+                action: EasyMDE.toggleHeading3,
+                title: i18n.global.t('input.editor.heading3'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
+            },
+            {
+                name: 'heading-smaller',
+                action: EasyMDE.toggleHeadingSmaller,
+                title: i18n.global.t('input.editor.headingSmaller'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
+            },
+            {
+                name: 'heading-bigger',
+                action: EasyMDE.toggleHeadingBigger,
+                title: i18n.global.t('input.editor.headingBigger'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
+            },
+            '|',
+            {
+                name: 'bold',
+                action: EasyMDE.toggleBold,
+                title: i18n.global.t('input.editor.bold'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 3H6.5H15.25C18.15 3 20.5 5.36 20.5 8.25C20.5 9.8 19.81 11.19 18.73 12.15C20.37 13.04 21.5 14.76 21.5 16.75C21.5 19.64 19.15 22 16.25 22H6.5H3.5C2.95 22 2.5 21.55 2.5 21C2.5 20.45 2.95 20 3.5 20H5.5V5H3.5C2.95 5 2.5 4.55 2.5 4C2.5 3.45 2.95 3 3.5 3ZM7.5 20H16.25C18.04 20 19.5 18.54 19.5 16.75C19.5 14.96 18.04 13.5 16.25 13.5H7.5V20ZM7.5 11.5H15.25C17.04 11.5 18.5 10.04 18.5 8.25C18.5 6.46 17.04 5 15.25 5H7.5V11.5Z"/></svg>',
+            },
+            {
+                name: 'italic',
+                action: EasyMDE.toggleItalic,
+                title: i18n.global.t('input.editor.italic'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14.0967 4.2H17.0001C17.3301 4.2 17.6001 3.93 17.6001 3.6C17.6001 3.27 17.3301 3 17.0001 3H10.2001C9.8701 3 9.6001 3.27 9.6001 3.6C9.6001 3.93 9.8701 4.2 10.2001 4.2H12.8748L9.90335 19.8H6.9999C6.6699 19.8 6.3999 20.07 6.3999 20.4C6.3999 20.73 6.6699 21 6.9999 21H13.7999C14.1299 21 14.3999 20.73 14.3999 20.4C14.3999 20.07 14.1299 19.8 13.7999 19.8H11.1253L14.0967 4.2Z"/></svg>',
+            },
+            {
+                name: 'strikethrough',
+                action: EasyMDE.toggleStrikethrough,
+                title: i18n.global.t('input.editor.strikethrough'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.25 7.17005C18.25 7.50005 17.98 7.77005 17.65 7.77005C17.32 7.77005 17.05 7.50005 17.05 7.17005V5.96005C15.97 5.12005 14.17 4.56005 12.79 4.31005C11.1 4.00005 9.51 4.30005 8.41 5.12005C7.2 6.03005 6.67 7.67005 7.19 8.88005C7.56 9.73005 8.37 10.31 8.98 10.64C9.57215 10.9644 10.1961 11.2013 10.8465 11.3999H20.4C20.73 11.3999 21 11.6699 21 11.9999C21 12.3299 20.73 12.5999 20.4 12.5999H15.3012C16.6583 13.0929 17.5255 13.7765 17.95 14.69C18.73 16.36 17.74 18.33 16.36 19.41C15.05 20.4401 13.35 21 11.54 21H11.16C9.78 20.9401 8.34 20.5301 6.95 19.85V20.3601C6.95 20.6901 6.68 20.96 6.35 20.96C6.02 20.96 5.75 20.6901 5.75 20.3601V17.36C5.75 17.03 6.02 16.76 6.35 16.76C6.68 16.76 6.95 17.03 6.95 17.36V18.5C8.35 19.2801 9.81 19.74 11.21 19.8C12.86 19.89 14.46 19.39 15.62 18.48C16.6 17.71 17.37 16.3 16.86 15.21C16.55 14.54 15.8 14.0201 14.58 13.63C13.9711 13.4331 13.3222 13.2762 12.6906 13.1235C12.6168 13.1056 12.5432 13.0878 12.47 13.07C12.4313 13.0607 12.3925 13.0514 12.3537 13.0421C11.7861 12.9055 11.2108 12.767 10.6413 12.5999H3.6C3.27 12.5999 3 12.3299 3 11.9999C3 11.6699 3.27 11.3999 3.6 11.3999H7.90288C7.04984 10.8343 6.42752 10.1363 6.09 9.36005C5.34 7.63005 6.03 5.40005 7.69 4.16005C9.05 3.15005 10.99 2.77005 13 3.13005C13.64 3.25005 15.53 3.66005 17.05 4.53005V4.17005C17.05 3.84005 17.32 3.57005 17.65 3.57005C17.98 3.57005 18.25 3.84005 18.25 4.17005V7.17005Z"/></svg>',
+            },
+            {
+                name: 'code',
+                action: EasyMDE.toggleCodeBlock,
+                title: i18n.global.t('input.editor.code'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.57 20.9601C8.64 20.9901 8.71 21.0001 8.78 21.0001C9.02 21.0001 9.24 20.8501 9.34 20.6101L15.79 3.81005C15.9 3.50005 15.75 3.15005 15.44 3.03005C15.14 2.92005 14.79 3.07005 14.67 3.38005L8.22 20.1801C8.11 20.4901 8.26 20.8401 8.57 20.9601ZM7.00007 18.0001C6.85007 18.0001 6.69007 17.9401 6.58007 17.8201L1.18007 12.4201C0.950068 12.1901 0.950068 11.8101 1.18007 11.5701L6.58007 6.17006C6.81007 5.94006 7.19007 5.94006 7.43007 6.17006C7.66007 6.40006 7.66007 6.78006 7.43007 7.02006L2.45007 12.0001L7.43007 16.9801C7.66007 17.2101 7.66007 17.5901 7.43007 17.8301C7.31007 17.9401 7.15007 18.0001 7.00007 18.0001ZM17 18.0001C16.85 18.0001 16.69 17.9401 16.58 17.8201C16.35 17.5901 16.35 17.2101 16.58 16.9701L21.55 12.0001L16.57 7.02006C16.34 6.79006 16.34 6.41006 16.57 6.17006C16.81 5.94006 17.19 5.94006 17.42 6.17006L22.82 11.5701C23.05 11.8001 23.05 12.1801 22.82 12.4201L17.42 17.8201C17.31 17.9401 17.15 18.0001 17 18.0001Z"/></svg>',
+            },
+            {
+                name: 'quote',
+                action: EasyMDE.toggleBlockquote,
+                title: i18n.global.t('input.editor.quote'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19.373 5.16357H5.62695C4.79102 5.16357 4.11133 5.84326 4.11133 6.6792V16.2095C4.11133 17.0464 4.79102 17.7261 5.62695 17.7261H6.8877V21.1245C6.8877 21.3667 7.0332 21.5854 7.25684 21.6782C7.33203 21.7095 7.41016 21.7241 7.4873 21.7241C7.64258 21.7241 7.7959 21.6636 7.91113 21.5493L11.748 17.7261H19.373C20.209 17.7261 20.8887 17.0464 20.8887 16.2095V6.6792C20.8887 5.84326 20.209 5.16357 19.373 5.16357ZM19.6895 16.2095C19.6895 16.3843 19.5469 16.5269 19.373 16.5269H11.5C11.3408 16.5269 11.1895 16.5894 11.0762 16.7017L8.08691 19.6802V17.1265C8.08691 16.7954 7.81836 16.5269 7.4873 16.5269H5.62695C5.45312 16.5269 5.31055 16.3843 5.31055 16.2095V6.6792C5.31055 6.50537 5.45312 6.36279 5.62695 6.36279H19.373C19.5469 6.36279 19.6895 6.50537 19.6895 6.6792V16.2095ZM10.3431 8.45264C9.46326 8.45264 8.75 9.16589 8.75 10.0458C8.75 10.9257 9.46326 11.639 10.3431 11.639C10.4775 11.639 10.6058 11.6173 10.7305 11.5861V11.6195C10.7305 12.1322 10.3135 12.5492 9.75586 12.5492C9.4248 12.5492 9.17871 12.8177 9.17871 13.1488C9.17871 13.4799 9.46973 13.7484 9.80078 13.7484C10.9746 13.7484 11.9297 12.7933 11.9297 11.6195V10.1176L11.9294 10.1165L11.9292 10.1155C11.9297 10.1049 11.9312 10.0946 11.9326 10.0843L11.9326 10.0843C11.9345 10.0716 11.9363 10.059 11.9363 10.0458C11.9363 9.16589 11.223 8.45264 10.3431 8.45264ZM13.0637 10.0458C13.0637 9.16589 13.7771 8.45264 14.657 8.45264C15.5369 8.45264 16.2501 9.16589 16.2501 10.0458C16.2501 10.0584 16.2484 10.0706 16.2466 10.0828C16.2452 10.0929 16.2437 10.103 16.2433 10.1134C16.2433 10.1149 16.2441 10.1161 16.2441 10.1176V11.6195C16.2441 12.7933 15.2891 13.7484 14.1152 13.7484C13.7842 13.7484 13.4922 13.4799 13.4922 13.1488C13.4922 12.8177 13.7383 12.5492 14.0693 12.5492C14.6279 12.5492 15.0449 12.1322 15.0449 11.6195V11.5858C14.9202 11.6173 14.7915 11.639 14.657 11.639C13.7771 11.639 13.0637 10.9257 13.0637 10.0458Z"/></svg>',
+            },
+            {
+                name: 'unordered-list',
+                action: EasyMDE.toggleUnorderedList,
+                title: i18n.global.t('input.editor.unorderedList'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.5281 3.7002H3.5281C3.1981 3.7002 2.9281 3.9702 2.9281 4.3002V7.3002C2.9281 7.6302 3.1981 7.9002 3.5281 7.9002H6.5281C6.8581 7.9002 7.1281 7.6302 7.1281 7.3002V4.3002C7.1281 3.9702 6.8581 3.7002 6.5281 3.7002ZM5.9281 6.7002H4.1281V4.9002H5.9281V6.7002ZM3.5281 9.90015H6.5281C6.8581 9.90015 7.1281 10.1701 7.1281 10.5001V13.5001C7.1281 13.8301 6.8581 14.1001 6.5281 14.1001H3.5281C3.1981 14.1001 2.9281 13.8301 2.9281 13.5001V10.5001C2.9281 10.1701 3.1981 9.90015 3.5281 9.90015ZM4.1281 12.9001H5.9281V11.1001H4.1281V12.9001ZM3.5281 16.1001H6.5281C6.8581 16.1001 7.1281 16.3701 7.1281 16.7001V19.7001C7.1281 20.0301 6.8581 20.3001 6.5281 20.3001H3.5281C3.1981 20.3001 2.9281 20.0301 2.9281 19.7001V16.7001C2.9281 16.3701 3.1981 16.1001 3.5281 16.1001ZM4.1281 19.1001H5.9281V17.3001H4.1281V19.1001ZM9.72817 6.4002H20.7282C21.0582 6.4002 21.3282 6.1302 21.3282 5.8002C21.3282 5.4702 21.0582 5.2002 20.7282 5.2002H9.72817C9.39817 5.2002 9.12817 5.4702 9.12817 5.8002C9.12817 6.1302 9.39817 6.4002 9.72817 6.4002ZM9.72817 11.4001H20.7282C21.0582 11.4001 21.3282 11.6701 21.3282 12.0001C21.3282 12.3301 21.0582 12.6001 20.7282 12.6001H9.72817C9.39817 12.6001 9.12817 12.3301 9.12817 12.0001C9.12817 11.6701 9.39817 11.4001 9.72817 11.4001ZM9.72817 17.6001H20.7282C21.0582 17.6001 21.3282 17.8701 21.3282 18.2001C21.3282 18.5301 21.0582 18.8001 20.7282 18.8001H9.72817C9.39817 18.8001 9.12817 18.5301 9.12817 18.2001C9.12817 17.8701 9.39817 17.6001 9.72817 17.6001Z"/></svg>',
+            },
+            {
+                name: 'ordered-list',
+                action: EasyMDE.toggleOrderedList,
+                title: i18n.global.t('input.editor.orderedList'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4.19494 8.29994H5.99494C6.26494 8.29994 6.49494 8.07995 6.49494 7.79994C6.49494 7.51995 6.27494 7.29994 5.99494 7.29994H5.59494V3.79994C5.59494 3.62994 5.50494 3.46994 5.36494 3.37994C5.22494 3.28994 5.04494 3.26994 4.89494 3.33994L3.89494 3.76994C3.64494 3.87994 3.52494 4.17994 3.63494 4.42994C3.74494 4.67994 4.03494 4.79994 4.29494 4.68994L4.59494 4.55994V7.29994H4.19494C3.91494 7.29994 3.69494 7.51995 3.69494 7.79994C3.69494 8.07995 3.91494 8.29994 4.19494 8.29994ZM20.195 6.39995H9.19497C8.86497 6.39995 8.59497 6.12995 8.59497 5.79995C8.59497 5.46995 8.86497 5.19995 9.19497 5.19995H20.195C20.525 5.19995 20.795 5.46995 20.795 5.79995C20.795 6.12995 20.525 6.39995 20.195 6.39995ZM3.78486 14.36H6.37486C6.65486 14.36 6.87486 14.14 6.87486 13.86C6.87486 13.58 6.65486 13.36 6.37486 13.36H4.88486C5.00486 13.23 5.12486 13.09 5.23486 12.95C5.26626 12.9151 5.29645 12.8802 5.32626 12.8458L5.32629 12.8457C5.38192 12.7814 5.43627 12.7186 5.49486 12.66C5.73486 12.4 5.98486 12.12 6.17486 11.79C6.47486 11.25 6.41486 10.63 6.01486 10.17C5.57486 9.66 4.86486 9.5 4.24486 9.74C3.74486 9.95 3.39486 10.35 3.22486 10.91C3.14486 11.18 3.29486 11.46 3.56486 11.54C3.82486 11.61 4.10486 11.46 4.18486 11.2C4.29486 10.85 4.48486 10.73 4.62486 10.67C4.88486 10.57 5.13486 10.68 5.26486 10.82C5.38486 10.96 5.40486 11.12 5.30486 11.29C5.17595 11.5202 4.99618 11.7165 4.80458 11.9257L4.75486 11.98C4.67298 12.0801 4.58283 12.1801 4.49946 12.2727L4.49945 12.2727L4.47486 12.3C4.12486 12.72 3.76486 13.13 3.40486 13.53C3.27486 13.68 3.23486 13.9 3.32486 14.07C3.41486 14.24 3.58486 14.36 3.78486 14.36ZM3.68486 20.3699C4.04486 20.5899 4.46486 20.6999 4.87486 20.6999C5.13486 20.6999 5.38486 20.6499 5.61486 20.5499C6.31486 20.2799 6.73486 19.5599 6.60486 18.8799C6.53486 18.5499 6.35486 18.2899 6.12486 18.0899C6.32486 17.8999 6.45486 17.6499 6.50486 17.3799C6.57486 17.0099 6.49486 16.6299 6.27486 16.3099C5.85486 15.6899 5.07486 15.5199 4.10486 15.8299C3.83486 15.9199 3.69486 16.1999 3.77486 16.4599C3.86486 16.7299 4.14486 16.8699 4.40486 16.7899C4.70486 16.6999 5.24486 16.5799 5.45486 16.8899C5.51486 16.9899 5.54486 17.0999 5.52486 17.1999C5.51486 17.2699 5.47486 17.3599 5.36486 17.4299C5.26486 17.4999 5.12486 17.5399 4.95486 17.5799L4.77486 17.6299C4.54486 17.6999 4.40486 17.9099 4.41486 18.1499C4.42486 18.3899 4.61486 18.5799 4.84486 18.6099C5.20486 18.6599 5.58486 18.8299 5.63486 19.0799C5.67486 19.2999 5.46486 19.5499 5.25486 19.6299C4.94486 19.7599 4.52486 19.7099 4.21486 19.5199C3.97486 19.3699 3.67486 19.4399 3.52486 19.6799C3.37486 19.9199 3.44486 20.2299 3.68486 20.3699ZM20.195 18.7999H9.19497C8.86497 18.7999 8.59497 18.5299 8.59497 18.1999C8.59497 17.8699 8.86497 17.5999 9.19497 17.5999H20.195C20.525 17.5999 20.795 17.8699 20.795 18.1999C20.795 18.5299 20.525 18.7999 20.195 18.7999ZM9.19497 12.5999H20.195C20.525 12.5999 20.795 12.3299 20.795 11.9999C20.795 11.6699 20.525 11.3999 20.195 11.3999H9.19497C8.86497 11.3999 8.59497 11.6699 8.59497 11.9999C8.59497 12.3299 8.86497 12.5999 9.19497 12.5999Z"/></svg>',
+            },
+            '|',
+            {
+                name: 'clean-block',
+                action: EasyMDE.cleanBlock,
+                title: i18n.global.t('input.editor.cleanBlock'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.25989 6.18384H20.4513C20.7823 6.18384 21.0509 6.45239 21.0509 6.78345V17.9749C21.0509 18.3059 20.7823 18.5745 20.4513 18.5745H9.25989C9.0929 18.5745 8.93469 18.5061 8.82043 18.384L3.6095 12.7883C3.39563 12.5579 3.39563 12.2004 3.6095 11.97L8.82043 6.37427C8.93469 6.2522 9.0929 6.18384 9.25989 6.18384ZM9.52063 17.3752H19.8517V7.38306H9.52063L4.86926 12.3792L9.52063 17.3752ZM12.7755 15.0686C12.6222 15.0686 12.4679 15.01 12.3517 14.8928C12.1173 14.6584 12.1173 14.2786 12.3517 14.0452L14.0503 12.3469L12.3517 10.6487C12.1173 10.4153 12.1173 10.0354 12.3517 9.80103C12.5841 9.56665 12.965 9.56665 13.1993 9.80103L14.8981 11.4994L16.5968 9.80103C16.8312 9.56665 17.212 9.56665 17.4445 9.80103C17.6788 10.0354 17.6788 10.4153 17.4445 10.6487L15.7458 12.3469L17.4445 14.0452C17.6788 14.2786 17.6788 14.6584 17.4445 14.8928C17.3282 15.01 17.174 15.0686 17.0206 15.0686C16.8673 15.0686 16.714 15.01 16.5968 14.8928L14.8981 13.1945L13.1993 14.8928C13.0822 15.01 12.9288 15.0686 12.7755 15.0686Z"/></svg>',
+            },
+            {
+                name: 'link',
+                action: EasyMDE.drawLink,
+                title: i18n.global.t('input.editor.link'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.4399 15.3452C11.4999 15.3652 11.5699 15.3752 11.6299 15.3752C11.8799 15.3752 12.1199 15.2152 12.1999 14.9652C12.2999 14.6452 12.1299 14.3052 11.8199 14.2052C11.3499 14.0452 10.9299 13.7852 10.5699 13.4152C10.1999 13.0552 9.9399 12.6452 9.7799 12.1552C9.6599 11.8252 9.5999 11.4652 9.5999 11.0952C9.5999 10.2152 9.9399 9.38518 10.5699 8.75518L15.1599 4.15518C16.4499 2.87518 18.5399 2.87518 19.8299 4.15518C20.4499 4.78518 20.7899 5.61518 20.7899 6.49518C20.7899 7.37518 20.4499 8.20518 19.8299 8.82518L16.7399 11.9052C16.5099 12.1452 16.5099 12.5252 16.7399 12.7552C16.9799 12.9852 17.3599 12.9852 17.5899 12.7552L20.6799 9.67518C21.5299 8.83518 21.9999 7.69518 21.9999 6.49518C21.9999 5.29518 21.5299 4.16518 20.6899 3.30518C18.9299 1.55518 16.0799 1.55518 14.3199 3.30518L9.7299 7.90518C8.8699 8.75518 8.3999 9.88518 8.3999 11.0952C8.3999 11.6152 8.4899 12.1152 8.6499 12.5552C8.8599 13.1952 9.2399 13.7952 9.7199 14.2652C10.1999 14.7552 10.7999 15.1352 11.4399 15.3452ZM3.32 20.6851C4.2 21.5551 5.35 21.9951 6.5 21.9951C7.65 21.9951 8.81 21.5551 9.69 20.7051L14.28 16.1051C15.14 15.2551 15.61 14.1251 15.61 12.9151C15.61 12.4551 15.54 11.9951 15.4 11.5551C15.17 10.8651 14.8 10.2551 14.28 9.73509C13.76 9.21509 13.15 8.84509 12.46 8.61509C12.14 8.51509 11.8 8.68509 11.7 8.99509C11.6 9.30509 11.77 9.64509 12.1 9.75509C12.61 9.91509 13.06 10.1951 13.44 10.5751C13.82 10.9551 14.09 11.4051 14.26 11.9151C14.36 12.2351 14.41 12.5651 14.41 12.9051C14.41 13.7951 14.06 14.6251 13.43 15.2451L8.84 19.8451C7.55 21.1251 5.46 21.1251 4.17 19.8451C3.55 19.2151 3.21 18.3951 3.21 17.5051C3.21 16.6151 3.55 15.7851 4.17 15.1651L7.35 11.9851C7.58 11.7451 7.59 11.3651 7.35 11.1351C7.11 10.9051 6.73 10.9051 6.5 11.1351L3.32 14.3151C2.47 15.1551 2 16.2851 2 17.4951C2 18.7051 2.47 19.8351 3.32 20.6851Z"/></svg>',
+            },
+            {
+                name: 'image',
+                action: EasyMDE.drawImage,
+                title: i18n.global.t('input.editor.image'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4 4C2.89543 4 2 4.89543 2 6V16V17.5152V18C2 19.1046 2.89543 20 4 20H20C21.0528 20 21.9156 19.1866 21.9942 18.1539L22 18.1632V18V16V6C22 4.89543 21.1046 4 20 4H4ZM3.2 17.7V16.5642L6.78192 13.7254C6.8616 13.6622 6.97597 13.6689 7.04776 13.7409L10.3126 17.0146C10.7026 17.4056 11.3357 17.4065 11.7268 17.0165C11.7606 16.9827 11.792 16.9465 11.8207 16.9083L16.736 10.352C16.8023 10.2636 16.9277 10.2457 17.016 10.312C17.0355 10.3265 17.0521 10.3445 17.0651 10.365L20.8 16.2669V17.7C20.8 18.3075 20.3075 18.8 19.7 18.8H4.3C3.69249 18.8 3.2 18.3075 3.2 17.7ZM17.3865 8.61836L20.8 14.08V6.3C20.8 5.69249 20.3075 5.2 19.7 5.2H4.3C3.69249 5.2 3.2 5.69249 3.2 6.3V15.04L6.65054 12.2796C6.84949 12.1204 7.13629 12.1363 7.31645 12.3164L10.8369 15.8369C10.915 15.915 11.0417 15.915 11.1198 15.8369C11.1265 15.8302 16.5625 8.58336 16.5625 8.58336C16.7282 8.36245 17.0416 8.31768 17.2625 8.48336C17.3118 8.52034 17.3538 8.56611 17.3865 8.61836ZM8 8.5C8 9.32843 7.32843 10 6.5 10C5.67157 10 5 9.32843 5 8.5C5 7.67157 5.67157 7 6.5 7C7.32843 7 8 7.67157 8 8.5Z"/></svg>',
+            },
+            {
+                name: 'table',
+                action: EasyMDE.drawTable,
+                title: i18n.global.t('input.editor.table'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.18524 3.08496H19.4152C20.6752 3.08496 21.7152 4.11496 21.7152 5.38496V18.615C21.7152 19.885 20.6852 20.915 19.4152 20.915H6.18524C4.91524 20.915 3.88525 19.885 3.88525 18.615V5.38496C3.88525 4.11496 4.91524 3.08496 6.18524 3.08496ZM19.4052 19.705C20.0152 19.705 20.5052 19.215 20.5052 18.605H20.5153V5.38496C20.5153 4.77496 20.0252 4.28496 19.4152 4.28496H6.18524C5.57524 4.28496 5.08521 4.77496 5.08521 5.38496V18.605C5.08521 19.215 5.57524 19.705 6.18524 19.705H19.4052ZM17.4453 9.15503H8.15527C7.82527 9.15503 7.5553 9.42503 7.5553 9.75503C7.5553 10.085 7.82527 10.355 8.15527 10.355H17.4453C17.7753 10.355 18.0453 10.085 18.0453 9.75503C18.0453 9.42503 17.7753 9.15503 17.4453 9.15503ZM17.4453 13.635H8.15527C7.82527 13.635 7.5553 13.905 7.5553 14.235C7.5553 14.565 7.82527 14.835 8.15527 14.835H17.4453C17.7753 14.835 18.0453 14.565 18.0453 14.235C18.0453 13.905 17.7753 13.635 17.4453 13.635Z"/></svg>',
+            },
+            {
+                name: 'horizontal-rule',
+                action: EasyMDE.drawHorizontalRule,
+                title: i18n.global.t('input.editor.horizontalRule'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 13H3C2.45 13 2 12.55 2 12C2 11.45 2.45 11 3 11H21C21.55 11 22 11.45 22 12C22 12.55 21.55 13 21 13Z"/></svg>',
+            },
+            '|',
+            {
+                name: 'side-by-side',
+                action: EasyMDE.toggleSideBySide,
+                title: i18n.global.t('input.editor.sideBySide'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.4787 14.58C18.3587 14.69 18.2987 14.85 18.2987 15C18.2987 15.15 18.3587 15.31 18.4787 15.42C18.7187 15.65 19.0987 15.65 19.3287 15.42L22.3287 12.42C22.5587 12.18 22.5587 11.8 22.3287 11.57L19.3287 8.56996C19.0887 8.33996 18.7087 8.33996 18.4787 8.56996C18.2487 8.80996 18.2487 9.18996 18.4787 9.41996L20.451 11.3999L14.4487 11.3999L14.4487 4.6C14.4487 4.27 14.1787 4 13.8487 4C13.5187 4 13.2487 4.27 13.2487 4.6L13.2487 19.4C13.2487 19.73 13.5187 20 13.8487 20C14.1787 20 14.4487 19.73 14.4487 19.4L14.4487 12.5999L20.4511 12.5999L18.4787 14.58ZM9.54878 19.4L9.54878 12.5999L3.5486 12.5999L5.52867 14.58C5.75867 14.81 5.75867 15.19 5.52867 15.43C5.29867 15.66 4.91867 15.66 4.67867 15.43L1.67867 12.43C1.63274 12.384 1.5956 12.3323 1.56725 12.2774C1.53058 12.2077 1.50724 12.1299 1.50068 12.0477C1.49934 12.0317 1.49867 12.0158 1.49867 12C1.49867 11.9841 1.49933 11.9682 1.50067 11.9522C1.51454 11.778 1.60365 11.6242 1.73526 11.5234L4.67867 8.57997C4.90867 8.34997 5.28867 8.34997 5.52867 8.57997C5.75867 8.80997 5.75867 9.18997 5.52867 9.42997L3.55107 11.3999L9.54878 11.3999L9.54878 4.6C9.54878 4.27 9.81878 4 10.1488 4C10.4788 4 10.7488 4.27 10.7488 4.6L10.7488 11.9999L10.7488 19.4C10.7488 19.73 10.4788 20 10.1488 20C9.81878 20 9.54878 19.73 9.54878 19.4Z"/></svg>',
+            },
+            {
+                name: 'guide',
+                action() {
+                    window.open('https://www.markdownguide.org/basic-syntax/', '_blank')
+                },
+                title: i18n.global.t('input.editor.guide'),
+                icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19.4999 2.3999H6.4999C5.0699 2.3999 3.8999 3.5699 3.8999 4.9999V18.9999C3.8999 20.4299 5.0699 21.5999 6.4999 21.5999H19.4999C19.8299 21.5999 20.0999 21.3299 20.0999 20.9999V16.9999V2.9999C20.0999 2.6699 19.8299 2.3999 19.4999 2.3999ZM5.0999 4.9999V16.8118C5.50468 16.5513 5.98546 16.3999 6.4999 16.3999H18.8999V3.5999H6.4999C5.7299 3.5999 5.0999 4.2299 5.0999 4.9999ZM6.4999 17.5999H18.8999V20.3999H6.4999C5.7299 20.3999 5.0999 19.7699 5.0999 18.9999C5.0999 18.2299 5.7299 17.5999 6.4999 17.5999ZM8.4999 8.5999H15.4999C15.8299 8.5999 16.0999 8.3299 16.0999 7.9999C16.0999 7.6699 15.8299 7.3999 15.4999 7.3999H8.4999C8.1699 7.3999 7.8999 7.6699 7.8999 7.9999C7.8999 8.3299 8.1699 8.5999 8.4999 8.5999ZM15.4999 11.3999H8.4999C8.1699 11.3999 7.8999 11.6699 7.8999 11.9999C7.8999 12.3299 8.1699 12.5999 8.4999 12.5999H15.4999C15.8299 12.5999 16.0999 12.3299 16.0999 11.9999C16.0999 11.6699 15.8299 11.3999 15.4999 11.3999Z"/></svg>',
+            },
+        ],
+    }
+}
\ No newline at end of file
diff --git a/src/components/input/fancycheckbox.vue b/src/components/input/fancycheckbox.vue
index b39a7736..d8e162de 100644
--- a/src/components/input/fancycheckbox.vue
+++ b/src/components/input/fancycheckbox.vue
@@ -2,7 +2,7 @@
 	<div :class="{'is-disabled': disabled}" class="fancycheckbox">
 		<input
 			:checked="checked"
-			:disabled="disabled"
+			:disabled="disabled || null"
 			:id="checkBoxId"
 			@change="(event) => updateData(event.target.checked)"
 			style="display: none;"
@@ -21,16 +21,18 @@
 </template>
 
 <script>
+import {createRandomID} from '@/helpers/randomId'
+
 export default {
 	name: 'fancycheckbox',
 	data() {
 		return {
 			checked: false,
-			checkBoxId: 'fancycheckbox' + Math.random(),
+			checkBoxId: `fancycheckbox_${createRandomID()}`,
 		}
 	},
 	props: {
-		value: {
+		modelValue: {
 			required: false,
 		},
 		disabled: {
@@ -39,10 +41,11 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['update:modelValue', 'change'],
 	watch: {
-		value: {
-			handler(value) {
-				this.checked = value
+		modelValue: {
+			handler(modelValue) {
+				this.checked = modelValue
 
 			},
 			immediate: true,
@@ -51,7 +54,7 @@ export default {
 	methods: {
 		updateData(checked) {
 			this.checked = checked
-			this.$emit('input', checked)
+			this.$emit('update:modelValue', checked)
 			this.$emit('change', checked)
 		},
 	},
diff --git a/src/components/input/multiselect.vue b/src/components/input/multiselect.vue
index f5965ee4..f904d483 100644
--- a/src/components/input/multiselect.vue
+++ b/src/components/input/multiselect.vue
@@ -81,16 +81,9 @@
 </template>
 
 <script>
+import { i18n } from '@/i18n'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
-/**
- * Available events:
- *   @search: Triggered every time the search query input changes
- *   @select: Triggered every time an option from the search results is selected. Also triggers a change in v-model.
- *   @create: If nothing or no exact match was found and `creatable` is true, this event is triggered with the current value of the search query.
- *   @remove: If `multiple` is enabled, this will be fired every time an item is removed from the array of selected items.
- */
-
 export default {
 	name: 'multiselect',
 	data() {
@@ -133,7 +126,7 @@ export default {
 			},
 		},
 		// The object with the value, updated every time an entry is selected.
-		value: {
+		modelValue: {
 			default() {
 				return null
 			},
@@ -149,14 +142,14 @@ export default {
 		createPlaceholder: {
 			type: String,
 			default() {
-				return this.$t('input.multiselect.createPlaceholder')
+				return i18n.global.t('input.multiselect.createPlaceholder')
 			},
 		},
 		// The text shown next to an option.
 		selectPlaceholder: {
 			type: String,
 			default() {
-				return this.$t('input.multiselect.selectPlaceholder')
+				return i18n.global.t('input.multiselect.selectPlaceholder')
 			},
 		},
 		// If true, allows for selecting multiple items. v-model will be an array with all selected values in that case.
@@ -188,18 +181,29 @@ export default {
 			},
 		},
 	},
+	
+	/**
+	 * Available events:
+	 *   @search: Triggered every time the search query input changes
+	 *   @select: Triggered every time an option from the search results is selected. Also triggers a change in v-model.
+	 *   @create: If nothing or no exact match was found and `creatable` is true, this event is triggered with the current value of the search query.
+	 *   @remove: If `multiple` is enabled, this will be fired every time an item is removed from the array of selected items.
+	 */
+	emits: ['update:modelValue', 'search', 'select', 'create', 'remove'],
+
 	mounted() {
 		document.addEventListener('click', this.hideSearchResultsHandler)
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		document.removeEventListener('click', this.hideSearchResultsHandler)
 	},
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.setSelectedObject(value)
 			},
 			immediate: true,
+			deep: true,
 		},
 	},
 	computed: {
@@ -278,13 +282,13 @@ export default {
 				this.internalValue = object
 			}
 
-			this.$emit('input', this.internalValue)
+			this.$emit('update:modelValue', this.internalValue)
 			this.$emit('select', object)
 			this.setSelectedObject(object)
 			this.closeSearchResults()
 		},
 		setSelectedObject(object, resetOnly = false) {
-			this.$set(this, 'internalValue', object)
+			this.internalValue = object
 
 			// We assume we're getting an array when multiple is enabled and can therefore leave the query
 			// value etc as it is
@@ -352,7 +356,7 @@ export default {
 				}
 			}
 
-			this.$emit('input', this.internalValue)
+			this.$emit('update:modelValue', this.internalValue)
 			this.$emit('remove', item)
 		},
 		focus() {
diff --git a/src/components/input/vue-easymde/vue-easymde.css b/src/components/input/vue-easymde/vue-easymde.css
new file mode 100644
index 00000000..d5b7f2e7
--- /dev/null
+++ b/src/components/input/vue-easymde/vue-easymde.css
@@ -0,0 +1,374 @@
+.EasyMDEContainer {
+    display: block;
+}
+
+.EasyMDEContainer.sided--no-fullscreen {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.EasyMDEContainer .CodeMirror {
+    box-sizing: border-box;
+    height: auto;
+    border: 1px solid #ddd;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    padding: 10px;
+    font: inherit;
+    z-index: 0;
+    word-wrap: break-word;
+}
+
+.EasyMDEContainer .CodeMirror-scroll {
+    cursor: text;
+}
+
+.EasyMDEContainer .CodeMirror-fullscreen {
+    background: #fff;
+    position: fixed !important;
+    top: 50px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: auto;
+    z-index: 8;
+    border-right: none !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+.EasyMDEContainer .CodeMirror-sided {
+    width: 50% !important;
+}
+
+.EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided {
+    border-right: none!important;
+    border-bottom-right-radius: 0px;
+    position: relative;
+    flex: 1 1 auto;
+}
+
+.EasyMDEContainer .CodeMirror-placeholder {
+    opacity: .5;
+}
+
+.EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
+    background: #d9d9d9;
+}
+
+.editor-toolbar {
+    position: relative;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+    padding: 9px 10px;
+    border-top: 1px solid #bbb;
+    border-left: 1px solid #bbb;
+    border-right: 1px solid #bbb;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+.editor-toolbar.fullscreen {
+    width: 100%;
+    height: 50px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    box-sizing: border-box;
+    background: #fff;
+    border: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    opacity: 1;
+    z-index: 9;
+}
+
+.editor-toolbar.fullscreen::before {
+    width: 20px;
+    height: 50px;
+    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
+    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    position: fixed;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+}
+
+.editor-toolbar.fullscreen::after {
+    width: 20px;
+    height: 50px;
+    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
+    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    position: fixed;
+    top: 0;
+    right: 0;
+    margin: 0;
+    padding: 0;
+}
+
+.EasyMDEContainer.sided--no-fullscreen .editor-toolbar {
+    width: 100%;
+}
+
+.editor-toolbar button, .editor-toolbar .easymde-dropdown {
+    background: transparent;
+    display: inline-block;
+    text-align: center;
+    text-decoration: none !important;
+    height: 30px;
+    margin: 0;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.editor-toolbar button {
+    width: 30px;
+}
+
+.editor-toolbar button.active,
+.editor-toolbar button:hover {
+    background: #fcfcfc;
+    border-color: #95a5a6;
+}
+
+.editor-toolbar i.separator {
+    display: inline-block;
+    width: 0;
+    border-left: 1px solid #d9d9d9;
+    border-right: 1px solid #fff;
+    color: transparent;
+    text-indent: -10px;
+    margin: 0 6px;
+}
+
+.editor-toolbar button:after {
+    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+    font-size: 65%;
+    vertical-align: text-bottom;
+    position: relative;
+    top: 2px;
+}
+
+.editor-toolbar button.heading-1:after {
+    content: "1";
+}
+
+.editor-toolbar button.heading-2:after {
+    content: "2";
+}
+
+.editor-toolbar button.heading-3:after {
+    content: "3";
+}
+
+.editor-toolbar button.heading-bigger:after {
+    content: "▲";
+}
+
+.editor-toolbar button.heading-smaller:after {
+    content: "▼";
+}
+
+.editor-toolbar.disabled-for-preview button:not(.no-disable) {
+    opacity: .6;
+    pointer-events: none;
+}
+
+@media only screen and (max-width: 700px) {
+    .editor-toolbar i.no-mobile {
+        display: none;
+    }
+}
+
+.editor-statusbar {
+    padding: 8px 10px;
+    font-size: 12px;
+    color: #959694;
+    text-align: right;
+}
+
+.EasyMDEContainer.sided--no-fullscreen .editor-statusbar {
+    width: 100%;
+}
+
+.editor-statusbar span {
+    display: inline-block;
+    min-width: 4em;
+    margin-left: 1em;
+}
+
+.editor-statusbar .lines:before {
+    content: 'lines: '
+}
+
+.editor-statusbar .words:before {
+    content: 'words: '
+}
+
+.editor-statusbar .characters:before {
+    content: 'characters: '
+}
+
+.editor-preview-full {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 7;
+    overflow: auto;
+    display: none;
+    box-sizing: border-box;
+}
+
+.editor-preview-side {
+    position: fixed;
+    bottom: 0;
+    width: 50%;
+    top: 50px;
+    right: 0;
+    z-index: 9;
+    overflow: auto;
+    display: none;
+    box-sizing: border-box;
+    border: 1px solid #ddd;
+    word-wrap: break-word;
+}
+
+.editor-preview-active-side {
+    display: block
+}
+
+.EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side {
+    flex: 1 1 auto;
+    height: auto;
+    position: static;
+}
+
+.editor-preview-active {
+    display: block
+}
+
+.editor-preview {
+    padding: 10px;
+    background: #fafafa;
+}
+
+.editor-preview > p {
+    margin-top: 0
+}
+
+.editor-preview pre {
+    background: #eee;
+    margin-bottom: 10px;
+}
+
+.editor-preview table td,
+.editor-preview table th {
+    border: 1px solid #ddd;
+    padding: 5px;
+}
+
+.cm-s-easymde .cm-tag {
+    color: #63a35c;
+}
+
+.cm-s-easymde .cm-attribute {
+    color: #795da3;
+}
+
+.cm-s-easymde .cm-string {
+    color: #183691;
+}
+
+.cm-s-easymde .cm-header-1 {
+    font-size: 200%;
+    line-height: 200%;
+}
+
+.cm-s-easymde .cm-header-2 {
+    font-size: 160%;
+    line-height: 160%;
+}
+
+.cm-s-easymde .cm-header-3 {
+    font-size: 125%;
+    line-height: 125%;
+}
+
+.cm-s-easymde .cm-header-4 {
+    font-size: 110%;
+    line-height: 110%;
+}
+
+.cm-s-easymde .cm-comment {
+    background: rgba(0, 0, 0, .05);
+    border-radius: 2px;
+}
+
+.cm-s-easymde .cm-link {
+    color: #7f8c8d;
+}
+
+.cm-s-easymde .cm-url {
+    color: #aab2b3;
+}
+
+.cm-s-easymde .cm-quote {
+    color: #7f8c8d;
+    font-style: italic;
+}
+
+.editor-toolbar .easymde-dropdown {
+    position: relative;
+    background: linear-gradient(to bottom right, #fff 0%, #fff 84%, #333 50%, #333 100%);
+    border-radius: 0;
+    border: 1px solid #fff;
+}
+
+.editor-toolbar .easymde-dropdown:hover {
+    background: linear-gradient(to bottom right, #fff 0%, #fff 84%, #333 50%, #333 100%);
+}
+
+.easymde-dropdown-content {
+    display: block;
+    visibility: hidden;
+    position: absolute;
+    background-color: #f9f9f9;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    padding: 8px;
+    z-index: 2;
+    top: 30px;
+}
+
+.easymde-dropdown:active .easymde-dropdown-content,
+.easymde-dropdown:focus .easymde-dropdown-content {
+    visibility: visible;
+}
+
+span[data-img-src]::after{
+    content: '';
+    background-image: var(--bg-image);
+    display: block;
+    max-height: 100%;
+    max-width: 100%;
+    background-size: contain;
+    height: 0;
+    padding-top: var(--height);
+    width: var(--width);
+    background-repeat: no-repeat;
+}
\ No newline at end of file
diff --git a/src/components/input/vue-easymde/vue-easymde.vue b/src/components/input/vue-easymde/vue-easymde.vue
new file mode 100644
index 00000000..a252bae5
--- /dev/null
+++ b/src/components/input/vue-easymde/vue-easymde.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="vue-easymde">
+    <textarea
+      class="vue-simplemde-textarea"
+      :name="name"
+      :value="modelValue"
+      @input="handleInput($event.target.value)"
+    />
+  </div>
+</template>
+
+<script>
+import EasyMDE from 'easymde'
+import marked from 'marked'
+
+export default {
+  name: 'vue-easymde',
+  props: {
+    modelValue: String,
+    name: String,
+    previewClass: String,
+    autoinit: {
+      type: Boolean,
+      default: true,
+    },
+    highlight: {
+      type: Boolean,
+      default: false,
+    },
+    sanitize: {
+      type: Boolean,
+      default: false,
+    },
+    configs: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+    previewRender: {
+      type: Function,
+    },
+  },
+	emits: ['update:modelValue', 'blur', 'initialized'],
+  data() {
+    return {
+      isValueUpdateFromInner: false,
+      easymde: null,
+    }
+  },
+  mounted() {
+    if (this.autoinit) this.initialize()
+  },
+  deactivated() {
+    const editor = this.easymde
+    if (!editor) return
+    const isFullScreen = editor.codemirror.getOption('fullScreen')
+    if (isFullScreen) editor.toggleFullScreen()
+  },
+	beforeUnmount() {
+		if (this.easymde) {
+			this.easymde.toTextArea()
+			this.easymde.cleanup()
+			this.easymde = null
+		}
+	},
+  methods: {
+    initialize() {
+      const configs = Object.assign({
+        element: this.$el.firstElementChild,
+        initialValue: this.modelValue,
+        previewRender: this.previewRender,
+        renderingConfig: {},
+      }, this.configs)
+
+      // Synchronize the values of value and initialValue
+      if (configs.initialValue) {
+        this.$emit('update:modelValue', configs.initialValue)
+      }
+
+      // Determine whether to enable code highlighting
+      if (this.highlight) {
+        configs.renderingConfig.codeSyntaxHighlighting = true
+      }
+
+      // Set whether to render the input html
+      marked.setOptions({ sanitize: this.sanitize })
+
+      // Instantiated editor
+      this.easymde = new EasyMDE(configs)
+
+      // Add a custom previewClass
+      const className = this.previewClass || ''
+      this.addPreviewClass(className)
+
+      // Binding event
+      this.bindingEvents()
+
+      this.$nextTick(() => {
+        this.$emit('initialized', this.easymde)
+      })
+    },
+
+    addPreviewClass(className) {
+      const wrapper = this.easymde.codemirror.getWrapperElement()
+      const preview = document.createElement('div')
+      wrapper.nextSibling.className += ` ${className}`
+      preview.className = `editor-preview ${className}`
+      wrapper.appendChild(preview)
+    },
+
+		bindingEvents() {
+      this.easymde.codemirror.on('change', this.handleCodemirrorInput)
+      this.easymde.codemirror.on('blur', this.handleCodemirrorBlur)
+    },
+
+    handleCodemirrorInput(instance, changeObj)  {
+			if (changeObj.origin === 'setValue') {
+				return
+			}
+			const val = this.easymde.value()
+			this.handleInput(val)
+		},
+
+    handleCodemirrorBlur() {
+			const val = this.easymde.value()
+      this.isValueUpdateFromInner = true
+      this.$emit('blur', val)
+    },
+
+    handleInput(val) {
+      this.isValueUpdateFromInner = true
+      this.$emit('update:modelValue', val)
+    },
+  },
+
+  watch: {
+    modelValue(val) {
+      if (this.isValueUpdateFromInner) {
+        this.isValueUpdateFromInner = false
+      } else {
+        this.easymde.value(val)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.vue-easymde .markdown-body {
+padding: 0.5em
+}
+
+.vue-easymde .editor-preview-active, .vue-easymde .editor-preview-active-side {
+display: block;
+}
+</style>
diff --git a/src/components/list/list-settings-dropdown.vue b/src/components/list/list-settings-dropdown.vue
index fb9ae104..35fc6356 100644
--- a/src/components/list/list-settings-dropdown.vue
+++ b/src/components/list/list-settings-dropdown.vue
@@ -2,13 +2,13 @@
 	<dropdown>
 		<template v-if="isSavedFilter">
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.settings.edit`, params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.edit`, params: { listId: list.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.settings.delete`, params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.delete`, params: { listId: list.id } }"
 				icon="trash-alt"
 			>
 				{{ $t('misc.delete') }}
@@ -16,7 +16,7 @@
 		</template>
 		<template v-else-if="list.isArchived">
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.settings.archive`, params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.archive`, params: { listId: list.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.unarchive') }}
@@ -24,32 +24,32 @@
 		</template>
 		<template v-else>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.settings.edit`, params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.edit`, params: { listId: list.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.settings.background`, params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.background`, params: { listId: list.id } }"
 				v-if="backgroundsEnabled"
 				icon="image"
 			>
 				{{ $t('menu.setBackground') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.settings.share`, params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.share`, params: { listId: list.id } }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.settings.duplicate`, params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.duplicate`, params: { listId: list.id } }"
 				icon="paste"
 			>
 				{{ $t('menu.duplicate') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.settings.archive`, params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.archive`, params: { listId: list.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.archive') }}
@@ -63,7 +63,7 @@
 				@change="sub => subscription = sub"
 			/>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.settings.delete`, params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.delete`, params: { listId: list.id } }"
 				icon="trash-alt"
 				class="has-text-danger"
 			>
@@ -106,15 +106,19 @@ export default {
 		listRoutePrefix() {
 			let name = 'list'
 
+
 			if (this.$route.name !== null && this.$route.name.startsWith('list.')) {
-				name = this.$route.name
+				// HACK: we should implement a better routing for the modals
+				const settingsRoutes = ['edit', 'delete', 'archive', 'background', 'share', 'duplicate']
+				const suffix = settingsRoutes.find((route) => this.$route.name.endsWith(`.settings.${route}`))
+				name = this.$route.name.replace(`.settings.${suffix}`,'')
 			}
 
 			if (this.isSavedFilter) {
 				name = name.replace('list.', 'filter.')
 			}
 
-			return name
+			return `${name}.settings`
 		},
 		isSavedFilter() {
 			return getSavedFilterIdFromListId(this.list.id) > 0
diff --git a/src/components/list/partials/filter-popup.vue b/src/components/list/partials/filter-popup.vue
index 011b5912..e761fb9e 100644
--- a/src/components/list/partials/filter-popup.vue
+++ b/src/components/list/partials/filter-popup.vue
@@ -1,9 +1,8 @@
 <template>
 	<transition name="fade">
 		<filters
-			@change="change"
 			v-if="visibleInternal"
-			v-model="params"
+			v-model="value"
 			ref="filters"
 		/>
 	</transition>
@@ -15,23 +14,42 @@ import Filters from '../../../components/list/partials/filters'
 
 export default {
 	name: 'filter-popup',
+	components: {
+		Filters,
+	},
+	props: {
+		modelValue: {
+			required: true,
+		},
+		visible: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['update:modelValue'],
 	data() {
 		return {
-			params: null,
 			visibleInternal: false,
 		}
 	},
-	components: {
-		Filters,
+	computed: {
+		value: {
+			get() {
+				return this.modelValue
+			},
+			set(value) {
+				this.$emit('update:modelValue', value)
+			},
+		},
 	},
 	mounted() {
 		document.addEventListener('click', this.hidePopup)
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		document.removeEventListener('click', this.hidePopup)
 	},
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.params = value
 			},
@@ -41,26 +59,15 @@ export default {
 			this.visibleInternal = !this.visibleInternal
 		},
 	},
-	props: {
-		value: {
-			required: true,
-		},
-		visible: {
-			type: Boolean,
-			default: false,
-		},
-	},
 	methods: {
-		change() {
-			this.$emit('change', this.params)
-			this.$emit('input', this.params)
-		},
 		hidePopup(e) {
-			if (this.visibleInternal) {
-				closeWhenClickedOutside(e, this.$refs.filters.$el, () => {
-					this.visibleInternal = false
-				})
+			if (!this.visibleInternal) {
+				return
 			}
+
+			closeWhenClickedOutside(e, this.$refs.filters.$el, () => {
+				this.visibleInternal = false
+			})
 		},
 	},
 }
diff --git a/src/components/list/partials/filters.vue b/src/components/list/partials/filters.vue
index d9a25f3a..d7679353 100644
--- a/src/components/list/partials/filters.vue
+++ b/src/components/list/partials/filters.vue
@@ -35,7 +35,7 @@
 			<label class="label">{{ $t('task.attributes.priority') }}</label>
 			<div class="control single-value-control">
 				<priority-select
-					:disabled="!filters.usePriority"
+					:disabled="!filters.usePriority || null"
 					v-model.number="filters.priority"
 					@change="setPriority"
 				/>
@@ -53,7 +53,7 @@
 				<percent-done-select
 					v-model.number="filters.percentDone"
 					@change="setPercentDoneFilter"
-					:disabled="!filters.usePercentDone"
+					:disabled="!filters.usePercentDone || null"
 				/>
 				<fancycheckbox
 					v-model="filters.usePercentDone"
@@ -253,12 +253,13 @@ export default {
 		this.filters.requireAllFilters = this.params.filter_concat === 'and'
 	},
 	props: {
-		value: {
+		modelValue: {
 			required: true,
 		},
 	},
+	emits: ['update:modelValue', 'change'],
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.params = value
 				this.prepareFilters()
@@ -286,7 +287,7 @@ export default {
 	},
 	methods: {
 		change() {
-			this.$emit('input', this.params)
+			this.$emit('update:modelValue', this.params)
 			this.$emit('change', this.params)
 		},
 		prepareFilters() {
@@ -342,11 +343,11 @@ export default {
 				this.params.filter_by.forEach((f, i) => {
 					if (f === filterName && this.params.filter_comparator[i] === 'greater_equals') {
 						foundStart = true
-						this.$set(this.params.filter_value, i, formatISO(new Date(parts[0])))
+						this.params.filter_value[i] = formatISO(new Date(parts[0]))
 					}
 					if (f === filterName && this.params.filter_comparator[i] === 'less_equals') {
 						foundEnd = true
-						this.$set(this.params.filter_value, i, formatISO(new Date(parts[1])))
+						this.params.filter_value[i] = formatISO(new Date(parts[1]))
 					}
 				})
 
@@ -404,7 +405,7 @@ export default {
 			this.params.filter_by.forEach((f, i) => {
 				if (f === filterName) {
 					found = true
-					this.$set(this.params.filter_value, i, this.filters[variableName])
+					this.params.filter_value[i] = this.filters[variableName]
 				}
 			})
 
@@ -464,10 +465,10 @@ export default {
 				}
 			})
 			if (foundDone === false) {
-				this.$set(this.filters, 'done', true)
+				this.filters.done = true
 			}
 		},
-		prepareRelatedObjectFilter(kind, filterName = null, servicePrefix = null) {
+		async prepareRelatedObjectFilter(kind, filterName = null, servicePrefix = null) {
 			if (filterName === null) {
 				filterName = kind
 			}
@@ -477,13 +478,11 @@ export default {
 			}
 
 			this.prepareSingleValue(filterName)
-			if (typeof this.filters[filterName] !== 'undefined' && this.filters[filterName] !== '') {
-				this[`${servicePrefix}Service`].getAll({}, {s: this.filters[filterName]})
-					.then(r => {
-						this.$set(this, kind, r)
-					})
-					.catch(e => this.$message.error(e))
+			if (typeof this.filters[filterName] === 'undefined' || this.filters[filterName] === '') {
+				return
 			}
+
+			this[kind] = await this[`${servicePrefix}Service`].getAll({}, {s: this.filters[filterName]})
 		},
 		setDoneFilter() {
 			if (this.filters.done) {
@@ -521,24 +520,18 @@ export default {
 			this.setDateFilter('reminders')
 		},
 		clear(kind) {
-			this.$set(this, `found${kind}`, [])
+			this[`found${kind}`] = []
 		},
-		find(kind, query) {
+		async find(kind, query) {
 
 			if (query === '') {
 				this.clear(kind)
 			}
 
-			this[`${kind}Service`].getAll({}, {s: query})
-				.then(response => {
-					// Filter users from the results who are already assigned
-					const unassignedUsers = response.filter(({id}) => !includesById(this[kind], id))
+			const response = await this[`${kind}Service`].getAll({}, {s: query})
 
-					this.$set(this, `found${kind}`, unassignedUsers)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			// Filter users from the results who are already assigned
+			this[`found${kind}`] = response.filter(({id}) => !includesById(this[kind], id))
 		},
 		add(kind, filterName) {
 			this.$nextTick(() => {
@@ -562,7 +555,7 @@ export default {
 				ids.push(u.id)
 			})
 
-			this.$set(this.filters, filterName, ids.join(','))
+			this.filters[filterName] = ids.join(',')
 			this.setSingleValueFilter(filterName, filterName, '', 'in')
 		},
 		findLabels(query) {
@@ -597,7 +590,7 @@ export default {
 				labelIDs.push(u.id)
 			})
 
-			this.$set(this.filters, 'labels', labelIDs.join(','))
+			this.filters.labels = labelIDs.join(',')
 			this.setSingleValueFilter('labels', 'labels', '', 'in')
 		},
 	},
diff --git a/src/components/list/partials/list-card.vue b/src/components/list/partials/list-card.vue
index ec9109f7..f54f1117 100644
--- a/src/components/list/partials/list-card.vue
+++ b/src/components/list/partials/list-card.vue
@@ -56,7 +56,7 @@ export default {
 		},
 	},
 	methods: {
-		loadBackground() {
+		async loadBackground() {
 			if (this.list === null || !this.list.backgroundInformation || this.backgroundLoading) {
 				return
 			}
@@ -64,14 +64,11 @@ export default {
 			this.backgroundLoading = true
 
 			const listService = new ListService()
-			listService.background(this.list)
-				.then(b => {
-					this.$set(this, 'background', b)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
-				.finally(() => this.backgroundLoading = false)
+			try {
+				this.background = await listService.background(this.list)
+			} finally {
+				this.backgroundLoading = false
+			}
 		},
 		toggleFavoriteList(list) {
 			// The favorites pseudo list is always favorite
@@ -80,7 +77,6 @@ export default {
 				return
 			}
 			this.$store.dispatch('lists/toggleListFavorite', list)
-				.catch(e => this.$message.error(e))
 		},
 	},
 }
diff --git a/src/components/migrator/migration.vue b/src/components/migrator/migration.vue
index 9846f7ef..865924c0 100644
--- a/src/components/migrator/migration.vue
+++ b/src/components/migrator/migration.vue
@@ -13,7 +13,7 @@
 				/>
 				<x-button
 					:loading="migrationService.loading"
-					:disabled="migrationService.loading"
+					:disabled="migrationService.loading || null"
 					@click="$refs.uploadInput.click()"
 				>
 					{{ $t('migrate.upload') }}
@@ -23,7 +23,7 @@
 				<p>{{ $t('migrate.authorize', {name: name}) }}</p>
 				<x-button
 					:loading="migrationService.loading"
-					:disabled="migrationService.loading"
+					:disabled="migrationService.loading || null"
 					:href="authUrl"
 				>
 					{{ $t('migrate.getStarted') }}
@@ -138,58 +138,35 @@ export default {
 					}
 					this.migrate()
 				})
-				.catch(e => {
-					this.$message.error(e)
-				})
 		}
 	},
 	methods: {
-		getAuthUrl() {
-			this.migrationService.getAuthUrl()
-				.then(r => {
-					this.authUrl = r.url
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+		async getAuthUrl() {
+			const { url } = await this.migrationService.getAuthUrl()
+			this.authUrl = url
 		},
-		migrate() {
+
+		async migrate() {
 			this.isMigrating = true
 			this.lastMigrationDate = null
 			this.message = ''
 
+			let migrationConfig = { code: this.migratorAuthCode }
+
 			if (this.isFileMigrator) {
-				return this.migrateFile()
+				if (this.$refs.uploadInput.files.length === 0) {
+					return
+				}
+				migrationConfig = this.$refs.uploadInput.files[0]
 			}
 
-			this.migrationService.migrate({code: this.migratorAuthCode})
-				.then(r => {
-					this.message = r.message
-					this.$store.dispatch('namespaces/loadNamespaces')
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.isMigrating = false
-				})
-		},
-		migrateFile() {
-			if (this.$refs.uploadInput.files.length === 0) {
-				return
+			try {
+				const { message } = await this.migrationService.migrate(migrationConfig)
+				this.message = message
+				return this.$store.dispatch('namespaces/loadNamespaces')
+			} finally {
+				this.isMigrating = false
 			}
-
-			this.migrationService.migrate(this.$refs.uploadInput.files[0])
-				.then(r => {
-					this.message = r.message
-					this.$store.dispatch('namespaces/loadNamespaces')
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.isMigrating = false
-				})
 		},
 	},
 }
diff --git a/src/components/misc/api-config.vue b/src/components/misc/api-config.vue
index 2ae173c2..02be79ec 100644
--- a/src/components/misc/api-config.vue
+++ b/src/components/misc/api-config.vue
@@ -16,16 +16,16 @@
 					/>
 				</div>
 				<div class="control">
-					<x-button @click="setApiUrl" :disabled="apiUrl === ''">
+					<x-button @click="setApiUrl" :disabled="apiUrl === '' || null">
 						{{ $t('apiConfig.change') }}
 					</x-button>
 				</div>
 			</div>
 		</div>
 		<div class="api-url-info" v-else>
-			<i18n path="apiConfig.signInOn">
+			<i18n-t keypath="apiConfig.signInOn">
 				<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
-			</i18n>
+			</i18n-t>
 			<br />
 			<a @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</a>
 		</div>
@@ -60,6 +60,7 @@ export default {
 			successMsg: '',
 		}
 	},
+	emits: ['foundApi'],
 	created() {
 		if (this.apiUrl === '') {
 			this.configureApi = true
@@ -105,7 +106,7 @@ export default {
 						window.API_URL = urlToCheck.toString()
 						return this.$store.dispatch('config/update')
 					}
-					return Promise.reject(e)
+					throw e
 				})
 				.catch((e) => {
 					// Check if it has a port and if not check if it is reachable at https
@@ -114,7 +115,7 @@ export default {
 						window.API_URL = urlToCheck.toString()
 						return this.$store.dispatch('config/update')
 					}
-					return Promise.reject(e)
+					throw e
 				})
 				.catch((e) => {
 					// Check if it is reachable at /api/v1 and https
@@ -127,7 +128,7 @@ export default {
 						window.API_URL = urlToCheck.toString()
 						return this.$store.dispatch('config/update')
 					}
-					return Promise.reject(e)
+					throw e
 				})
 				.catch((e) => {
 					// Check if it is reachable at port API_DEFAULT_PORT and https
@@ -137,7 +138,7 @@ export default {
 						window.API_URL = urlToCheck.toString()
 						return this.$store.dispatch('config/update')
 					}
-					return Promise.reject(e)
+					throw e
 				})
 				.catch((e) => {
 					// Check if it is reachable at :API_DEFAULT_PORT and /api/v1 and https
@@ -150,7 +151,7 @@ export default {
 						window.API_URL = urlToCheck.toString()
 						return this.$store.dispatch('config/update')
 					}
-					return Promise.reject(e)
+					throw e
 				})
 				.catch((e) => {
 					// Check if it is reachable at port API_DEFAULT_PORT and http
@@ -160,7 +161,7 @@ export default {
 						window.API_URL = urlToCheck.toString()
 						return this.$store.dispatch('config/update')
 					}
-					return Promise.reject(e)
+					throw e
 				})
 				.catch((e) => {
 					// Check if it is reachable at :API_DEFAULT_PORT and /api/v1 and http
@@ -173,7 +174,7 @@ export default {
 						window.API_URL = urlToCheck.toString()
 						return this.$store.dispatch('config/update')
 					}
-					return Promise.reject(e)
+					throw e
 				})
 				.catch(() => {
 					// Still not found, url is still invalid
diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue
index bf391039..d2cd5b63 100644
--- a/src/components/misc/card.vue
+++ b/src/components/misc/card.vue
@@ -51,5 +51,6 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['close'],
 }
 </script>
diff --git a/src/components/misc/create-edit.vue b/src/components/misc/create-edit.vue
index c98378d8..11966e6d 100644
--- a/src/components/misc/create-edit.vue
+++ b/src/components/misc/create-edit.vue
@@ -43,6 +43,8 @@
 </template>
 
 <script>
+import { i18n } from '@/i18n'
+
 export default {
 	name: 'create-edit',
 	props: {
@@ -53,7 +55,7 @@ export default {
 		primaryLabel: {
 			type: String,
 			default() {
-				return this.$t('misc.create')
+				return i18n.global.t('misc.create')
 			},
 		},
 		primaryIcon: {
@@ -77,6 +79,7 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['create', 'primary', 'tertary'],
 	methods: {
 		primary() {
 			this.$emit('create')
diff --git a/src/components/misc/dropdown.vue b/src/components/misc/dropdown.vue
index c56f14fd..bda0d088 100644
--- a/src/components/misc/dropdown.vue
+++ b/src/components/misc/dropdown.vue
@@ -1,14 +1,14 @@
 <template>
 	<div class="dropdown is-right is-active" ref="dropdown">
 		<div class="dropdown-trigger" @click="open = !open">
-			<slot name="trigger">
+			<slot name="trigger" :close="close">
 				<icon :icon="triggerIcon" class="icon"/>
 			</slot>
 		</div>
 		<transition name="fade">
 			<div class="dropdown-menu" v-if="open">
 				<div class="dropdown-content">
-					<slot></slot>
+					<slot :close="close"></slot>
 				</div>
 			</div>
 		</transition>
@@ -26,10 +26,10 @@ export default {
 		}
 	},
 	mounted() {
-		document.addEventListener('click', this.hide)
+		document.addEventListener('click', this.handleClickOutside)
 	},
-	beforeDestroy() {
-		document.removeEventListener('click', this.hide)
+	beforeUnmount() {
+		document.removeEventListener('click', this.handleClickOutside)
 	},
 	props: {
 		triggerIcon: {
@@ -37,14 +37,22 @@ export default {
 			default: 'ellipsis-h',
 		},
 	},
+	emits: ['close'],
 	methods: {
-		hide(e) {
-			if (this.open) {
-				closeWhenClickedOutside(e, this.$refs.dropdown, () => {
-					this.open = false
-					this.$emit('close', e)
-				})
+		close() {
+			this.open = false
+		},
+		toggleOpen() {
+			this.open = !this.open
+		},
+		handleClickOutside(e) {
+			if (!this.open) {
+				return
 			}
+			closeWhenClickedOutside(e, this.$refs.dropdown, () => {
+				this.open = false
+				this.$emit('close', e)
+			})
 		},
 	},
 }
diff --git a/src/components/misc/error.vue b/src/components/misc/error.vue
index 56b73b4a..2362a778 100644
--- a/src/components/misc/error.vue
+++ b/src/components/misc/error.vue
@@ -1,9 +1,9 @@
 <template>
 	<div class="notification is-danger">
-		<i18n path="loadingError.failed">
+		<i18n-t keypath="loadingError.failed">
 			<a @click="() => location.reload()">{{ $t('loadingError.tryAgain') }}</a>
 			<a href="https://vikunja.io/contact/" rel="noreferrer noopener nofollow" target="_blank">{{ $t('loadingError.contact') }}</a>
-		</i18n>
+		</i18n-t>
 	</div>
 </template>
 
diff --git a/src/components/misc/notification.vue b/src/components/misc/notification.vue
index c4ab4153..157cb707 100644
--- a/src/components/misc/notification.vue
+++ b/src/components/misc/notification.vue
@@ -11,7 +11,7 @@
 			>
 				<div v-if="item.title" class="notification-title">{{ item.title }}</div>
 				<div class="notification-content">
-					<template v-for="(t, k) in item.text">{{ t }}<br :key="k"/></template>
+					<template v-for="(t, k) in item.text" :key="k">{{ t }}<br /></template>
 				</div>
 				<div
 					class="buttons is-right"
diff --git a/src/components/misc/pagination.vue b/src/components/misc/pagination.vue
index 83d9d002..63b7b365 100644
--- a/src/components/misc/pagination.vue
+++ b/src/components/misc/pagination.vue
@@ -1,42 +1,39 @@
 <template>
-    <nav
-        aria-label="pagination"
-        class="pagination is-centered p-4"
-        role="navigation"
-        v-if="totalPages > 1"
-    >
-        <router-link
-            :disabled="currentPage === 1"
-            :to="getRouteForPagination(currentPage - 1)"
-            class="pagination-previous"
-            tag="button">
-            {{ $t('misc.previous') }}
-        </router-link>
-        <router-link
-            :disabled="currentPage === totalPages"
-            :to="getRouteForPagination(currentPage + 1)"
-            class="pagination-next"
-            tag="button">
-            {{ $t('misc.next') }}
-        </router-link>
-        <ul class="pagination-list">
-            <template v-for="(p, i) in pages">
-                <li :key="'page' + i" v-if="p.isEllipsis">
-                    <span class="pagination-ellipsis">&hellip;</span>
-                </li>
-                <li :key="'page' + i" v-else>
-                    <router-link
-                        :aria-label="'Goto page ' + p.number"
-                        :class="{ 'is-current': p.number === currentPage }"
-                        :to="getRouteForPagination(p.number)"
-                        class="pagination-link"
-                    >
-                        {{ p.number }}
-                    </router-link>
-                </li>
-            </template>
-        </ul>
-    </nav>
+	<nav
+		aria-label="pagination"
+		class="pagination is-centered p-4"
+		role="navigation"
+		v-if="totalPages > 1"
+	>
+		<router-link
+			:disabled="currentPage === 1 || null"
+			:to="getRouteForPagination(currentPage - 1)"
+			class="pagination-previous"
+			tag="button">
+			{{ $t('misc.previous') }}
+		</router-link>
+		<router-link
+			:disabled="currentPage === totalPages || null"
+			:to="getRouteForPagination(currentPage + 1)"
+			class="pagination-next"
+			tag="button">
+			{{ $t('misc.next') }}
+		</router-link>
+		<ul class="pagination-list">
+			<li :key="`page-${i}`" v-for="(p, i) in pages">
+				<span class="pagination-ellipsis" v-if="p.isEllipsis">&hellip;</span>
+				<router-link
+					:aria-label="'Goto page ' + p.number"
+					:class="{ 'is-current': p.number === currentPage }"
+					:to="getRouteForPagination(p.number)"
+					class="pagination-link"
+					v-else
+				>
+					{{ p.number }}
+				</router-link>
+			</li>
+		</ul>
+	</nav>
 </template>
 
 <script>
@@ -112,14 +109,14 @@ export default {
 
 <style lang="scss" scoped>
 .pagination {
-  padding-bottom: 1rem;
+	padding-bottom: 1rem;
 
-  .pagination-previous,
-  .pagination-next {
-    &:not(:disabled):hover {
-      background: $scheme-main;
-      cursor: pointer;
-    }
-  }
+	.pagination-previous,
+	.pagination-next {
+		&:not(:disabled):hover {
+			background: $scheme-main;
+			cursor: pointer;
+		}
+	}
 }
 </style>
\ No newline at end of file
diff --git a/src/components/misc/shortcut.vue b/src/components/misc/shortcut.vue
index 47b617fb..5d155db2 100644
--- a/src/components/misc/shortcut.vue
+++ b/src/components/misc/shortcut.vue
@@ -1,8 +1,8 @@
 <template>
 	<span class="shortcuts">
-		<template v-for="(k, i) in keys">
-			<kbd :key="i">{{ k }}</kbd>
-			<span v-if="i < keys.length - 1" :key="`plus${i}`">+</span>
+		<template v-for="(k, i) in keys" :key="i">
+			<kbd>{{ k }}</kbd>
+			<span v-if="i < keys.length - 1">+</span>
 		</template>
 	</span>
 </template>
diff --git a/src/components/misc/subscription.vue b/src/components/misc/subscription.vue
index 294aeee4..e6bef4fd 100644
--- a/src/components/misc/subscription.vue
+++ b/src/components/misc/subscription.vue
@@ -4,7 +4,7 @@
 		:icon="icon"
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
-		:disabled="disabled"
+		:disabled="disabled || null"
 		v-if="isButton"
 	>
 		{{ buttonText }}
@@ -49,6 +49,7 @@ export default {
 			default: true,
 		},
 	},
+	emits: ['change'],
 	computed: {
 		tooltipText() {
 			if (this.disabled) {
@@ -88,33 +89,23 @@ export default {
 				this.unsubscribe()
 			}
 		},
-		subscribe() {
+		async subscribe() {
 			const subscription = new SubscriptionModel({
 				entity: this.entity,
 				entityId: this.entityId,
 			})
-			this.subscriptionService.create(subscription)
-				.then(() => {
-					this.$emit('change', subscription)
-					this.$message.success({message: this.$t('task.subscription.subscribeSuccess', {entity: this.entity})})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			await this.subscriptionService.create(subscription)
+			this.$emit('change', subscription)
+			this.$message.success({message: this.$t('task.subscription.subscribeSuccess', {entity: this.entity})})
 		},
-		unsubscribe() {
+		async unsubscribe() {
 			const subscription = new SubscriptionModel({
 				entity: this.entity,
 				entityId: this.entityId,
 			})
-			this.subscriptionService.delete(subscription)
-				.then(() => {
-					this.$emit('change', null)
-					this.$message.success({message: this.$t('task.subscription.unsubscribeSuccess', {entity: this.entity})})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			await this.subscriptionService.delete(subscription)
+			this.$emit('change', null)
+			this.$message.success({message: this.$t('task.subscription.unsubscribeSuccess', {entity: this.entity})})
 		},
 	},
 }
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 020e33b2..78ce84ed 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -102,6 +102,7 @@ export default {
 			validator: validValue(VARIANTS),
 		},
 	},
+	emits: ['close', 'submit'],
 }
 </script>
 
diff --git a/src/components/namespace/namespace-search.vue b/src/components/namespace/namespace-search.vue
index 8db1097c..cbe424d2 100644
--- a/src/components/namespace/namespace-search.vue
+++ b/src/components/namespace/namespace-search.vue
@@ -14,6 +14,7 @@ import Multiselect from '@/components/input/multiselect.vue'
 
 export default {
 	name: 'namespace-search',
+	emits: ['selected'],
 	data() {
 		return {
 			query: '',
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index df55df04..bd185511 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -72,7 +72,7 @@ export default {
 		document.addEventListener('click', this.hidePopup)
 		this.interval = setInterval(this.loadNotifications, LOAD_NOTIFICATIONS_INTERVAL)
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		document.removeEventListener('click', this.hidePopup)
 		clearInterval(this.interval)
 	},
@@ -93,14 +93,8 @@ export default {
 				closeWhenClickedOutside(e, this.$refs.popup, () => this.showNotifications = false)
 			}
 		},
-		loadNotifications() {
-			this.notificationService.getAll()
-				.then(r => {
-					this.$set(this, 'allNotifications', r)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+		async loadNotifications() {
+			this.allNotifications = await this.notificationService.getAll()
 		},
 		to(n, index) {
 			const to = {
@@ -127,17 +121,13 @@ export default {
 					break
 			}
 
-			return () => {
+			return async () => {
 				if (to.name !== '') {
 					this.$router.push(to)
 				}
 
 				n.read = true
-				this.notificationService.update(n)
-					.then(r => {
-						this.$set(this.allNotifications, index, r)
-					})
-					.catch(e => this.$message.error(e))
+				this.allNotifications[index] = await this.notificationService.update(n)
 			}
 		},
 	},
diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 0aa3a1a9..51fc8daa 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -61,7 +61,6 @@ import TeamModel from '@/models/team'
 
 import {CURRENT_LIST, LOADING, LOADING_MODULE, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import ListModel from '@/models/list'
-import createTask from '@/components/tasks/mixins/createTask'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
 import {getHistory} from '../../modules/listHistory'
 
@@ -97,9 +96,6 @@ export default {
 			teamService: new TeamService(),
 		}
 	},
-	mixins: [
-		createTask,
-	],
 	computed: {
 		active() {
 			const active = this.$store.state[QUICK_ACTIONS_ACTIVE]
@@ -286,20 +282,17 @@ export default {
 				this.taskSearchTimeout = null
 			}
 
-			this.taskSearchTimeout = setTimeout(() => {
-				this.taskService.getAll({}, {s: query})
-					.then(r => {
-						r = r.map(t => {
-							t.type = TYPE_TASK
-							const list = this.$store.getters['lists/getListById'](t.listId) === null ? null : this.$store.getters['lists/getListById'](t.listId)
-							if (list !== null) {
-								t.title = `${t.title} (${list.title})`
-							}
+			this.taskSearchTimeout = setTimeout(async () => {
+				const r = await this.taskService.getAll({}, {s: query})
+				this.foundTasks = r.map(t => {
+					t.type = TYPE_TASK
+					const list = this.$store.getters['lists/getListById'](t.listId)
+					if (list !== null) {
+						t.title = `${t.title} (${list.title})`
+					}
 
-							return t
-						})
-						this.$set(this, 'foundTasks', r)
-					})
+					return t
+				})
 			}, 150)
 		},
 		searchTeams() {
@@ -322,15 +315,12 @@ export default {
 				this.teamSearchTimeout = null
 			}
 
-			this.teamSearchTimeout = setTimeout(() => {
-				this.teamService.getAll({}, {s: query})
-					.then(r => {
-						r = r.map(t => {
-							t.title = t.name
-							return t
-						})
-						this.$set(this, 'foundTeams', r)
-					})
+			this.teamSearchTimeout = setTimeout(async () => {
+				const r = await this.teamService.getAll({}, {s: query})
+				this.foundTeams = r.map(t => {
+					t.title = t.name
+					return t
+				})
 			}, 150)
 		},
 		closeQuickActions() {
@@ -382,22 +372,20 @@ export default {
 					break
 			}
 		},
-		newTask() {
+		async newTask() {
 			if (this.currentList === null) {
 				return
 			}
 
-			this.createNewTask(this.query, 0, this.currentList.id)
-				.then(r => {
-					this.$message.success({message: this.$t('task.createSuccess')})
-					this.$router.push({name: 'task.detail', params: {id: r.id}})
-					this.closeQuickActions()
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			const task = await this.$store.dispatch('tasks/createNewTask', {
+				title: this.query,
+				listId: this.currentList.id,
+			})
+			this.$message.success({message: this.$t('task.createSuccess')})
+			this.$router.push({name: 'task.detail', params: {id: task.id}})
+			this.closeQuickActions()
 		},
-		newList() {
+		async newList() {
 			if (this.currentList === null) {
 				return
 			}
@@ -406,42 +394,27 @@ export default {
 				title: this.query,
 				namespaceId: this.currentList.namespaceId,
 			})
-			this.$store.dispatch('lists/createList', newList)
-				.then(r => {
-					this.$message.success({message: this.$t('list.create.createdSuccess')})
-					this.$router.push({name: 'list.index', params: {listId: r.id}})
-					this.closeQuickActions()
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			const list = await this.$store.dispatch('lists/createList', newList)
+			this.$message.success({message: this.$t('list.create.createdSuccess')})
+			this.$router.push({name: 'list.index', params: {listId: list.id}})
+			this.closeQuickActions()
 		},
-		newNamespace() {
+		async newNamespace() {
 			const newNamespace = new NamespaceModel({title: this.query})
 
-			this.$store.dispatch('namespaces/createNamespace', newNamespace)
-				.then(() => {
-					this.$message.success({message: this.$t('namespace.create.success')})
-					this.closeQuickActions()
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			await this.$store.dispatch('namespaces/createNamespace', newNamespace)
+			this.$message.success({message: this.$t('namespace.create.success')})
+			this.closeQuickActions()
 		},
-		newTeam() {
+		async newTeam() {
 			const newTeam = new TeamModel({name: this.query})
-			this.teamService.create(newTeam)
-				.then(r => {
-					this.$router.push({
-						name: 'teams.edit',
-						params: {id: r.id},
-					})
-					this.$message.success({message: this.$t('team.create.success')})
-					this.closeQuickActions()
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			const team = await this.teamService.create(newTeam)
+			this.$router.push({
+				name: 'teams.edit',
+				params: {id: team.id},
+			})
+			this.$message.success({message: this.$t('team.create.success')})
+			this.closeQuickActions()
 		},
 		select(parentIndex, index) {
 
diff --git a/src/components/sharing/linkSharing.vue b/src/components/sharing/linkSharing.vue
index 9379d234..6b0dee34 100644
--- a/src/components/sharing/linkSharing.vue
+++ b/src/components/sharing/linkSharing.vue
@@ -68,7 +68,7 @@
 						/>
 					</div>
 				</div>
-				<x-button @click="add" icon="plus">
+				<x-button @click="add(listId)" icon="plus">
 					{{ $t('list.share.share') }}
 				</x-button>
 			</div>
@@ -160,7 +160,7 @@
 		<transition name="modal">
 			<modal
 				@close="showDeleteModal = false"
-				@submit="remove()"
+				@submit="remove(listId)"
 				v-if="showDeleteModal"
 			>
 				<template #header>
@@ -215,59 +215,41 @@ export default {
 		frontendUrl: (state) => state.config.frontendUrl,
 	}),
 	methods: {
-		load() {
+		async load(listId) {
 			// If listId == 0 the list on the calling component wasn't already loaded, so we just bail out here
-			if (this.listId === 0) {
+			if (listId === 0) {
 				return
 			}
 
-			this.linkShareService
-				.getAll({listId: this.listId})
-				.then((r) => {
-					this.linkShares = r
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			this.linkShares = await this.linkShareService.getAll({listId})
 		},
-		add() {
+		async add(listId) {
 			const newLinkShare = new LinkShareModel({
 				right: this.selectedRight,
-				listId: this.listId,
+				listId,
 				name: this.name,
 				password: this.password,
 			})
-			this.linkShareService
-				.create(newLinkShare)
-				.then(() => {
-					this.selectedRight = rights.READ
-					this.name = ''
-					this.password = ''
-					this.showNewForm = false
-					this.$message.success({message: this.$t('list.share.links.createSuccess')})
-					this.load()
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			await this.linkShareService.create(newLinkShare)
+			this.selectedRight = rights.READ
+			this.name = ''
+			this.password = ''
+			this.showNewForm = false
+			this.$message.success({message: this.$t('list.share.links.createSuccess')})
+			await this.load(listId)
 		},
-		remove() {
+		async remove(listId) {
 			const linkshare = new LinkShareModel({
 				id: this.linkIdToDelete,
-				listId: this.listId,
+				listId,
 			})
-			this.linkShareService
-				.delete(linkshare)
-				.then(() => {
-					this.$message.success({message: this.$t('list.share.links.deleteSuccess')})
-					this.load()
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.showDeleteModal = false
-				})
+			try {
+				await this.linkShareService.delete(linkshare)
+				this.$message.success({message: this.$t('list.share.links.deleteSuccess')})
+				await this.load(listId)
+			} finally {
+				this.showDeleteModal = false
+			}
 		},
 		copy,
 		getShareLink(hash) {
diff --git a/src/components/sharing/userTeam.vue b/src/components/sharing/userTeam.vue
index d429032d..f6b7cb13 100644
--- a/src/components/sharing/userTeam.vue
+++ b/src/components/sharing/userTeam.vue
@@ -272,45 +272,34 @@ export default {
 		this.load()
 	},
 	methods: {
-		load() {
-			this.stuffService
-				.getAll(this.stuffModel)
-				.then((r) => {
-					this.$set(this, 'sharables', r)
-					r.forEach((s) =>
-						this.$set(this.selectedRight, s.id, s.right),
-					)
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+		async load() {
+			this.sharables = await this.stuffService.getAll(this.stuffModel)
+			this.sharables.forEach((s) =>
+				this.selectedRight[s.id] = s.right,
+			)
 		},
-		deleteSharable() {
+
+		async deleteSharable() {
 			if (this.shareType === 'user') {
 				this.stuffModel.userId = this.sharable.username
 			} else if (this.shareType === 'team') {
 				this.stuffModel.teamId = this.sharable.id
 			}
 
-			this.stuffService
-				.delete(this.stuffModel)
-				.then(() => {
-					this.showDeleteModal = false
-					for (const i in this.sharables) {
-						if (
-							(this.sharables[i].username === this.stuffModel.userId && this.shareType === 'user') ||
-							(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
-						) {
-							this.sharables.splice(i, 1)
-						}
-					}
-					this.$message.success({message: this.$t('list.share.userTeam.removeSuccess', {type: this.shareTypeName, sharable: this.sharableName})})
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			await this.stuffService.delete(this.stuffModel)
+			this.showDeleteModal = false
+			for (const i in this.sharables) {
+				if (
+					(this.sharables[i].username === this.stuffModel.userId && this.shareType === 'user') ||
+					(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
+				) {
+					this.sharables.splice(i, 1)
+				}
+			}
+			this.$message.success({message: this.$t('list.share.userTeam.removeSuccess', {type: this.shareTypeName, sharable: this.sharableName})})
 		},
-		add(admin) {
+
+		async add(admin) {
 			if (admin === null) {
 				admin = false
 			}
@@ -325,17 +314,12 @@ export default {
 				this.stuffModel.teamId = this.sharable.id
 			}
 
-			this.stuffService
-				.create(this.stuffModel)
-				.then(() => {
-					this.$message.success({message: this.$t('list.share.userTeam.addedSuccess', {type: this.shareTypeName})})
-					this.load()
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			await this.stuffService.create(this.stuffModel)
+			this.$message.success({message: this.$t('list.share.userTeam.addedSuccess', {type: this.shareTypeName})})
+			await this.load()
 		},
-		toggleType(sharable) {
+
+		async toggleType(sharable) {
 			if (
 				this.selectedRight[sharable.id] !== rights.ADMIN &&
 				this.selectedRight[sharable.id] !== rights.READ &&
@@ -351,43 +335,32 @@ export default {
 				this.stuffModel.teamId = sharable.id
 			}
 
-			this.stuffService
-				.update(this.stuffModel)
-				.then((r) => {
-					for (const i in this.sharables) {
-						if (
-							(this.sharables[i].username ===
-								this.stuffModel.userId &&
-								this.shareType === 'user') ||
-							(this.sharables[i].id === this.stuffModel.teamId &&
-								this.shareType === 'team')
-						) {
-							this.$set(this.sharables[i], 'right', r.right)
-						}
-					}
-					this.$message.success({message: this.$t('list.share.userTeam.updatedSuccess', {type: this.shareTypeName})})
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			const r = await this.stuffService.update(this.stuffModel)
+			for (const i in this.sharables) {
+				if (
+					(this.sharables[i].username ===
+						this.stuffModel.userId &&
+						this.shareType === 'user') ||
+					(this.sharables[i].id === this.stuffModel.teamId &&
+						this.shareType === 'team')
+				) {
+					this.sharables[i].right = r.right
+				}
+			}
+			this.$message.success({message: this.$t('list.share.userTeam.updatedSuccess', {type: this.shareTypeName})})
 		},
-		find(query) {
+
+		async find(query) {
 			if (query === '') {
-				this.$set(this, 'found', [])
+				this.clearAll()
 				return
 			}
 
-			this.searchService
-				.getAll({}, {s: query})
-				.then((response) => {
-					this.$set(this, 'found', response)
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			this.found = await this.searchService.getAll({}, {s: query})
 		},
+
 		clearAll() {
-			this.$set(this, 'found', [])
+			this.found = []
 		},
 	},
 }
diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index af4338f6..3ae8d4f8 100644
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@@ -38,7 +38,6 @@
 
 <script>
 import TaskService from '../../services/task'
-import createTask from '@/components/tasks/mixins/createTask'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
 
 const INPUT_BORDER_PX = 2
@@ -50,6 +49,7 @@ const cleanupTitle = title => {
 
 export default {
 	name: 'add-task',
+	emits: ['taskAdded'],
 	data() {
 		return {
 			newTaskTitle: '',
@@ -59,9 +59,6 @@ export default {
 			initialTextAreaHeight: null,
 		}
 	},
-	mixins: [
-		createTask,
-	],
 	components: {
 		QuickAddMagic,
 	},
@@ -85,7 +82,7 @@ export default {
 		this.initialTextAreaHeight = this.$refs.newTaskInput.scrollHeight + INPUT_BORDER_PX
 	},
 	methods: {
-		addTask() {
+		async addTask() {
 			if (this.newTaskTitle === '') {
 				this.errorMessage = this.$t('list.create.addTitleRequired')
 				return
@@ -96,33 +93,31 @@ export default {
 				return
 			}
 
-			const newTasks = []
-			this.newTaskTitle.split(/[\r\n]+/).forEach(t => {
+			const newTasks = this.newTaskTitle.split(/[\r\n]+/).map(async t => {
 				const title = cleanupTitle(t)
 				if (title === '') {
 					return
 				}
 				
-				newTasks.push(
-					this.createNewTask(title, 0, this.$store.state.auth.settings.defaultListId, this.defaultPosition)
-						.then(task => {
-							this.$emit('taskAdded', task)
-							return task
-						}),
-				)
+				const task = await this.$store.dispatch('tasks/createNewTask', {
+					title: this.newTaskTitle,
+					listId: this.$store.state.auth.settings.defaultListId,
+					position: this.defaultPosition,
+				})
+				this.$emit('taskAdded', task)
+				return task
 			})
 
-			Promise.all(newTasks)
-				.then(() => {
-					this.newTaskTitle = ''
-				})
-				.catch(e => {
-					if (e === 'NO_LIST') {
-						this.errorMessage = this.$t('list.create.addListRequired')
-						return
-					}
-					this.$message.error(e)
-				})
+			try {
+				await Promise.all(newTasks)
+				this.newTaskTitle = ''
+			} catch(e) {
+				if (e.message === 'NO_LIST') {
+					this.errorMessage = this.$t('list.create.addListRequired')
+					return
+				}
+				throw e
+			}
 		},
 		handleEnter(e) {
 			// when pressing shift + enter we want to continue as we normally would. Otherwise, we want to create 
diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index 0b2a2ca4..53459736 100644
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@@ -69,6 +69,8 @@
 </template>
 
 <script>
+import AsyncEditor from '@/components/input/AsyncEditor'
+
 import ListService from '../../services/list'
 import TaskService from '../../services/task'
 import TaskModel from '../../models/task'
@@ -76,8 +78,6 @@ import priorities from '../../models/constants/priorities'
 import EditLabels from './partials/editLabels'
 import Reminders from './partials/reminders'
 import ColorPicker from '../input/colorPicker'
-import LoadingComponent from '../misc/loading'
-import ErrorComponent from '../misc/error'
 
 export default {
 	name: 'edit-task',
@@ -99,12 +99,7 @@ export default {
 		ColorPicker,
 		Reminders,
 		EditLabels,
-		editor: () => ({
-			component: import('../../components/input/editor'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	props: {
 		task: {
@@ -139,17 +134,10 @@ export default {
 			this.editorActive = false
 			this.$nextTick(() => (this.editorActive = true))
 		},
-		editTaskSubmit() {
-			this.taskService
-				.update(this.taskEditTask)
-				.then((r) => {
-					this.$set(this, 'taskEditTask', r)
-					this.initTaskFields()
-					this.$message.success({message: this.$t('task.detail.updateSuccess')})
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+		async editTaskSubmit() {
+			this.taskEditTask = await this.taskService.update(this.taskEditTask)
+			this.initTaskFields()
+			this.$message.success({message: this.$t('task.detail.updateSuccess')})
 		},
 	},
 }
diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue
index 7ef86a01..8981ac10 100644
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@@ -11,14 +11,14 @@
 				</x-button>
 			</div>
 			<filter-popup
-				@change="loadTasks()"
 				:visible="showTaskFilter"
 				v-model="params"
+				@update:modelValue="loadTasks()"
 			/>
 		</div>
 		<div class="dates">
-			<template v-for="(y, yk) in days">
-				<div :key="yk + 'year'" class="months">
+			<template v-for="(y, yk) in days" :key="yk + 'year'">
+				<div class="months">
 					<div
 						:key="mk + 'month'"
 						class="month"
@@ -86,9 +86,8 @@
 					:w="t.durationDays * dayWidth"
 					:x="t.offsetDays * dayWidth - 6"
 					:y="0"
-					@clicked="setTaskDragged(t)"
-					@dragstop="resizeTask"
-					@resizestop="resizeTask"
+					@dragstop="(e) => resizeTask(t, e)"
+					@resizestop="(e) => resizeTask(t, e)"
 					axis="x"
 					class="task"
 				>
@@ -136,9 +135,8 @@
 						:sticks="['mr', 'ml']"
 						:x="dayOffsetUntilToday * dayWidth - 6"
 						:y="0"
-						@clicked="setTaskDragged(t)"
-						@dragstop="resizeTask"
-						@resizestop="resizeTask"
+						@dragstop="(e) => resizeTask(t, e)"
+						@resizestop="(e) => resizeTask(t, e)"
 						axis="x"
 						class="task nodate"
 						v-tooltip="$t('list.gantt.noDates')"
@@ -232,7 +230,6 @@ export default {
 			theTasks: [], // Pretty much a copy of the prop, since we cant mutate the prop directly
 			tasksWithoutDates: [],
 			taskService: new TaskService(),
-			taskDragged: null, // Saves to currently dragged task to be able to update it
 			fullWidth: 0,
 			now: new Date(),
 			dayOffsetUntilToday: 0,
@@ -298,56 +295,43 @@ export default {
 				this.fullWidth += this.dayWidth
 			}
 			console.debug('prepareGanttDays; years:', years)
-			this.$set(this, 'days', years)
+			this.days = years
 		},
+
 		parseTasks() {
 			this.setDates()
 			this.loadTasks()
 		},
-		loadTasks() {
-			this.$set(this, 'theTasks', [])
-			this.$set(this, 'tasksWithoutDates', [])
 
-			const getAllTasks = (page = 1) => {
-				return this.taskCollectionService
-					.getAll({listId: this.listId}, this.params, page)
-					.then((tasks) => {
-						if (page < this.taskCollectionService.totalPages) {
-							return getAllTasks(page + 1).then((nextTasks) => {
-								return tasks.concat(nextTasks)
-							})
-						} else {
-							return tasks
-						}
-					})
-					.catch((e) => {
-						return Promise.reject(e)
-					})
+		async loadTasks() {
+			this.theTasks = []
+			this.tasksWithoutDates = []
+
+			const getAllTasks = async (page = 1) => {
+				const tasks = await this.taskCollectionService.getAll({listId: this.listId}, this.params, page)
+				if (page < this.taskCollectionService.totalPages) {
+					const nextTasks = await getAllTasks(page + 1)
+					return tasks.concat(nextTasks)
+				}
+				return tasks
 			}
 
-			getAllTasks()
-				.then((tasks) => {
-					this.theTasks = tasks
-						.filter((t) => {
-							if (t.startDate === null && !t.done) {
-								this.tasksWithoutDates.push(t)
-							}
-							return (
-								t.startDate >= this.startDate &&
-								t.endDate <= this.endDate
-							)
-						})
-						.map((t) => {
-							return this.addGantAttributes(t)
-						})
-						.sort(function (a, b) {
-							if (a.startDate < b.startDate) return -1
-							if (a.startDate > b.startDate) return 1
-							return 0
-						})
+			const tasks = await getAllTasks()
+			this.theTasks = tasks
+				.filter((t) => {
+					if (t.startDate === null && !t.done) {
+						this.tasksWithoutDates.push(t)
+					}
+					return (
+						t.startDate >= this.startDate &&
+						t.endDate <= this.endDate
+					)
 				})
-				.catch((e) => {
-					this.$message.error(e)
+				.map((t) => this.addGantAttributes(t))
+				.sort(function (a, b) {
+					if (a.startDate < b.startDate) return -1
+					if (a.startDate > b.startDate) return 1
+					return 0
 				})
 		},
 		addGantAttributes(t) {
@@ -360,15 +344,14 @@ export default {
 			t.offsetDays = Math.floor((t.startDate - this.startDate) / 1000 / 60 / 60 / 24)
 			return t
 		},
-		setTaskDragged(t) {
-			this.taskDragged = t
-		},
-		resizeTask(newRect) {
+		async resizeTask(taskDragged, newRect) {
 			if (this.isTaskEdit) {
 				return
 			}
 
-			const didntHaveDates = this.taskDragged.startDate === null ? true : false
+			let newTask = { ...taskDragged }
+
+			const didntHaveDates = newTask.startDate === null ? true : false
 
 			let startDate = new Date(this.startDate)
 			startDate.setDate(
@@ -378,62 +361,52 @@ export default {
 			startDate.setUTCMinutes(0)
 			startDate.setUTCSeconds(0)
 			startDate.setUTCMilliseconds(0)
-			this.taskDragged.startDate = startDate
+			newTask.startDate = startDate
 			let endDate = new Date(startDate)
 			endDate.setDate(
 				startDate.getDate() + newRect.width / this.dayWidth,
 			)
-			this.taskDragged.startDate = startDate
-			this.taskDragged.endDate = endDate
+			newTask.startDate = startDate
+			newTask.endDate = endDate
 
 			// We take the task from the overall tasks array because the one in it has bad data after it was updated once.
 			// FIXME: This is a workaround. We should use a better mechanism to get the task or, even better,
 			// prevent it from containing outdated Data in the first place.
 			for (const tt in this.theTasks) {
-				if (this.theTasks[tt].id === this.taskDragged.id) {
-					this.$set(this, 'taskDragged', this.theTasks[tt])
+				if (this.theTasks[tt].id === newTask.id) {
+					newTask = this.theTasks[tt]
 					break
 				}
 			}
 
 			const ganttData = {
-				endDate: this.taskDragged.endDate,
-				durationDays: this.taskDragged.durationDays,
-				offsetDays: this.taskDragged.offsetDays,
+				endDate: newTask.endDate,
+				durationDays: newTask.durationDays,
+				offsetDays: newTask.offsetDays,
 			}
 
-			this.taskService
-				.update(this.taskDragged)
-				.then(r => {
-					r.endDate = ganttData.endDate
-					r.durationDays = ganttData.durationDays
-					r.offsetDays = ganttData.offsetDays
+			const r = await this.taskService.update(newTask)
+			r.endDate = ganttData.endDate
+			r.durationDays = ganttData.durationDays
+			r.offsetDays = ganttData.offsetDays
 
-					// If the task didn't have dates before, we'll update the list
-					if (didntHaveDates) {
-						for (const t in this.tasksWithoutDates) {
-							if (this.tasksWithoutDates[t].id === r.id) {
-								this.tasksWithoutDates.splice(t, 1)
-								break
-							}
-						}
-						this.theTasks.push(this.addGantAttributes(r))
-					} else {
-						for (const tt in this.theTasks) {
-							if (this.theTasks[tt].id === r.id) {
-								this.$set(
-									this.theTasks,
-									tt,
-									this.addGantAttributes(r),
-								)
-								break
-							}
-						}
+			// If the task didn't have dates before, we'll update the list
+			if (didntHaveDates) {
+				for (const t in this.tasksWithoutDates) {
+					if (this.tasksWithoutDates[t].id === r.id) {
+						this.tasksWithoutDates.splice(t, 1)
+						break
 					}
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+				}
+				this.theTasks.push(this.addGantAttributes(r))
+			} else {
+				for (const tt in this.theTasks) {
+					if (this.theTasks[tt].id === r.id) {
+						this.theTasks[tt] = this.addGantAttributes(r)
+						break
+					}
+				}
+			}
 		},
 		editTask(task) {
 			this.taskToEdit = task
@@ -453,7 +426,7 @@ export default {
 				this.$nextTick(() => (this.newTaskFieldActive = false))
 			}
 		},
-		addNewTask() {
+		async addNewTask() {
 			if (!this.newTaskFieldActive) {
 				return
 			}
@@ -461,16 +434,10 @@ export default {
 				title: this.newTaskTitle,
 				listId: this.listId,
 			})
-			this.taskService
-				.create(task)
-				.then((r) => {
-					this.tasksWithoutDates.push(this.addGantAttributes(r))
-					this.newTaskTitle = ''
-					this.hideCrateNewTask()
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			const r = await this.taskService.create(task)
+			this.tasksWithoutDates.push(this.addGantAttributes(r))
+			this.newTaskTitle = ''
+			this.hideCrateNewTask()
 		},
 		formatYear(date) {
 			return this.format(date, 'MMMM, yyyy')
diff --git a/src/components/tasks/mixins/createTask.js b/src/components/tasks/mixins/createTask.js
deleted file mode 100644
index 3395fbd9..00000000
--- a/src/components/tasks/mixins/createTask.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import {parseTaskText} from '@/modules/parseTaskText'
-import TaskModel from '@/models/task'
-import {formatISO} from 'date-fns'
-import LabelTask from '@/models/labelTask'
-import LabelModel from '@/models/label'
-import LabelTaskService from '@/services/labelTask'
-import {mapState} from 'vuex'
-import UserService from '@/services/user'
-import TaskService from '@/services/task'
-import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
-
-export default {
-	data() {
-		return {
-			taskService: TaskService,
-			labelTaskService: LabelTaskService,
-			userService: UserService,
-		}
-	},
-	created() {
-		this.labelTaskService = new LabelTaskService()
-		this.userService = new UserService()
-		this.taskService = new TaskService()
-	},
-	computed: mapState({
-		labels: state => state.labels.labels,
-	}),
-	methods: {
-		createNewTask(newTaskTitle, bucketId = 0, lId = 0, position = 0) {
-			const parsedTask = parseTaskText(newTaskTitle, getQuickAddMagicMode())
-			const assignees = []
-
-			// Uses the following ways to get the list id of the new task:
-			//  1. If specified in quick add magic, look in store if it exists and use it if it does
-			//  2. Else check if a list was passed as parameter
-			//  3. Otherwise use the id from the route parameter
-			//  4. If none of the above worked, reject the promise with an error.
-			let listId = null
-			if (parsedTask.list !== null) {
-				const list = this.$store.getters['lists/findListByExactname'](parsedTask.list)
-				listId = list === null ? null : list.id
-			}
-			if (listId === null && lId !== 0) {
-				listId = lId
-			}
-			if (typeof this.$route.params.listId !== 'undefined') {
-				listId = parseInt(this.$route.params.listId)
-			}
-			
-			if (typeof listId === 'undefined' || listId === null) {
-				return Promise.reject('NO_LIST')
-			}
-
-			// Separate closure because we need to wait for the results of the user search if users were entered in the
-			// task create request. Because _that_ happens in a promise, we'll need something to call when it resolves.
-			const createTask = () => {
-				const task = new TaskModel({
-					title: parsedTask.text,
-					listId: listId,
-					dueDate: parsedTask.date !== null ? formatISO(parsedTask.date) : null, // I don't know why, but it all goes up in flames when I just pass in the date normally.
-					priority: parsedTask.priority,
-					assignees: assignees,
-					bucketId: bucketId,
-					position: position,
-				})
-				return this.taskService.create(task)
-					.then(task => {
-
-						if (parsedTask.labels.length > 0) {
-
-							const labelAddsToWaitFor = []
-
-							const addLabelToTask = label => {
-								const labelTask = new LabelTask({
-									taskId: task.id,
-									labelId: label.id,
-								})
-								return this.labelTaskService.create(labelTask)
-									.then(result => {
-										task.labels.push(label)
-										return Promise.resolve(result)
-									})
-									.catch(e => Promise.reject(e))
-							}
-
-							// Then do everything that is involved in finding, creating and adding the label to the task
-							parsedTask.labels.forEach(labelTitle => {
-								// Check if the label exists
-								const label = Object.values(this.labels).find(l => {
-									return l.title.toLowerCase() === labelTitle.toLowerCase()
-								})
-
-								// Label found, use it
-								if (typeof label !== 'undefined') {
-									labelAddsToWaitFor.push(addLabelToTask(label))
-								} else {
-									// label not found, create it
-									const label = new LabelModel({title: labelTitle})
-									labelAddsToWaitFor.push(this.$store.dispatch('labels/createLabel', label)
-										.then(res => {
-											return addLabelToTask(res)
-										})
-										.catch(e => Promise.reject(e)),
-									)
-								}
-							})
-
-							// This waits until all labels are created and added to the task
-							return Promise.all(labelAddsToWaitFor)
-								.then(() => {
-									return Promise.resolve(task)
-								})
-						}
-
-						return Promise.resolve(task)
-					})
-					.catch(e => Promise.reject(e))
-			}
-
-			if (parsedTask.assignees.length > 0) {
-				const searches = []
-				parsedTask.assignees.forEach(a => {
-					searches.push(this.userService.getAll({}, {s: a})
-						.then(users => {
-							const user = users.find(u => u.username.toLowerCase() === a.toLowerCase())
-							if (typeof user !== 'undefined') {
-								assignees.push(user)
-							}
-							return Promise.resolve(users)
-						}),
-					)
-				})
-
-				return Promise.all(searches)
-					.then(() => createTask())
-			}
-
-			return createTask()
-		},
-	},
-}
diff --git a/src/components/tasks/mixins/taskList.js b/src/components/tasks/mixins/taskList.js
index 130e9390..d411e78f 100644
--- a/src/components/tasks/mixins/taskList.js
+++ b/src/components/tasks/mixins/taskList.js
@@ -38,7 +38,7 @@ export default {
 		'$route.path': 'loadTasksOnSavedFilter',
 	},
 	methods: {
-		loadTasks(
+		async loadTasks(
 			page,
 			search = '',
 			params = null,
@@ -76,17 +76,9 @@ export default {
 			}
 
 			this.tasks = []
-
-			this.taskCollectionService.getAll(list, params, page)
-				.then(r => {
-					this.tasks = r
-					this.currentPage = page
-
-					this.loadedList = JSON.parse(JSON.stringify(currentList))
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			this.tasks = await this.taskCollectionService.getAll(list, params, page)
+			this.currentPage = page
+			this.loadedList = JSON.parse(JSON.stringify(currentList))
 		},
 
 		loadTasksForPage(e) {
diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index c0260987..ba03e7b2 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -35,7 +35,7 @@
 				<div class="filename">{{ a.file.name }}</div>
 				<div class="info">
 					<p class="collapses">
-						<i18n path="task.attachment.createdBy">
+						<i18n-t keypath="task.attachment.createdBy">
 							<span v-tooltip="formatDate(a.created)">
 								{{ formatDateSince(a.created) }}
 							</span>
@@ -44,7 +44,7 @@
 								:user="a.createdBy"
 								:is-inline="true"
 							/>
-						</i18n>
+						</i18n-t>
 						<span>
 							{{ a.file.getHumanSize() }}
 						</span>
@@ -218,24 +218,19 @@ export default {
 		uploadFiles(files) {
 			uploadFiles(this.attachmentService, this.taskId, files)
 		},
-		deleteAttachment() {
-			this.attachmentService
-				.delete(this.attachmentToDelete)
-				.then((r) => {
-					this.$store.commit(
-						'attachments/removeById',
-						this.attachmentToDelete.id,
-					)
-					this.$message.success(r)
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.showDeleteModal = false
-				})
+		async deleteAttachment() {
+			try {
+				const r = await this.attachmentService.delete(this.attachmentToDelete)
+				this.$store.commit(
+					'attachments/removeById',
+					this.attachmentToDelete.id,
+				)
+				this.$message.success(r)
+			} finally{
+				this.showDeleteModal = false
+			}
 		},
-		viewOrDownload(attachment) {
+		async viewOrDownload(attachment) {
 			if (
 				attachment.file.name.endsWith('.jpg') ||
 				attachment.file.name.endsWith('.png') ||
@@ -243,9 +238,7 @@ export default {
 				attachment.file.name.endsWith('.gif')
 			) {
 				this.showImageModal = true
-				this.attachmentService.getBlobUrl(attachment).then((url) => {
-					this.attachmentImageBlobUrl = url
-				})
+				this.attachmentImageBlobUrl = await this.attachmentService.getBlobUrl(attachment)
 			} else {
 				this.downloadAttachment(attachment)
 			}
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index e66f9962..9cdc2c03 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@@ -66,7 +66,7 @@
 						</transition>
 					</div>
 					<editor
-						:has-preview="true"
+						:hasPreview="true"
 						:is-edit-enabled="canWrite"
 						:upload-callback="attachmentUpload"
 						:upload-enabled="true"
@@ -110,7 +110,7 @@
 										taskCommentService.loading &&
 										!isCommentEdit,
 								}"
-								:has-preview="false"
+								:hasPreview="false"
 								:upload-callback="attachmentUpload"
 								:upload-enabled="true"
 								:placeholder="$t('task.comment.placeholder')"
@@ -134,9 +134,9 @@
 
 		<transition name="modal">
 			<modal
-				@close="showDeleteModal = false"
-				@submit="deleteComment()"
 				v-if="showDeleteModal"
+				@close="showDeleteModal = false"
+				@submit="() => deleteComment(commentToDelete)"
 			>
 				<template #header><span>{{ $t('task.comment.delete') }}</span></template>
 
@@ -152,22 +152,17 @@
 </template>
 
 <script>
+import AsyncEditor from '@/components/input/AsyncEditor'
+
 import TaskCommentService from '../../../services/taskComment'
 import TaskCommentModel from '../../../models/taskComment'
-import LoadingComponent from '../../misc/loading'
-import ErrorComponent from '../../misc/error'
 import {uploadFile} from '@/helpers/attachments'
 import {mapState} from 'vuex'
 
 export default {
 	name: 'comments',
 	components: {
-		editor: () => ({
-			component: import('../../input/editor'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	props: {
 		taskId: {
@@ -191,7 +186,6 @@ export default {
 			taskCommentService: new TaskCommentService(),
 			newComment: new TaskCommentModel(),
 			editorActive: true,
-			actions: {},
 
 			saved: null,
 			saving: null,
@@ -200,43 +194,46 @@ export default {
 	},
 	watch: {
 		taskId: {
-			handler(taskId) {
-				if (!this.enabled) {
-					return
-				}
-
-				this.loadComments()
-				this.newComment.taskId = taskId
-				this.commentEdit.taskId = taskId
-				this.commentToDelete.taskId = taskId
-			},
+			handler: 'loadComments',
 			immediate: true,
 		},
-		canWrite() {
-			this.makeActions()
+	},
+	computed: {
+		...mapState({
+			userAvatar: state => state.auth.info.getAvatarUrl(48),
+			enabled: state => state.config.taskCommentsEnabled,
+		}),
+		actions() {
+			if (!this.canWrite) {
+				return {}
+			}
+			return Object.fromEntries(this.comments.map((c) => ([
+				c.id,
+				[{
+					action: () => this.toggleDelete(c.id),
+					title: this.$t('misc.delete'),
+				}],
+			])))
 		},
 	},
-	computed: mapState({
-		userAvatar: state => state.auth.info.getAvatarUrl(48),
-		enabled: state => state.config.taskCommentsEnabled,
-	}),
+
 	methods: {
 		attachmentUpload(...args) {
 			return uploadFile(this.taskId, ...args)
 		},
 
-		loadComments() {
-			this.taskCommentService
-				.getAll({taskId: this.taskId})
-				.then(r => {
-					this.$set(this, 'comments', r)
-					this.makeActions()
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+		async loadComments(taskId) {
+			if (!this.enabled) {
+				return
+			}
+
+			this.newComment.taskId = taskId
+			this.commentEdit.taskId = taskId
+			this.commentToDelete.taskId = taskId
+			this.comments = await this.taskCommentService.getAll({taskId})
 		},
-		addComment() {
+
+		async addComment() {
 			if (this.newComment.comment === '') {
 				return
 			}
@@ -250,30 +247,27 @@ export default {
 			this.$nextTick(() => (this.editorActive = true))
 			this.creating = true
 
-			this.taskCommentService
-				.create(this.newComment)
-				.then((r) => {
-					this.comments.push(r)
-					this.newComment.comment = ''
-					this.$message.success({message: this.$t('task.comment.addedSuccess')})
-					this.makeActions()
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.creating = false
-				})
+			try {
+				const comment = await this.taskCommentService.create(this.newComment)
+				this.comments.push(comment)
+				this.newComment.comment = ''
+				this.$message.success({message: this.$t('task.comment.addedSuccess')})
+			} finally {
+				this.creating = false
+			}
 		},
+
 		toggleEdit(comment) {
 			this.isCommentEdit = !this.isCommentEdit
 			this.commentEdit = comment
 		},
+
 		toggleDelete(commentId) {
 			this.showDeleteModal = !this.showDeleteModal
 			this.commentToDelete.id = commentId
 		},
-		editComment() {
+
+		async editComment() {
 			if (this.commentEdit.comment === '') {
 				return
 			}
@@ -281,54 +275,30 @@ export default {
 			this.saving = this.commentEdit.id
 
 			this.commentEdit.taskId = this.taskId
-			this.taskCommentService
-				.update(this.commentEdit)
-				.then((r) => {
-					for (const c in this.comments) {
-						if (this.comments[c].id === this.commentEdit.id) {
-							this.$set(this.comments, c, r)
-						}
+			try {
+				const comment = this.taskCommentService.update(this.commentEdit)
+				for (const c in this.comments) {
+					if (this.comments[c].id === this.commentEdit.id) {
+						this.comments[c] = comment
 					}
-					this.saved = this.commentEdit.id
-					setTimeout(() => {
-						this.saved = null
-					}, 2000)
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.isCommentEdit = false
-					this.saving = null
-				})
+				}
+				this.saved = this.commentEdit.id
+				setTimeout(() => {
+					this.saved = null
+				}, 2000)
+			} finally {
+				this.isCommentEdit = false
+				this.saving = null
+			}
 		},
-		deleteComment() {
-			this.taskCommentService
-				.delete(this.commentToDelete)
-				.then(() => {
-					for (const a in this.comments) {
-						if (this.comments[a].id === this.commentToDelete.id) {
-							this.comments.splice(a, 1)
-						}
-					}
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.showDeleteModal = false
-				})
-		},
-		makeActions() {
-			if (this.canWrite) {
-				this.comments.forEach((c) => {
-					this.$set(this.actions, c.id, [
-						{
-							action: () => this.toggleDelete(c.id),
-							title: this.$t('misc.delete'),
-						},
-					])
-				})
+
+		async deleteComment(commentToDelete) {
+			try {
+				await this.taskCommentService.delete(commentToDelete)
+				const index = this.comments.findIndex(({id}) => id === commentToDelete.id)
+				this.comments.splice(index, 1)
+			} finally {
+				this.showDeleteModal = false
 			}
 		},
 	},
diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue
index 3620697a..c5ef510b 100644
--- a/src/components/tasks/partials/defer-task.vue
+++ b/src/components/tasks/partials/defer-task.vue
@@ -57,12 +57,14 @@ export default {
 		flatPickr,
 	},
 	props: {
-		value: {
+		modelValue: {
 			required: true,
 		},
 	},
+	emits: ['update:modelValue'],
+
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.task = value
 				this.dueDate = value.dueDate
@@ -83,7 +85,7 @@ export default {
 
 		this.changeInterval = setInterval(this.updateDueDate, 1000)
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		if (this.changeInterval) {
 			clearInterval(this.changeInterval)
 		}
@@ -110,7 +112,8 @@ export default {
 			this.dueDate = this.dueDate.setDate(this.dueDate.getDate() + days)
 			this.updateDueDate()
 		},
-		updateDueDate() {
+
+		async updateDueDate() {
 			if (!this.dueDate) {
 				return
 			}
@@ -120,16 +123,10 @@ export default {
 			}
 
 			this.task.dueDate = new Date(this.dueDate)
-			this.taskService
-				.update(this.task)
-				.then((r) => {
-					this.lastValue = r.dueDate
-					this.task = r
-					this.$emit('input', r)
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			const task = await this.taskService.update(this.task)
+			this.lastValue = task.dueDate
+			this.task = task
+			this.$emit('update:modelValue', task)
 		},
 	},
 }
diff --git a/src/components/tasks/partials/description.vue b/src/components/tasks/partials/description.vue
index 89b5ec72..28fd5a88 100644
--- a/src/components/tasks/partials/description.vue
+++ b/src/components/tasks/partials/description.vue
@@ -30,8 +30,7 @@
 </template>
 
 <script>
-import LoadingComponent from '@/components/misc/loading.vue'
-import ErrorComponent from '@/components/misc/error.vue'
+import AsyncEditor from '@/components/input/AsyncEditor'
 
 import {LOADING} from '@/store/mutation-types'
 import {mapState} from 'vuex'
@@ -39,12 +38,7 @@ import {mapState} from 'vuex'
 export default {
 	name: 'description',
 	components: {
-		editor: () => ({
-			component: import('@/components/input/editor.vue'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	data() {
 		return {
@@ -57,7 +51,7 @@ export default {
 		loading: LOADING,
 	}),
 	props: {
-		value: {
+		modelValue: {
 			required: true,
 		},
 		attachmentUpload: {
@@ -67,8 +61,9 @@ export default {
 			required: true,
 		},
 	},
+	emits: ['update:modelValue'],
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.task = value
 			},
@@ -76,24 +71,19 @@ export default {
 		},
 	},
 	methods: {
-		save() {
+		async save() {
 			this.saving = true
 
-			this.$store.dispatch('tasks/update', this.task)
-				.then(t => {
-					this.task = t
-					this.$emit('input', t)
-					this.saved = true
-					setTimeout(() => {
-						this.saved = false
-					}, 2000)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.saving = false
-				})
+			try {
+				this.task = await this.$store.dispatch('tasks/update', this.task)
+				this.$emit('update:modelValue', this.task)
+				this.saved = true
+				setTimeout(() => {
+					this.saved = false
+				}, 2000)
+			} finally {
+				this.saving = false
+			}
 		},
 	},
 }
diff --git a/src/components/tasks/partials/editAssignees.vue b/src/components/tasks/partials/editAssignees.vue
index 0eea38ff..b32743f8 100644
--- a/src/components/tasks/partials/editAssignees.vue
+++ b/src/components/tasks/partials/editAssignees.vue
@@ -6,7 +6,6 @@
 		<multiselect
 			:loading="listUserService.loading"
 			:placeholder="$t('task.assignee.placeholder')"
-			:disabled="disabled"
 			:multiple="true"
 			@search="findUser"
 			:search-results="foundUsers"
@@ -54,10 +53,11 @@ export default {
 		disabled: {
 			default: false,
 		},
-		value: {
+		modelValue: {
 			type: Array,
 		},
 	},
+	emits: ['update:modelValue'],
 	data() {
 		return {
 			newAssignee: new UserModel(),
@@ -68,59 +68,49 @@ export default {
 		}
 	},
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.assignees = value
 			},
 			immediate: true,
+			deep: true,
 		},
 	},
 	methods: {
-		addAssignee(user) {
-			this.$store.dispatch('tasks/addAssignee', {user: user, taskId: this.taskId})
-				.then(() => {
-					this.$emit('input', this.assignees)
-					this.$message.success({message: this.$t('task.assignee.assignSuccess')})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+		async addAssignee(user) {
+			await this.$store.dispatch('tasks/addAssignee', {user: user, taskId: this.taskId})
+			this.$emit('update:modelValue', this.assignees)
+			this.$message.success({message: this.$t('task.assignee.assignSuccess')})
 		},
-		removeAssignee(user) {
-			this.$store.dispatch('tasks/removeAssignee', {user: user, taskId: this.taskId})
-				.then(() => {
-					// Remove the assignee from the list
-					for (const a in this.assignees) {
-						if (this.assignees[a].id === user.id) {
-							this.assignees.splice(a, 1)
-						}
-					}
-					this.$message.success({message: this.$t('task.assignee.unassignSuccess')})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+
+		async removeAssignee(user) {
+			await this.$store.dispatch('tasks/removeAssignee', {user: user, taskId: this.taskId})
+
+			// Remove the assignee from the list
+			for (const a in this.assignees) {
+				if (this.assignees[a].id === user.id) {
+					this.assignees.splice(a, 1)
+				}
+			}
+			this.$message.success({message: this.$t('task.assignee.unassignSuccess')})
 		},
-		findUser(query) {
+
+		async findUser(query) {
 			if (query === '') {
 				this.clearAllFoundUsers()
 				return
 			}
 
-			this.listUserService.getAll({listId: this.listId}, {s: query})
-				.then(response => {
-					// Filter the results to not include users who are already assigned
-					const filteredResponse = response.filter(({id}) => !includesById(this.assignees, id))
+			const response = await this.listUserService.getAll({listId: this.listId}, {s: query})
 
-					this.$set(this, 'foundUsers', filteredResponse)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			// Filter the results to not include users who are already assigned
+			this.foundUsers = response.filter(({id}) => !includesById(this.assignees, id))
 		},
+
 		clearAllFoundUsers() {
-			this.$set(this, 'foundUsers', [])
+			this.foundUsers = []
 		},
+
 		focus() {
 			this.$refs.multiselect.focus()
 		},
diff --git a/src/components/tasks/partials/editLabels.vue b/src/components/tasks/partials/editLabels.vue
index 279ecfdf..25ee20b6 100644
--- a/src/components/tasks/partials/editLabels.vue
+++ b/src/components/tasks/partials/editLabels.vue
@@ -47,7 +47,7 @@ import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 export default {
 	name: 'edit-labels',
 	props: {
-		value: {
+		modelValue: {
 			default: () => [],
 			type: Array,
 		},
@@ -60,6 +60,7 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['update:modelValue', 'change'],
 	data() {
 		return {
 			labelTaskService: new LabelTaskService(),
@@ -72,11 +73,12 @@ export default {
 		Multiselect,
 	},
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.labels = value
 			},
 			immediate: true,
+			deep: true,
 		},
 	},
 	computed: {
@@ -91,9 +93,10 @@ export default {
 		findLabel(query) {
 			this.query = query
 		},
-		addLabel(label, showNotification = true) {
+
+		async addLabel(label, showNotification = true) {
 			const bubble = () => {
-				this.$emit('input', this.labels)
+				this.$emit('update:modelValue', this.labels)
 				this.$emit('change', this.labels)
 			}
 			
@@ -102,25 +105,21 @@ export default {
 				return
 			}
 
-			this.$store.dispatch('tasks/addLabel', {label: label, taskId: this.taskId})
-				.then(() => {
-					bubble()
-					if (showNotification) {
-						this.$message.success({message: this.$t('task.label.addSuccess')})
-					}
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			await this.$store.dispatch('tasks/addLabel', {label: label, taskId: this.taskId})
+			bubble()
+			if (showNotification) {
+				this.$message.success({message: this.$t('task.label.addSuccess')})
+			}
 		},
-		removeLabel(label) {
+
+		async removeLabel(label) {
 			const removeFromState = () => {
 				for (const l in this.labels) {
 					if (this.labels[l].id === label.id) {
 						this.labels.splice(l, 1)
 					}
 				}
-				this.$emit('input', this.labels)
+				this.$emit('update:modelValue', this.labels)
 				this.$emit('change', this.labels)
 			}
 
@@ -129,30 +128,21 @@ export default {
 				return
 			}
 
-			this.$store.dispatch('tasks/removeLabel', {label: label, taskId: this.taskId})
-				.then(() => {
-					removeFromState()
-					this.$message.success({message: this.$t('task.label.removeSuccess')})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			await this.$store.dispatch('tasks/removeLabel', {label: label, taskId: this.taskId})
+			removeFromState()
+			this.$message.success({message: this.$t('task.label.removeSuccess')})
 		},
-		createAndAddLabel(title) {
+
+		async createAndAddLabel(title) {
 			if (this.taskId === 0) {
 				return
 			}
 
 			const newLabel = new LabelModel({title: title})
-			this.$store.dispatch('labels/createLabel', newLabel)
-				.then(r => {
-					this.addLabel(r, false)
-					this.labels.push(r)
-					this.$message.success({message: this.$t('task.label.addCreateSuccess')})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			const label = await this.$store.dispatch('labels/createLabel', newLabel)
+			this.addLabel(label, false)
+			this.labels.push(label)
+			this.$message.success({message: this.$t('task.label.addCreateSuccess')})
 		},
 
 	},
diff --git a/src/components/tasks/partials/heading.vue b/src/components/tasks/partials/heading.vue
index 96f76d44..326b94e1 100644
--- a/src/components/tasks/partials/heading.vue
+++ b/src/components/tasks/partials/heading.vue
@@ -8,7 +8,7 @@
 			@blur="save($event.target.textContent)"
 			@keydown.enter.prevent.stop="$event.target.blur()"
 			:contenteditable="canWrite ? 'true' : 'false'"
-			spellcheck="false"
+			:spellcheck="false"
 		>
 			{{ task.title.trim() }}
 		</h1>
@@ -39,14 +39,14 @@ export default {
 	computed: {
 		...mapState(['loading']),
 		task() {
-			return this.value
+			return this.modelValue
 		},
 		textIdentifier() {
 			return this.task?.getTextIdentifier() || ''
 		},
 	},
 	props: {
-		value: {
+		modelValue: {
 			required: true,
 		},
 		canWrite: {
@@ -54,8 +54,11 @@ export default {
 			default: false,
 		},
 	},
+
+	emits: ['update:modelValue'],
+
 	methods: {
-		save(title) {
+		async save(title) {
 			// We only want to save if the title was actually changed.
 			// Because the contenteditable does not have a change event
 			// we're building it ourselves and only continue
@@ -71,20 +74,17 @@ export default {
 				title,
 			}
 
-			this.$store.dispatch('tasks/update', newTask)
-				.then((task) => {
-					this.$emit('input', task)
-					this.showSavedMessage = true
-					setTimeout(() => {
-						this.showSavedMessage = false
-					}, 2000)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.saving = false
-				})
+			try {
+				const task = await this.$store.dispatch('tasks/update', newTask)
+				this.$emit('update:modelValue', task)
+				this.showSavedMessage = true
+				setTimeout(() => {
+					this.showSavedMessage = false
+				}, 2000)
+			}
+			finally {
+				this.saving = false
+			}
 		},
 	},
 }
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index e7e30694..6bc60297 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -6,9 +6,9 @@
 			'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
 		}"
 		:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
-		@click.ctrl="() => markTaskAsDone(task)"
+		@click.ctrl="() => toggleTaskDone(task)"
 		@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
-		@click.meta="() => markTaskAsDone(task)"
+		@click.meta="() => toggleTaskDone(task)"
 		class="task loader-container draggable"
 	>
 		<span class="task-id">
@@ -93,23 +93,19 @@ export default {
 		},
 	},
 	methods: {
-		markTaskAsDone(task) {
+		async toggleTaskDone(task) {
 			this.loadingInternal = true
-			this.$store.dispatch('tasks/update', {
-				...task,
-				done: !task.done,
-			})
-				.then(() => {
-					if (task.done) {
-						playPop()
-					}
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.loadingInternal = false
+			try {
+				await this.$store.dispatch('tasks/update', {
+					...task,
+					done: !task.done,
 				})
+				if (task.done) {
+					playPop()
+				}
+			} finally {
+				this.loadingInternal = false
+			}
 		},
 	},
 }
diff --git a/src/components/tasks/partials/listSearch.vue b/src/components/tasks/partials/listSearch.vue
index 9e0e7da1..252424f4 100644
--- a/src/components/tasks/partials/listSearch.vue
+++ b/src/components/tasks/partials/listSearch.vue
@@ -32,44 +32,43 @@ export default {
 		}
 	},
 	props: {
-		value: {
+		modelValue: {
 			required: false,
 		},
 	},
+	emits: ['update:modelValue', 'selected'],
 	components: {
 		Multiselect,
 	},
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.list = value
 			},
 			immeditate: true,
+			deep: true,
 		},
 	},
 	methods: {
-		findLists(query) {
+		async findLists(query) {
 			if (query === '') {
 				this.clearAll()
 				return
 			}
 
-			this.listSerivce.getAll({}, {s: query})
-				.then(response => {
-					this.$set(this, 'foundLists', response)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			this.foundLists = await this.listSerivce.getAll({}, {s: query})
 		},
+
 		clearAll() {
-			this.$set(this, 'foundLists', [])
+			this.foundLists = []
 		},
+
 		select(list) {
 			this.list = list
 			this.$emit('selected', list)
-			this.$emit('input', list)
+			this.$emit('update:modelValue', list)
 		},
+
 		namespace(namespaceId) {
 			const namespace = this.$store.getters['namespaces/getNamespaceById'](namespaceId)
 			if (namespace !== null) {
diff --git a/src/components/tasks/partials/percentDoneSelect.vue b/src/components/tasks/partials/percentDoneSelect.vue
index a942a6f0..b3541699 100644
--- a/src/components/tasks/partials/percentDoneSelect.vue
+++ b/src/components/tasks/partials/percentDoneSelect.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="select">
-		<select :disabled="disabled || null" @change="updateData" v-model.number="percentDone">
+		<select :disabled="disabled || null" v-model.number="percentDone">
 			<option value="0">0%</option>
 			<option value="0.1">10%</option>
 			<option value="0.2">20%</option>
@@ -19,13 +19,8 @@
 <script>
 export default {
 	name: 'percentDoneSelect',
-	data() {
-		return {
-			percentDone: 0,
-		}
-	},
 	props: {
-		value: {
+		modelValue: {
 			default: 0,
 			type: Number,
 		},
@@ -33,19 +28,16 @@ export default {
 			default: false,
 		},
 	},
-	watch: {
-		// Set the priority to the :value every time it changes from the outside
-		value(newVal) {
-			this.percentDone = newVal
-		},
-	},
-	mounted() {
-		this.percentDone = this.value
-	},
-	methods: {
-		updateData() {
-			this.$emit('input', this.percentDone)
-			this.$emit('change')
+	emits: ['update:modelValue', 'change'],
+	computed: {
+		percentDone: {
+			get() {
+				return this.modelValue
+			},
+			set(percentDone) {
+				this.$emit('update:modelValue', percentDone)
+				this.$emit('change')
+			},
 		},
 	},
 }
diff --git a/src/components/tasks/partials/prioritySelect.vue b/src/components/tasks/partials/prioritySelect.vue
index 9f09f2a6..4cddf8de 100644
--- a/src/components/tasks/partials/prioritySelect.vue
+++ b/src/components/tasks/partials/prioritySelect.vue
@@ -23,7 +23,7 @@ export default {
 		}
 	},
 	props: {
-		value: {
+		modelValue: {
 			default: 0,
 			type: Number,
 		},
@@ -31,9 +31,10 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['update:modelValue', 'change'],
 	watch: {
 		// Set the priority to the :value every time it changes from the outside
-		value: {
+		modelValue: {
 			handler(value) {
 				this.priority = value
 			},
@@ -42,7 +43,7 @@ export default {
 	},
 	methods: {
 		updateData() {
-			this.$emit('input', this.priority)
+			this.$emit('update:modelValue', this.priority)
 			this.$emit('change')
 		},
 	},
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index bcbed131..9279e147 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -185,76 +185,62 @@ export default {
 		},
 	},
 	methods: {
-		findTasks(query) {
-			this.taskService.getAll({}, {s: query})
-				.then(response => {
-					this.$set(this, 'foundTasks', response)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+		async findTasks(query) {
+			this.foundTasks = await this.taskService.getAll({}, {s: query})
 		},
-		addTaskRelation() {
-			let rel = new TaskRelationModel({
+
+		async addTaskRelation() {
+			const rel = new TaskRelationModel({
 				taskId: this.taskId,
 				otherTaskId: this.newTaskRelationTask.id,
 				relationKind: this.newTaskRelationKind,
 			})
-			this.taskRelationService.create(rel)
-				.then(() => {
-					if (!this.relatedTasks[this.newTaskRelationKind]) {
-						this.$set(this.relatedTasks, this.newTaskRelationKind, [])
-					}
-					this.relatedTasks[this.newTaskRelationKind].push(this.newTaskRelationTask)
-					this.newTaskRelationTask = null
-					this.saved = true
-					this.showNewRelationForm = false
-					setTimeout(() => {
-						this.saved = false
-					}, 2000)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			await this.taskRelationService.create(rel)
+			if (!this.relatedTasks[this.newTaskRelationKind]) {
+				this.relatedTasks[this.newTaskRelationKind] = []
+			}
+			this.relatedTasks[this.newTaskRelationKind].push(this.newTaskRelationTask)
+			this.newTaskRelationTask = null
+			this.saved = true
+			this.showNewRelationForm = false
+			setTimeout(() => {
+				this.saved = false
+			}, 2000)
 		},
-		removeTaskRelation() {
+
+		async removeTaskRelation() {
 			const rel = new TaskRelationModel({
 				relationKind: this.relationToDelete.relationKind,
 				taskId: this.taskId,
 				otherTaskId: this.relationToDelete.otherTaskId,
 			})
-			this.taskRelationService.delete(rel)
-				.then(() => {
-					Object.keys(this.relatedTasks).forEach(relationKind => {
-						for (const t in this.relatedTasks[relationKind]) {
-							if (this.relatedTasks[relationKind][t].id === this.relationToDelete.otherTaskId && relationKind === this.relationToDelete.relationKind) {
-								this.relatedTasks[relationKind].splice(t, 1)
-							}
-						}
-					})
-					this.saved = true
-					setTimeout(() => {
-						this.saved = false
-					}, 2000)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.showDeleteModal = false
+			try {
+				await this.taskRelationService.delete(rel)
+
+				Object.entries(this.relatedTasks).some(([relationKind, t]) => {
+					const found = this.relatedTasks[relationKind][t].id === this.relationToDelete.otherTaskId &&
+						relationKind === this.relationToDelete.relationKind
+					if (!found) return false
+
+					this.relatedTasks[relationKind].splice(t, 1)
+					return true
 				})
+
+				this.saved = true
+				setTimeout(() => {
+					this.saved = false
+				}, 2000)
+			} finally {
+				this.showDeleteModal = false
+			}
 		},
-		createAndRelateTask(title) {
+
+		async createAndRelateTask(title) {
 			const newTask = new TaskModel({title: title, listId: this.listId})
-			this.taskService.create(newTask)
-				.then(r => {
-					this.newTaskRelationTask = r
-					this.addTaskRelation()
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			this.newTaskRelationTask = await this.taskService.create(newTask)
+			await this.addTaskRelation()
 		},
+
 		relationKindTitle(kind, length) {
 			return this.$tc(`task.relation.kinds.${kind}`, length)
 		},
diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index 824ac8a8..f723522a 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -37,7 +37,7 @@ export default {
 		}
 	},
 	props: {
-		value: {
+		modelValue: {
 			default: () => [],
 			validator: prop => {
 				// This allows arrays of Dates and strings
@@ -61,14 +61,15 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['update:modelValue', 'change'],
 	components: {
 		datepicker,
 	},
 	mounted() {
-		this.reminders = this.value
+		this.reminders = this.modelValue
 	},
 	watch: {
-		value(newVal) {
+		modelValue(newVal) {
 			for (const i in newVal) {
 				if (typeof newVal[i] === 'string') {
 					newVal[i] = new Date(newVal[i])
@@ -79,7 +80,7 @@ export default {
 	},
 	methods: {
 		updateData() {
-			this.$emit('input', this.reminders)
+			this.$emit('update:modelValue', this.reminders)
 			this.$emit('change')
 		},
 		addReminderDate(index = null) {
diff --git a/src/components/tasks/partials/repeatAfter.vue b/src/components/tasks/partials/repeatAfter.vue
index 3168637e..f847b65e 100644
--- a/src/components/tasks/partials/repeatAfter.vue
+++ b/src/components/tasks/partials/repeatAfter.vue
@@ -66,7 +66,7 @@ export default {
 		}
 	},
 	props: {
-		value: {
+		modelValue: {
 			default: () => {},
 			required: true,
 		},
@@ -74,8 +74,9 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['update:modelValue', 'change'],
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.task = value
 				if (typeof value.repeatAfter !== 'undefined') {
@@ -92,7 +93,7 @@ export default {
 			}
 			
 			this.task.repeatAfter = this.repeatAfter
-			this.$emit('input', this.task)
+			this.$emit('update:modelValue', this.task)
 			this.$emit('change')
 		},
 		setRepeatAfter(amount, type) {
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index acc22a80..697207cf 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -140,6 +140,7 @@ export default {
 			default: true,
 		},
 	},
+	emits: ['task-updated'],
 	watch: {
 		theTask(newVal) {
 			this.task = newVal
@@ -149,7 +150,7 @@ export default {
 		this.task = this.theTask
 		document.addEventListener('click', this.hideDeferDueDatePopup)
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		document.removeEventListener('click', this.hideDeferDueDatePopup)
 	},
 	computed: {
@@ -165,56 +166,47 @@ export default {
 		},
 	},
 	methods: {
-		markAsDone(checked) {
-			const updateFunc = () => {
-				this.taskService.update(this.task)
-					.then(t => {
-						if (this.task.done) {
-							playPop()
-						}
-						this.task = t
-						this.$emit('task-updated', t)
-						this.$message.success({
-							message: this.task.done ?
-								this.$t('task.doneSuccess') :
-								this.$t('task.undoneSuccess'),
-						}, [{
-							title: 'Undo',
-							callback: () => {
-								this.task.done = !this.task.done
-								this.markAsDone(!checked)
-							},
-						}])
-					})
-					.catch(e => {
-						this.$message.error(e)
-					})
+		async markAsDone(checked) {
+			const updateFunc = async () => {
+				const task = await this.taskService.update(this.task)
+				if (this.task.done) {
+					playPop()
+				}
+				this.task = task
+				this.$emit('task-updated', task)
+				this.$message.success({
+					message: this.task.done ?
+						this.$t('task.doneSuccess') :
+						this.$t('task.undoneSuccess'),
+				}, [{
+					title: 'Undo',
+					callback() {
+						this.task.done = !this.task.done
+						this.markAsDone(!checked)
+					},
+				}])
 			}
 
 			if (checked) {
 				setTimeout(updateFunc, 300) // Delay it to show the animation when marking a task as done
 			} else {
-				updateFunc() // Don't delay it when un-marking it as it doesn't have an animation the other way around
+				await updateFunc() // Don't delay it when un-marking it as it doesn't have an animation the other way around
 			}
 		},
-		toggleFavorite() {
+
+		async toggleFavorite() {
 			this.task.isFavorite = !this.task.isFavorite
-			this.taskService.update(this.task)
-				.then(t => {
-					this.task = t
-					this.$emit('task-updated', t)
-					this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			this.task = await this.taskService.update(this.task)
+			this.$emit('task-updated', this.task)
+			this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
 		},
 		hideDeferDueDatePopup(e) {
-			if (this.showDefer) {
-				closeWhenClickedOutside(e, this.$refs.deferDueDate.$el, () => {
-					this.showDefer = false
-				})
+			if (!this.showDefer) {
+				return
 			}
+			closeWhenClickedOutside(e, this.$refs.deferDueDate.$el, () => {
+				this.showDefer = false
+			})
 		},
 	},
 }
diff --git a/src/components/tasks/partials/sort.vue b/src/components/tasks/partials/sort.vue
index 8f65d7c9..c3581ba5 100644
--- a/src/components/tasks/partials/sort.vue
+++ b/src/components/tasks/partials/sort.vue
@@ -1,5 +1,5 @@
 <template>
-	<a @click="click">
+	<a @click="$emit('click')">
 		<icon icon="sort-up" v-if="order === 'asc'"/>
 		<icon icon="sort-up" rotation="180" v-else-if="order === 'desc'"/>
 		<icon icon="sort" v-else/>
@@ -15,10 +15,6 @@ export default {
 			default: 'none',
 		},
 	},
-	methods: {
-		click() {
-			this.$emit('click')
-		},
-	},
+	emits: ['click'],
 }
 </script>
diff --git a/src/components/user/avatar-settings.vue b/src/components/user/avatar-settings.vue
index 8fb03565..6d42f17d 100644
--- a/src/components/user/avatar-settings.vue
+++ b/src/components/user/avatar-settings.vue
@@ -87,43 +87,38 @@ export default {
 		Cropper,
 	},
 	methods: {
-		avatarStatus() {
-			this.avatarService.get({})
-				.then(r => {
-					this.avatarProvider = r.avatarProvider
-				})
-				.catch(e => this.$message.error(e))
+		async avatarStatus() {
+			const { avatarProvider } = await this.avatarService.get({})
+			this.avatarProvider = avatarProvider
 		},
-		updateAvatarStatus() {
+
+		async updateAvatarStatus() {
 			const avatarStatus = new AvatarModel({avatarProvider: this.avatarProvider})
-			this.avatarService.update(avatarStatus)
-				.then(() => {
-					this.$message.success({message: this.$t('user.settings.avatar.statusUpdateSuccess')})
-					this.$store.commit('auth/reloadAvatar')
-				})
-				.catch(e => this.$message.error(e))
+			await this.avatarService.update(avatarStatus)
+			this.$message.success({message: this.$t('user.settings.avatar.statusUpdateSuccess')})
+			this.$store.commit('auth/reloadAvatar')
 		},
-		uploadAvatar() {
+
+		async uploadAvatar() {
 			this.loading = true
 			const {canvas} = this.$refs.cropper.getResult()
 
-			if (canvas) {
-				canvas.toBlob(blob => {
-					this.avatarService.create(blob)
-						.then(() => {
-							this.$message.success({message: this.$t('user.settings.avatar.setSuccess')})
-							this.$store.commit('auth/reloadAvatar')
-						})
-						.catch(e => this.$message.error(e))
-						.finally(() => {
-							this.loading = false
-							this.isCropAvatar = false
-						})
-				})
-			} else {
+			if (!canvas) {
 				this.loading = false
+				return
+			}
+
+			try {
+				const blob = await new Promise(resolve => canvas.toBlob(blob => resolve(blob)))
+				await this.avatarService.create(blob)
+				this.$message.success({message: this.$t('user.settings.avatar.setSuccess')})
+				this.$store.commit('auth/reloadAvatar')
+			} finally {
+				this.loading = false
+				this.isCropAvatar = false
 			}
 		},
+
 		cropAvatar() {
 			const avatar = this.$refs.avatarUploadInput.files
 
diff --git a/src/components/user/settings/data-export.vue b/src/components/user/settings/data-export.vue
index 3060d038..f092444f 100644
--- a/src/components/user/settings/data-export.vue
+++ b/src/components/user/settings/data-export.vue
@@ -43,28 +43,22 @@ export default {
 	name: 'data-export',
 	data() {
 		return {
-			dataExportService: DataExportService,
+			dataExportService: new DataExportService(),
 			password: '',
 			errPasswordRequired: false,
 		}
 	},
-	created() {
-		this.dataExportService = new DataExportService()
-	},
 	methods: {
-		requestDataExport() {
+		async requestDataExport() {
 			if (this.password === '') {
 				this.errPasswordRequired = true
 				this.$refs.passwordInput.focus()
 				return
 			}
 
-			this.dataExportService.request(this.password)
-				.then(() => {
-					this.$message.success({message: this.$t('user.export.success')})
-					this.password = ''
-				})
-				.catch(e => this.$message.error(e))
+			await this.dataExportService.request(this.password)
+			this.$message.success({message: this.$t('user.export.success')})
+			this.password = ''
 		},
 	},
 }
diff --git a/src/components/user/settings/deletion.vue b/src/components/user/settings/deletion.vue
index a769d737..f51c7909 100644
--- a/src/components/user/settings/deletion.vue
+++ b/src/components/user/settings/deletion.vue
@@ -101,34 +101,29 @@ export default {
 		deletionScheduledAt: state => parseDateOrNull(state.auth.info.deletionScheduledAt),
 	}),
 	methods: {
-		deleteAccount() {
+		async deleteAccount() {
 			if (this.password === '') {
 				this.errPasswordRequired = true
 				this.$refs.passwordInput.focus()
 				return
 			}
 
-			this.accountDeleteService.request(this.password)
-				.then(() => {
-					this.$message.success({message: this.$t('user.deletion.requestSuccess')})
-					this.password = ''
-				})
-				.catch(e => this.$message.error(e))
+			await this.accountDeleteService.request(this.password)
+			this.$message.success({message: this.$t('user.deletion.requestSuccess')})
+			this.password = ''
 		},
-		cancelDeletion() {
+
+		async cancelDeletion() {
 			if (this.password === '') {
 				this.errPasswordRequired = true
 				this.$refs.passwordInput.focus()
 				return
 			}
 
-			this.accountDeleteService.cancel(this.password)
-				.then(() => {
-					this.$message.success({message: this.$t('user.deletion.scheduledCancelSuccess')})
-					this.$store.dispatch('auth/refreshUserInfo')
-					this.password = ''
-				})
-				.catch(e => this.$message.error(e))
+			await this.accountDeleteService.cancel(this.password)
+			this.$message.success({message: this.$t('user.deletion.scheduledCancelSuccess')})
+			this.$store.dispatch('auth/refreshUserInfo')
+			this.password = ''
 		},
 	},
 }
diff --git a/src/directives/focus.js b/src/directives/focus.js
index ac5a5460..11d01698 100644
--- a/src/directives/focus.js
+++ b/src/directives/focus.js
@@ -1,6 +1,6 @@
 export default {
 	// When the bound element is inserted into the DOM...
-	inserted: (el, {modifiers}) => {
+	mounted: (el, {modifiers}) => {
 		// Focus the element only if the viewport is big enough
 		// auto focusing elements on mobile can be annoying since in these cases the
 		// keyboard always pops up and takes half of the available space on the screen.
diff --git a/src/directives/tooltip.js b/src/directives/tooltip.js
index ebcdd03d..cfdf05cb 100644
--- a/src/directives/tooltip.js
+++ b/src/directives/tooltip.js
@@ -22,7 +22,7 @@ const calculateArrowTop = (top, tooltip) => {
 const createdTooltips = {}
 
 export default {
-	inserted: (el, {value, modifiers}) => {
+	mounted(el, {value, modifiers}) {
 		// First, we create the tooltip and arrow elements
 		const tooltip = document.createElement('div')
 		tooltip.style.position = 'fixed'
@@ -74,7 +74,7 @@ export default {
 			arrow: arrow,
 		}
 	},
-	unbind: el => {
+	unmounted(el) {
 		if (typeof createdTooltips[el] !== 'undefined') {
 			createdTooltips[el].tooltip.remove()
 			createdTooltips[el].arrow.remove()
diff --git a/src/helpers/attachments.ts b/src/helpers/attachments.ts
index 09ec77f9..4532bee1 100644
--- a/src/helpers/attachments.ts
+++ b/src/helpers/attachments.ts
@@ -11,24 +11,22 @@ export function uploadFile(taskId: number, file: FileModel, onSuccess: () => Fun
 	return uploadFiles(attachmentService, taskId, files, onSuccess)
 }
 
-export function uploadFiles(attachmentService: AttachmentService, taskId: number, files: FileModel[], onSuccess : Function = () => {}) {
+export async function uploadFiles(attachmentService: AttachmentService, taskId: number, files: FileModel[], onSuccess : Function = () => {}) {
 	const attachmentModel = new AttachmentModel({taskId})
-	attachmentService.create(attachmentModel, files)
-		.then(r => {
-			console.debug(`Uploaded attachments for task ${taskId}, response was`, r)
-			if (r.success !== null) {
-				r.success.forEach((attachment: AttachmentModel) => {
-					store.dispatch('tasks/addTaskAttachment', {
-						taskId,
-						attachment,
-					})
-					onSuccess(generateAttachmentUrl(taskId, attachment.id))
-				})
-			}
-			if (r.errors !== null) {
-				throw Error(r.errors)
-			}
+	const response = await attachmentService.create(attachmentModel, files)
+	console.debug(`Uploaded attachments for task ${taskId}, response was`, response)
+
+	response.success?.map((attachment: AttachmentModel) => {
+		store.dispatch('tasks/addTaskAttachment', {
+			taskId,
+			attachment,
 		})
+		onSuccess(generateAttachmentUrl(taskId, attachment.id))
+	})
+
+	if (response.errors !== null) {
+		throw Error(response.errors)
+	}
 }
 
 export function generateAttachmentUrl(taskId: number, attachmentId: number) : any {
diff --git a/src/helpers/auth.ts b/src/helpers/auth.ts
index 53444ff1..b073a8ca 100644
--- a/src/helpers/auth.ts
+++ b/src/helpers/auth.ts
@@ -41,21 +41,19 @@ export const removeToken = () => {
  * Refreshes an auth token while ensuring it is updated everywhere.
  * @returns {Promise<AxiosResponse<any>>}
  */
-export const refreshToken = (persist: boolean): Promise<AxiosResponse> => {
+export async function refreshToken(persist: boolean): Promise<AxiosResponse> {
 	const HTTP = HTTPFactory()
-	return HTTP.post('user/token', null, {
-		headers: {
-			Authorization: `Bearer ${getToken()}`,
-		},
-	})
-		.then(r => {
-			saveToken(r.data.token, persist)
-			return Promise.resolve(r)
-		})
-		.catch(e => {
-			// eslint-disable-next-line
-			console.log('Error renewing token: ', e)
-			return Promise.reject(e)
+	try {
+		const response = await HTTP.post('user/token', null, {
+			headers: {
+				Authorization: `Bearer ${getToken()}`,
+			},
 		})
+		saveToken(response.data.token, persist)
+		return response
+
+	} catch(e) {
+		throw new Error('Error renewing token: ', { cause: e })
+	}
 }
 
diff --git a/src/helpers/filterObject.js b/src/helpers/filterObject.js
deleted file mode 100644
index 5aeadadc..00000000
--- a/src/helpers/filterObject.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export const filterObject = (obj, fn) => {
-	let key
-
-	for (key in obj) {
-		if (fn(obj[key])) {
-			return key
-		}
-	}
-	return null
-}
diff --git a/src/helpers/getListTitle.js b/src/helpers/getListTitle.js
index 3f4a9f86..a7917f03 100644
--- a/src/helpers/getListTitle.js
+++ b/src/helpers/getListTitle.js
@@ -1,6 +1,8 @@
-export const getListTitle = (l, $t) => {
+import {i18n} from '@/i18n'
+
+export const getListTitle = (l) => {
 	if (l.id === -1) {
-		return $t('list.pseudo.favorites.title')
+		return i18n.global.t('list.pseudo.favorites.title')
 	}
 	return l.title
 }
diff --git a/src/helpers/getNamespaceTitle.js b/src/helpers/getNamespaceTitle.js
index 41eb35a5..69dc629b 100644
--- a/src/helpers/getNamespaceTitle.js
+++ b/src/helpers/getNamespaceTitle.js
@@ -1,12 +1,14 @@
-export const getNamespaceTitle = (n, $t) => {
+import {i18n} from '@/i18n'
+
+export const getNamespaceTitle = (n) => {
 	if (n.id === -1) {
-		return $t('namespace.pseudo.sharedLists.title')
+		return i18n.global.t('namespace.pseudo.sharedLists.title')
 	}
 	if (n.id === -2) {
-		return $t('namespace.pseudo.favorites.title')
+		return i18n.global.t('namespace.pseudo.favorites.title')
 	}
 	if (n.id === -3) {
-		return $t('namespace.pseudo.savedFilters.title')
+		return i18n.global.t('namespace.pseudo.savedFilters.title')
 	}
 	return n.title
 }
diff --git a/src/helpers/labels.ts b/src/helpers/labels.ts
index c38a6261..48183d46 100644
--- a/src/helpers/labels.ts
+++ b/src/helpers/labels.ts
@@ -27,3 +27,14 @@ export function filterLabelsByQuery(state: labelState, labelsToHide: label[], qu
 			return !labelIds.includes(id) && title.toLowerCase().includes(labelQuery)
 		})
 }
+
+
+/**
+ * Returns the labels by id if found
+ * @param {Object} state
+ * @param {Array} ids
+ * @returns {Array}
+ */
+export function getLabelsByIds(state: labelState, ids: number[]) {
+	return Object.values(state.labels).filter(({id}) => ids.includes(id))
+}
\ No newline at end of file
diff --git a/src/helpers/migrator.ts b/src/helpers/migrator.ts
index 7949ab69..92106b76 100644
--- a/src/helpers/migrator.ts
+++ b/src/helpers/migrator.ts
@@ -33,7 +33,7 @@ export const getMigratorFromSlug = (slug: string): Migrator => {
 				isFileMigrator: true,
 			}
 		default:
-			throw Error('Unknown migrator slug ' + slug)
+			throw new Error('Unknown migrator slug ' + slug)
 	}
 }
 
diff --git a/src/helpers/randomId.ts b/src/helpers/randomId.ts
new file mode 100644
index 00000000..3608a165
--- /dev/null
+++ b/src/helpers/randomId.ts
@@ -0,0 +1,5 @@
+const DEFAULT_ID_LENGTH = 9
+
+export function createRandomID(idLength = DEFAULT_ID_LENGTH) {
+	return Math.random().toString(36).substr(2, idLength)
+}
\ No newline at end of file
diff --git a/src/helpers/redirectToProvider.ts b/src/helpers/redirectToProvider.ts
index ba2137f4..df67d3af 100644
--- a/src/helpers/redirectToProvider.ts
+++ b/src/helpers/redirectToProvider.ts
@@ -1,3 +1,5 @@
+import {createRandomID} from '@/helpers/randomId'
+
 interface Provider {
 	name: string
 	key: string
@@ -6,7 +8,7 @@ interface Provider {
 }
 
 export const redirectToProvider = (provider: Provider, redirectUrl: string) => {
-	const state = Math.random().toString(36).substring(2, 24)
+	const state = createRandomID(24)
 	localStorage.setItem('state', state)
 
 	window.location.href = `${provider.authUrl}?client_id=${provider.clientId}&redirect_uri=${redirectUrl}${provider.key}&response_type=code&scope=openid email profile&state=${state}`
diff --git a/src/helpers/time/formatDate.js b/src/helpers/time/formatDate.js
index 89c6a2fc..c3e8c1b7 100644
--- a/src/helpers/time/formatDate.js
+++ b/src/helpers/time/formatDate.js
@@ -2,6 +2,8 @@ import {createDateFromString} from '@/helpers/time/createDateFromString'
 import {format, formatDistanceToNow} from 'date-fns'
 import {enGB, de, fr, ru} from 'date-fns/locale'
 
+import {i18n} from '@/i18n'
+
 const locales = {en: enGB, de, ch: de, fr, ru}
 
 const dateIsValid = date => {
@@ -12,7 +14,7 @@ const dateIsValid = date => {
 	return date instanceof Date && !isNaN(date)
 }
 
-export const formatDate = (date, f, locale) => {
+export const formatDate = (date, f, locale = i18n.global.t('date.locale')) => {
 	if (!dateIsValid(date)) {
 		return ''
 	}
@@ -22,7 +24,15 @@ export const formatDate = (date, f, locale) => {
 	return date ? format(date, f, {locale: locales[locale]}) : ''
 }
 
-export const formatDateSince = (date, $t) => {
+export function formatDateLong(date) {
+	return formatDate(date, 'PPPPpppp')
+}
+
+export function formatDateShort(date) {
+	return formatDate(date, 'PPpp')
+}
+
+export const formatDateSince = (date) => {
 	if (!dateIsValid(date)) {
 		return ''
 	}
@@ -30,7 +40,7 @@ export const formatDateSince = (date, $t) => {
 	date = createDateFromString(date)
 
 	return formatDistanceToNow(date, {
-		locale: locales[$t('date.locale')],
+		locale: locales[i18n.global.t('date.locale')],
 		addSuffix: true,
 	})
 }
diff --git a/src/helpers/utils.ts b/src/helpers/utils.ts
index 34d674c4..cd9a4b5c 100644
--- a/src/helpers/utils.ts
+++ b/src/helpers/utils.ts
@@ -2,6 +2,10 @@ export function findIndexById(array : [], id : string | number) {
 	return array.findIndex(({id: currentId}) => currentId === id)
 }
 
+export function findById(array : [], id : string | number) {
+	return array.find(({id: currentId}) => currentId === id)
+}
+
 export function includesById(array: [], id: string | number) {
 	return array.some(({id: currentId}) => currentId === id)
 }
diff --git a/src/i18n/setup.js b/src/i18n/index.js
similarity index 75%
rename from src/i18n/setup.js
rename to src/i18n/index.js
index 44a09333..0f787d7d 100644
--- a/src/i18n/setup.js
+++ b/src/i18n/index.js
@@ -1,12 +1,10 @@
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
+import { createI18n } from 'vue-i18n'
 import langEN from './lang/en.json'
 
-Vue.use(VueI18n)
-
-export const i18n = new VueI18n({
+export const i18n = createI18n({
 	locale: 'en', // set locale
 	fallbackLocale: 'en',
+	globalInjection: true,
 	messages: {
 		en: langEN,
 	},
@@ -23,26 +21,25 @@ export const availableLanguages = {
 const loadedLanguages = ['en'] // our default language that is preloaded
 
 const setI18nLanguage = lang => {
-	i18n.locale = lang
+	i18n.global.locale = lang
 	document.querySelector('html').setAttribute('lang', lang)
 	return lang
 }
 
 export const loadLanguageAsync = lang => {
-	// If the same language
-	if (i18n.locale === lang) {
-		return Promise.resolve(setI18nLanguage(lang))
-	}
-
-	// If the language was already loaded
-	if (loadedLanguages.includes(lang)) {
-		return Promise.resolve(setI18nLanguage(lang))
+	if (
+		// If the same language
+		i18n.global.locale === lang ||
+		// If the language was already loaded
+		loadedLanguages.includes(lang)
+	) {
+		return setI18nLanguage(lang)
 	}
 
 	// If the language hasn't been loaded yet
 	return import(`./lang/${lang}.json`).then(
 		messages => {
-			i18n.setLocaleMessage(lang, messages.default)
+			i18n.global.setLocaleMessage(lang, messages.default)
 			loadedLanguages.push(lang)
 			return setI18nLanguage(lang)
 		},
diff --git a/src/i18n/lang/de-DE.json b/src/i18n/lang/de-DE.json
index 0d7d67eb..4482730c 100644
--- a/src/i18n/lang/de-DE.json
+++ b/src/i18n/lang/de-DE.json
@@ -22,7 +22,7 @@
       "usernameEmail": "Anmeldename oder E-Mail-Adresse",
       "usernamePlaceholder": "z.B. frederick",
       "email": "E-Mail-Adresse",
-      "emailPlaceholder": "z.B. frederic@vikunja.io",
+      "emailPlaceholder": "z.B. frederic{'@'}vikunja.io",
       "password": "Passwort",
       "passwordRepeat": "Gib dein Passwort erneut ein",
       "passwordPlaceholder": "z.B. •••••••••••",
diff --git a/src/i18n/lang/de-swiss.json b/src/i18n/lang/de-swiss.json
index d9fc5dc1..ebf45805 100644
--- a/src/i18n/lang/de-swiss.json
+++ b/src/i18n/lang/de-swiss.json
@@ -22,7 +22,7 @@
       "usernameEmail": "Benutzernamä oder E-Mail Adrässe",
       "usernamePlaceholder": "z.B. Hansruedi",
       "email": "E-Mail Adrässe",
-      "emailPlaceholder": "z.B. hansruedi@vikunja.io",
+      "emailPlaceholder": "z.B. hansruedi{'@'}vikunja.io",
       "password": "Passwort",
       "passwordRepeat": "Gib dis Passwort nomal iih",
       "passwordPlaceholder": "z.B. •••••••••••",
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 824e19fb..1e14b333 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -22,7 +22,7 @@
       "usernameEmail": "Username Or Email Address",
       "usernamePlaceholder": "e.g. frederick",
       "email": "E-mail address",
-      "emailPlaceholder": "e.g. frederic@vikunja.io",
+      "emailPlaceholder": "e.g. frederic{'@'}vikunja.io",
       "password": "Password",
       "passwordRepeat": "Retype your password",
       "passwordPlaceholder": "e.g. •••••••••••",
diff --git a/src/i18n/lang/es-ES.json b/src/i18n/lang/es-ES.json
index 824e19fb..1e14b333 100644
--- a/src/i18n/lang/es-ES.json
+++ b/src/i18n/lang/es-ES.json
@@ -22,7 +22,7 @@
       "usernameEmail": "Username Or Email Address",
       "usernamePlaceholder": "e.g. frederick",
       "email": "E-mail address",
-      "emailPlaceholder": "e.g. frederic@vikunja.io",
+      "emailPlaceholder": "e.g. frederic{'@'}vikunja.io",
       "password": "Password",
       "passwordRepeat": "Retype your password",
       "passwordPlaceholder": "e.g. •••••••••••",
diff --git a/src/i18n/lang/fr-FR.json b/src/i18n/lang/fr-FR.json
index 2e2caadc..60687da8 100644
--- a/src/i18n/lang/fr-FR.json
+++ b/src/i18n/lang/fr-FR.json
@@ -22,7 +22,7 @@
       "usernameEmail": "Nom d’utilisateur·rice ou adresse courriel",
       "usernamePlaceholder": "p. ex. frederick",
       "email": "Adresse courriel",
-      "emailPlaceholder": "p. ex. frederic@vikunja.io",
+      "emailPlaceholder": "p. ex. frederic{'@'}vikunja.io",
       "password": "Mot de passe",
       "passwordRepeat": "Retape ton mot de passe",
       "passwordPlaceholder": "p. ex. •••••••••••",
diff --git a/src/i18n/lang/pt-BR.json b/src/i18n/lang/pt-BR.json
index 824e19fb..1e14b333 100644
--- a/src/i18n/lang/pt-BR.json
+++ b/src/i18n/lang/pt-BR.json
@@ -22,7 +22,7 @@
       "usernameEmail": "Username Or Email Address",
       "usernamePlaceholder": "e.g. frederick",
       "email": "E-mail address",
-      "emailPlaceholder": "e.g. frederic@vikunja.io",
+      "emailPlaceholder": "e.g. frederic{'@'}vikunja.io",
       "password": "Password",
       "passwordRepeat": "Retype your password",
       "passwordPlaceholder": "e.g. •••••••••••",
diff --git a/src/i18n/lang/pt-PT.json b/src/i18n/lang/pt-PT.json
index 824e19fb..1e14b333 100644
--- a/src/i18n/lang/pt-PT.json
+++ b/src/i18n/lang/pt-PT.json
@@ -22,7 +22,7 @@
       "usernameEmail": "Username Or Email Address",
       "usernamePlaceholder": "e.g. frederick",
       "email": "E-mail address",
-      "emailPlaceholder": "e.g. frederic@vikunja.io",
+      "emailPlaceholder": "e.g. frederic{'@'}vikunja.io",
       "password": "Password",
       "passwordRepeat": "Retype your password",
       "passwordPlaceholder": "e.g. •••••••••••",
diff --git a/src/i18n/lang/ro-RO.json b/src/i18n/lang/ro-RO.json
index 824e19fb..1e14b333 100644
--- a/src/i18n/lang/ro-RO.json
+++ b/src/i18n/lang/ro-RO.json
@@ -22,7 +22,7 @@
       "usernameEmail": "Username Or Email Address",
       "usernamePlaceholder": "e.g. frederick",
       "email": "E-mail address",
-      "emailPlaceholder": "e.g. frederic@vikunja.io",
+      "emailPlaceholder": "e.g. frederic{'@'}vikunja.io",
       "password": "Password",
       "passwordRepeat": "Retype your password",
       "passwordPlaceholder": "e.g. •••••••••••",
diff --git a/src/i18n/lang/ru-RU.json b/src/i18n/lang/ru-RU.json
index b936a5b9..5cb36b7b 100644
--- a/src/i18n/lang/ru-RU.json
+++ b/src/i18n/lang/ru-RU.json
@@ -22,7 +22,7 @@
       "usernameEmail": "Имя пользователя или Email",
       "usernamePlaceholder": "напр. frederick",
       "email": "E-mail адрес",
-      "emailPlaceholder": "напр. frederic@vikunja.io",
+      "emailPlaceholder": "напр. frederic{'@'}vikunja.io",
       "password": "Пароль",
       "passwordRepeat": "Пароль ещё раз",
       "passwordPlaceholder": "напр. •••••••••••",
diff --git a/src/main.ts b/src/main.ts
index 8b82ed69..863f564a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,13 @@
-import Vue from 'vue'
+import { createApp, configureCompat } from 'vue'
+
+configureCompat({
+	COMPONENT_V_MODEL: false,
+	COMPONENT_ASYNC: false,
+	RENDER_FUNCTION: false,
+	WATCH_ARRAY: false, // TODO: check this again; this might lead to some problemes
+	TRANSITION_GROUP_ROOT: false,
+})
+
 import App from './App.vue'
 import router from './router'
 
@@ -10,33 +19,24 @@ declare global {
 	}
 }
 
-import {formatDate, formatDateSince} from '@/helpers/time/formatDate'
+import {formatDate, formatDateShort, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 // @ts-ignore
 import {VERSION} from './version.json'
 
-// Register the modal
-// @ts-ignore
-import Modal from './components/modal/modal'
 // Add CSS
 import './styles/vikunja.scss'
 // Notifications
-import Notifications from 'vue-notification'
+import Notifications from '@kyvg/vue3-notification'
+
 // PWA
 import './registerServiceWorker'
 
 // Shortcuts
-// @ts-ignore - no types available
-import vueShortkey from 'vue-shortkey'
-// Mixins
-import {colorIsDark} from './helpers/color/colorIsDark'
-import {setTitle} from './helpers/setTitle'
-import {getNamespaceTitle} from './helpers/getNamespaceTitle'
-import {getListTitle} from './helpers/getListTitle'
+import shortkey from '@/plugins/shortkey'
 // Vuex
 import {store} from './store'
 // i18n
-import VueI18n from 'vue-i18n' // types
-import {i18n} from './i18n/setup'
+import {i18n} from './i18n'
 
 console.info(`Vikunja frontend version ${VERSION}`)
 
@@ -51,84 +51,83 @@ if (window.API_URL.substr(window.API_URL.length - 1, window.API_URL.length) ===
 	window.API_URL = window.API_URL.substr(0, window.API_URL.length - 1)
 }
 
-Vue.component('modal', Modal)
+const app = createApp(App)
 
-Vue.config.productionTip = false
+app.use(Notifications)
 
-Vue.use(Notifications)
 
-import FontAwesomeIcon from './icons'
-Vue.component('icon', FontAwesomeIcon)
 
-Vue.use(vueShortkey, {prevent: ['input', 'textarea', '.input', '[contenteditable]']})
-
-// define as global property
-const Message = {
-	install(Vue) {
-		if (this.installed) {
-			return
-		}
-		this.installed = true
-
-		const message = {
-			error(e, actions = []) {
-				return error(e, Vue.prototype, actions)
-			},
-			success(s, actions = []) {
-				return success(s, Vue.prototype, actions)
-			},
-		}
-	
-		Vue.prototype['$message'] = message
-	},
-}
-
-Vue.use(Message)
+app.use(shortkey, {prevent: ['input', 'textarea', '.input', '[contenteditable]']})
 
+// directives
 import focus from './directives/focus'
-Vue.directive('focus', focus)
-
 import tooltip from './directives/tooltip'
+app.directive('focus', focus)
+app.directive('tooltip', tooltip)
 
-// @ts-ignore
-Vue.directive('tooltip', tooltip)
+// global components
+import FontAwesomeIcon from './icons'
+import Button from './components/input/button.vue'
+import Modal from './components/modal/modal.vue'
+import Card from './components/misc/card.vue'
+app.component('icon', FontAwesomeIcon)
+app.component('x-button', Button)
+app.component('modal', Modal)
+app.component('card', Card)
 
-// @ts-ignore
-import Button from './components/input/button'
-Vue.component('x-button', Button)
-
-// @ts-ignore
-import Card from './components/misc/card'
-Vue.component('card', Card)
-
-Vue.mixin({
+// Mixins
+import {getNamespaceTitle} from './helpers/getNamespaceTitle'
+import {getListTitle} from './helpers/getListTitle'
+import {colorIsDark} from './helpers/color/colorIsDark'
+import {setTitle} from './helpers/setTitle'
+app.mixin({
 	methods: {
-		formatDateSince(date) {
-			return formatDateSince(date, (p: VueI18n.Path, params?: VueI18n.Values) => this.$t(p, params))
-		},
-		formatDate(date) {
-			return formatDate(date, 'PPPPpppp', this.$t('date.locale'))
-		},
-		formatDateShort(date) {
-			return formatDate(date, 'PPpp', this.$t('date.locale'))
-		},
-		format(date, f) {
-			return formatDate(date, f, this.$t('date.locale'))
-		},
-		getNamespaceTitle(n) {
-			return getNamespaceTitle(n, (p: VueI18n.Path) => this.$t(p))
-		},
-		getListTitle(l) {
-			return getListTitle(l, (p: VueI18n.Path) => this.$t(p))
-		},
-		colorIsDark: colorIsDark,
-		setTitle: setTitle,
+		formatDateSince,
+		format: formatDate,
+		formatDate: formatDateLong,
+		formatDateShort: formatDateShort,
+		getNamespaceTitle,
+		getListTitle,
+		colorIsDark,
+		setTitle,
 	},
 })
 
-new Vue({
-	router,
-	store,
-	i18n,
-	render: h => h(App),
-}).$mount('#app')
+app.config.errorHandler = (err, vm, info) => {
+	// if (import.meta.env.PROD) {
+		// error(err)
+	// } else {
+		// console.error(err, vm, info)
+		error(err)
+	// }
+}
+
+if (import.meta.env.DEV) {
+	app.config.warnHandler = (msg, vm, info) => { 
+		error(msg)
+	}
+}
+
+
+// https://stackoverflow.com/a/52076738/15522256
+window.addEventListener('error', (err) => {
+	error(err)
+})
+
+
+window.addEventListener('unhandledrejection', (err) => {
+	// event.promise contains the promise object
+	// event.reason contains the reason for the rejection
+	error(err)
+})
+
+app.config.globalProperties.$message = {
+	error,
+	success,
+}
+
+app.use(router)
+app.use(store)
+app.use(i18n)
+
+app.mount('#app')
\ No newline at end of file
diff --git a/src/message/index.js b/src/message/index.js
index e425caf7..0f2ad506 100644
--- a/src/message/index.js
+++ b/src/message/index.js
@@ -1,11 +1,12 @@
-import {i18n} from '@/i18n/setup'
+import {i18n} from '@/i18n'
+import { notify } from '@kyvg/vue3-notification'
 
 export const getErrorText = (r) => {
 
 	if (r.response && r.response.data) {
 		if(r.response.data.code) {
 			const path = `error.${r.response.data.code}`
-			const message = i18n.t(path)
+			const message = i18n.global.t(path)
 
 			// If message and path are equal no translation exists for that error code
 			if (path !== message) {
@@ -27,20 +28,20 @@ export const getErrorText = (r) => {
 	return [r.message]
 }
 
-export function error(e, context, actions = []) {
-	context.$notify({
+export function error(e, actions = []) {
+	notify({
 		type: 'error',
-		title: i18n.t('error.error'),
+		title: i18n.global.t('error.error'),
 		text: getErrorText(e),
 		actions: actions,
 	})
 	console.error(e, actions)
 }
 
-export function success(e, context, actions = []) {
-	context.$notify({
+export function success(e, actions = []) {
+	notify({
 		type: 'success',
-		title: i18n.t('error.success'),
+		title: i18n.global.t('error.success'),
 		text: getErrorText(e),
 		data: {
 			actions: actions,
diff --git a/src/models/task.js b/src/models/task.js
index 79c0a8e0..2b3a9f7c 100644
--- a/src/models/task.js
+++ b/src/models/task.js
@@ -24,16 +24,12 @@ export default class TaskModel extends AbstractModel {
 		this.endDate = parseDateOrNull(this.endDate)
 		this.doneAt = parseDateOrNull(this.doneAt)
 
+		this.reminderDates = this.reminderDates.map(d => new Date(d))
 		// Cancel all scheduled notifications for this task to be sure to only have available notifications
-		this.cancelScheduledNotifications()
-			.then(() => {
-				this.reminderDates = this.reminderDates.map(d => {
-					d = new Date(d)
-					// Every time we see a reminder, we schedule a notification for it
-					this.scheduleNotification(d)
-					return d
-				})
-			})
+		this.cancelScheduledNotifications().then(() => {
+			// Every time we see a reminder, we schedule a notification for it
+			this.reminderDates.forEach(d => this.scheduleNotification(d))
+		})
 
 		// Parse the repeat after into something usable
 		this.parseRepeatAfter()
@@ -218,27 +214,26 @@ export default class TaskModel extends AbstractModel {
 		}
 
 		// Register the actual notification
-		registration.showNotification('Vikunja Reminder', {
-			tag: `vikunja-task-${this.id}`, // Group notifications by task id so we're only showing one notification per task
-			body: this.title,
-			// eslint-disable-next-line no-undef
-			showTrigger: new TimestampTrigger(date),
-			badge: '/images/icons/badge-monochrome.png',
-			icon: '/images/icons/android-chrome-512x512.png',
-			data: {taskId: this.id},
-			actions: [
-				{
-					action: 'show-task',
-					title: 'Show task',
-				},
-			],
-		})
-			.then(() => {
-				console.debug('Notification scheduled for ' + date)
-			})
-			.catch(e => {
-				console.debug('Error scheduling notification', e)
+		try {
+			registration.showNotification('Vikunja Reminder', {
+				tag: `vikunja-task-${this.id}`, // Group notifications by task id so we're only showing one notification per task
+				body: this.title,
+				// eslint-disable-next-line no-undef
+				showTrigger: new TimestampTrigger(date),
+				badge: '/images/icons/badge-monochrome.png',
+				icon: '/images/icons/android-chrome-512x512.png',
+				data: {taskId: this.id},
+				actions: [
+					{
+						action: 'show-task',
+						title: 'Show task',
+					},
+				],
 			})
+			console.debug('Notification scheduled for ' + date)
+		} catch(e) {
+			throw new Error('Error scheduling notification', e)
+		}
 	}
 }
 
diff --git a/src/plugins/shortkey/helpers.js b/src/plugins/shortkey/helpers.js
new file mode 100644
index 00000000..2baf329b
--- /dev/null
+++ b/src/plugins/shortkey/helpers.js
@@ -0,0 +1,78 @@
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+const MODIFIER_KEYS = ['shift', 'ctrl', 'meta', 'alt']
+
+const SHORT_CUT_INDEX = [
+  { key: 'ArrowUp', value: 'arrowup' },
+  { key: 'ArrowLeft', value: 'arrowlef' },
+  { key: 'ArrowRight', value: 'arrowright' },
+  { key: 'ArrowDown', value: 'arrowdown' },
+  { key: 'AltGraph', value: 'altgraph' },
+  { key: 'Escape', value: 'esc' },
+  { key: 'Enter', value: 'enter' },
+  { key: 'Tab', value: 'tab' },
+  { key: ' ', value: 'space' },
+  { key: 'PageUp', value: 'pagup' },
+  { key: 'PageDown', value: 'pagedow' },
+  { key: 'Home', value: 'home' },
+  { key: 'End', value: 'end' },
+  { key: 'Delete', value: 'del' },
+  { key: 'Backspace', value: 'bacspace' },
+  { key: 'Insert', value: 'insert' },
+  { key: 'NumLock', value: 'numlock' },
+  { key: 'CapsLock', value: 'capslock' },
+  { key: 'Pause', value: 'pause' },
+  { key: 'ContextMenu', value: 'cotextmenu' },
+  { key: 'ScrollLock', value: 'scrolllock' },
+  { key: 'BrowserHome', value: 'browserhome' },
+  { key: 'MediaSelect', value: 'mediaselect' },
+]
+
+export function encodeKey(pKey) {
+	const shortKey = {}
+
+	MODIFIER_KEYS.forEach((key) => {
+		shortKey[`${key}Key`] = pKey.includes(key)
+	})
+
+  let indexedKeys = createShortcutIndex(shortKey)
+  const vKey = pKey.filter(
+    (item) => !MODIFIER_KEYS.includes(item),
+  )
+  indexedKeys += vKey.join('')
+  return indexedKeys
+}
+
+function createShortcutIndex(pKey) {
+  let k = ''
+
+	MODIFIER_KEYS.forEach((key) => {
+		if (pKey.key === capitalizeFirstLetter(key) || pKey[`${key}Key`]) {
+			k += key
+		}
+	})
+
+  SHORT_CUT_INDEX.forEach(({ key, value }) => {
+    if (pKey.key === key) {
+      k += value
+    }
+  })
+
+  if (
+    (pKey.key && pKey.key !== ' ' && pKey.key.length === 1) ||
+    /F\d{1,2}|\//g.test(pKey.key)
+  ) {
+    k += pKey.key.toLowerCase()
+  }
+
+  return k
+}
+export { createShortcutIndex as decodeKey }
+
+export function parseValue(value) {
+  value = typeof value === 'string' ? JSON.parse(value.replace(/'/gi, '"')) : value
+
+  return value instanceof Array ? { '': value } : value
+}
diff --git a/src/plugins/shortkey/index.js b/src/plugins/shortkey/index.js
new file mode 100644
index 00000000..8755fd92
--- /dev/null
+++ b/src/plugins/shortkey/index.js
@@ -0,0 +1,186 @@
+import { parseValue, decodeKey, encodeKey } from './helpers'
+
+let mapFunctions = {}
+let objAvoided = []
+let elementAvoided = []
+let keyPressed = false
+
+function dispatchShortkeyEvent(pKey) {
+  const e = new CustomEvent('shortkey', { bubbles: false })
+
+  if (mapFunctions[pKey].key) {
+    e.srcKey = mapFunctions[pKey].key
+  }
+
+  const elm = mapFunctions[pKey].el
+
+  if (!mapFunctions[pKey].propagte) {
+    elm[elm.length - 1].dispatchEvent(e)
+  } else {
+    elm.forEach((elmItem) => elmItem.dispatchEvent(e))
+  }
+}
+
+function keyDown(pKey) {
+  if (
+    (!mapFunctions[pKey].once && !mapFunctions[pKey].push) ||
+    (mapFunctions[pKey].push && !keyPressed)
+  ) {
+    dispatchShortkeyEvent(pKey)
+  }
+}
+
+function fillMappingFunctions(
+  mappingFunctions,
+  { b, push, once, focus, propagte, el },
+) {
+  for (let key in b) {
+    const k = encodeKey(b[key])
+    const propagated = mappingFunctions[k] && mappingFunctions[k].propagte
+    const elm =
+      mappingFunctions[k] && mappingFunctions[k].el
+        ? mappingFunctions[k].el
+        : []
+
+    elm.push(el)
+
+    mappingFunctions[k] = {
+      push,
+      once,
+      focus,
+      key,
+      propagte: propagated || propagte,
+      el: elm,
+    }
+  }
+}
+
+function bindValue(value, el, binding, vnode) {
+  const { modifiers } = binding
+  const push = !!modifiers.push
+  const avoid = !!modifiers.avoid
+  const focus = !modifiers.focus
+  const once = !!modifiers.once
+  const propagte = !!modifiers.propagte
+
+  if (avoid) {
+    objAvoided = objAvoided.filter((itm) => !itm === el)
+    objAvoided.push(el)
+  } else {
+    fillMappingFunctions(mapFunctions, {
+      b: value,
+      push,
+      once,
+      focus,
+      propagte,
+      el: vnode.el,
+    })
+  }
+}
+
+function unbindValue(value, el) {
+  for (let key in value) {
+    const k = encodeKey(value[key])
+    const idxElm = mapFunctions[k].el.indexOf(el)
+
+    if (mapFunctions[k].el.length > 1 && idxElm > -1) {
+      mapFunctions[k].el.splice(idxElm, 1)
+    } else {
+      delete mapFunctions[k]
+    }
+  }
+}
+
+function availableElement(decodedKey) {
+  const objectIsAvoided = !!objAvoided.find(
+    (r) => r === document.activeElement,
+  )
+  const filterAvoided = !!elementAvoided.find(
+    (selector) =>
+      document.activeElement && document.activeElement.matches(selector),
+  )
+  return !!mapFunctions[decodedKey] && !(objectIsAvoided || filterAvoided)
+}
+
+function keyDownListener(pKey) {
+  const decodedKey = decodeKey(pKey)
+
+  // Check avoidable elements
+  if (!availableElement(decodedKey)) {
+    return
+  }
+
+  if (!mapFunctions[decodedKey].propagte) {
+    pKey.preventDefault()
+    pKey.stopPropagation()
+  }
+
+  if (mapFunctions[decodedKey].focus) {
+    keyDown(decodedKey)
+    keyPressed = true
+  } else if (!keyPressed) {
+    const elm = mapFunctions[decodedKey].el
+    elm[elm.length - 1].focus()
+    keyPressed = true
+  }
+}
+
+function keyUpListener(pKey) {
+  const decodedKey = decodeKey(pKey)
+
+  if (!availableElement(decodedKey)) {
+    keyPressed = false
+    return
+  }
+
+  if (!mapFunctions[decodedKey].propagte) {
+    pKey.preventDefault()
+    pKey.stopPropagation()
+  }
+
+  if (mapFunctions[decodedKey].once || mapFunctions[decodedKey].push) {
+    dispatchShortkeyEvent(decodedKey)
+  }
+
+  keyPressed = false
+}
+
+// register key presses that happen before mounting of directive
+// if (process?.env?.NODE_ENV !== 'test') {
+//   (() => {
+    document.addEventListener('keydown', keyDownListener, true)
+    document.addEventListener('keyup', keyUpListener, true)
+  // })()
+// }
+
+function install(app, options) {
+  elementAvoided = [...(options && options.prevent ? options.prevent : [])]
+
+  app.directive('shortkey', {
+    beforeMount(el, binding, vnode) {
+      // Mapping the commands
+      const value = parseValue(binding.value)
+      bindValue(value, el, binding, vnode)
+    },
+
+    updated(el, binding, vnode) {
+      const oldValue = parseValue(binding.oldValue)
+      unbindValue(oldValue, el)
+
+      const newValue = parseValue(binding.value)
+      bindValue(newValue, el, binding, vnode)
+    },
+
+    unmounted(el, binding) {
+      const value = parseValue(binding.value)
+      unbindValue(value, el)
+    },
+  })
+}
+
+export default {
+  install,
+  encodeKey,
+  decodeKey,
+  keyDown,
+}
diff --git a/src/router/index.js b/src/router/index.js
index a485ab80..215e2964 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,10 +1,7 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 
 import HomeComponent from '../views/Home'
 import NotFoundComponent from '../views/404'
-import LoadingComponent from '../components/misc/loading'
-import ErrorComponent from '../components/misc/error'
 import About from '../views/About'
 // User Handling
 import LoginComponent from '../views/user/Login'
@@ -48,56 +45,21 @@ import NamespaceSettingDelete from '../views/namespaces/settings/delete'
 // Saved Filters
 import CreateSavedFilter from '../views/filters/CreateSavedFilter'
 
-const PasswordResetComponent = () => ({
-	component: import('../views/user/PasswordReset'),
-	loading: LoadingComponent,
-	error: ErrorComponent,
-	timeout: 60000,
-})
-const GetPasswordResetComponent = () => ({
-	component: import('../views/user/RequestPasswordReset'),
-	loading: LoadingComponent,
-	error: ErrorComponent,
-	timeout: 60000,
-})
-const UserSettingsComponent = () => ({
-	component: import('../views/user/Settings'),
-	loading: LoadingComponent,
-	error: ErrorComponent,
-	timeout: 60000,
-})
+const PasswordResetComponent = () => import('../views/user/PasswordReset')
+const GetPasswordResetComponent = () => import('../views/user/RequestPasswordReset')
+const UserSettingsComponent = () => import('../views/user/Settings')
+
 // List Handling
-const NewListComponent = () => ({
-	component: import('../views/list/NewList'),
-	loading: LoadingComponent,
-	error: ErrorComponent,
-	timeout: 60000,
-})
+const NewListComponent = () => import('../views/list/NewList')
+
 // Namespace Handling
-const NewNamespaceComponent = () => ({
-	component: import('../views/namespaces/NewNamespace'),
-	loading: LoadingComponent,
-	error: ErrorComponent,
-	timeout: 60000,
-})
+const NewNamespaceComponent = () => import('../views/namespaces/NewNamespace')
 
-const EditTeamComponent = () => ({
-	component: import('../views/teams/EditTeam'),
-	loading: LoadingComponent,
-	error: ErrorComponent,
-	timeout: 60000,
-})
-const NewTeamComponent = () => ({
-	component: import('../views/teams/NewTeam'),
-	loading: LoadingComponent,
-	error: ErrorComponent,
-	timeout: 60000,
-})
+const EditTeamComponent = () => import('../views/teams/EditTeam')
+const NewTeamComponent = () =>  import('../views/teams/NewTeam')
 
-Vue.use(Router)
-
-export default new Router({
-	mode: 'history',
+const router = createRouter({
+	history: createWebHistory(),
 	scrollBehavior(to, from, savedPosition) {
 		// If the user is using their forward/backward keys to navigate, we want to restore the scroll view
 		if (savedPosition) {
@@ -106,13 +68,11 @@ export default new Router({
 
 		// Scroll to anchor should still work
 		if (to.hash) {
-			return {
-				selector: to.hash,
-			}
+			return {el: document.getElementById(to.hash.slice(1))}
 		}
 
 		// Otherwise just scroll to the top
-		return {x: 0, y: 0}
+		return {left: 0, top: 0}
 	},
 	routes: [
 		{
@@ -121,8 +81,14 @@ export default new Router({
 			component: HomeComponent,
 		},
 		{
-			path: '*',
-			name: '404',
+			path: '/:pathMatch(.*)*',
+			name: 'not-found',
+			component: NotFoundComponent,
+		},
+		// if you omit the last `*`, the `/` character in params will be encoded when resolving or pushing
+		{
+			path: '/:pathMatch(.*)',
+			name: 'bad-not-found',
 			component: NotFoundComponent,
 		},
 		{
@@ -540,4 +506,18 @@ export default new Router({
 			component: About,
 		},
 	],
-})
\ No newline at end of file
+})
+
+// bad example if using named routes:
+router.resolve({
+	name: 'bad-not-found',
+	params: { pathMatch: 'not/found' },
+}).href // '/not%2Ffound'
+
+// good example:
+router.resolve({
+	name: 'not-found',
+	params: { pathMatch: ['not', 'found'] },
+}).href // '/not/found'
+
+export default router
\ No newline at end of file
diff --git a/src/services/abstractService.js b/src/services/abstractService.js
index 0aef3c37..7ff84304 100644
--- a/src/services/abstractService.js
+++ b/src/services/abstractService.js
@@ -105,19 +105,6 @@ export default class AbstractService {
 		return true
 	}
 
-	/////////////////////
-	// Global error handler
-	///////////////////
-
-	/**
-	 * Handles the error and rejects the promise.
-	 * @param error
-	 * @returns {Promise<never>}
-	 */
-	errorHandler(error) {
-		return Promise.reject(error)
-	}
-
 	/////////////////
 	// Helper functions
 	///////////////
@@ -156,7 +143,7 @@ export default class AbstractService {
 	getReplacedRoute(path, pathparams) {
 		let replacements = this.getRouteReplacements(path, pathparams)
 		return Object.entries(replacements).reduce(
-			(result, [parameter, value])  => result.replace(parameter, value),
+			(result, [parameter, value]) => result.replace(parameter, value),
 			path,
 		)
 	}
@@ -284,7 +271,7 @@ export default class AbstractService {
 	 */
 	get(model, params = {}) {
 		if (this.paths.get === '') {
-			return Promise.reject({message: 'This model is not able to get data.'})
+			throw new Error('This model is not able to get data.')
 		}
 
 		return this.getM(this.paths.get, model, params)
@@ -298,35 +285,30 @@ export default class AbstractService {
 	 * @param params
 	 * @returns {Q.Promise<unknown>}
 	 */
-	getM(url, model = {}, params = {}) {
+	async getM(url, model = {}, params = {}) {
 		const cancel = this.setLoading()
 
 		model = this.beforeGet(model)
 		const finalUrl = this.getReplacedRoute(url, model)
 
-		return this.http.get(finalUrl, {params: params})
-			.catch(error => {
-				return this.errorHandler(error)
-			})
-			.then(response => {
-				const result = this.modelGetFactory(response.data)
-				result.maxRight = Number(response.headers['x-max-right'])
-				return Promise.resolve(result)
-			})
-			.finally(() => {
-				cancel()
-			})
+		try {
+			const response = await this.http.get(finalUrl, {params})
+			const result = this.modelGetFactory(response.data)
+			result.maxRight = Number(response.headers['x-max-right'])
+			return result
+		} finally {
+			cancel()
+		}
 	}
 
-	getBlobUrl(url, method = 'GET', data = {}) {
-		return this.http({
+	async getBlobUrl(url, method = 'GET', data = {}) {
+		const response = await this.http({
 			url: url,
 			method: method,
 			responseType: 'blob',
 			data: data,
-		}).then(response => {
-			return window.URL.createObjectURL(new Blob([response.data]))
 		})
+		return window.URL.createObjectURL(new Blob([response.data]))
 	}
 
 	/**
@@ -337,9 +319,9 @@ export default class AbstractService {
 	 * @param page The page to get
 	 * @returns {Q.Promise<any>}
 	 */
-	getAll(model = {}, params = {}, page = 1) {
+	async getAll(model = {}, params = {}, page = 1) {
 		if (this.paths.getAll === '') {
-			return Promise.reject({message: 'This model is not able to get data.'})
+			throw new Error('This model is not able to get data.')
 		}
 
 		params.page = page
@@ -348,27 +330,22 @@ export default class AbstractService {
 		model = this.beforeGet(model)
 		const finalUrl = this.getReplacedRoute(this.paths.getAll, model)
 
-		return this.http.get(finalUrl, {params: params})
-			.catch(error => {
-				return this.errorHandler(error)
-			})
-			.then(response => {
-				this.resultCount = Number(response.headers['x-pagination-result-count'])
-				this.totalPages = Number(response.headers['x-pagination-total-pages'])
+		try {
+			const response = await this.http.get(finalUrl, {params: params})
+			this.resultCount = Number(response.headers['x-pagination-result-count'])
+			this.totalPages = Number(response.headers['x-pagination-total-pages'])
 
-				if (Array.isArray(response.data)) {
-					return Promise.resolve(response.data.map(entry => {
-						return this.modelGetAllFactory(entry)
-					}))
-				}
-				if (response.data === null) {
-					return Promise.resolve([])
-				}
-				return Promise.resolve(this.modelGetAllFactory(response.data))
-			})
-			.finally(() => {
-				cancel()
-			})
+			if (response.data === null) {
+				return []
+			}
+
+			if (Array.isArray(response.data)) {
+				return response.data.map(entry => this.modelGetAllFactory(entry))
+			}
+			return this.modelGetAllFactory(response.data)
+		} finally {
+			cancel()
+		}
 	}
 
 	/**
@@ -376,28 +353,24 @@ export default class AbstractService {
 	 * @param model
 	 * @returns {Promise<any | never>}
 	 */
-	create(model) {
+	async create(model) {
 		if (this.paths.create === '') {
-			return Promise.reject({message: 'This model is not able to create data.'})
+			throw new Error('This model is not able to create data.')
 		}
 
 		const cancel = this.setLoading()
 		const finalUrl = this.getReplacedRoute(this.paths.create, model)
 
-		return this.http.put(finalUrl, model)
-			.catch(error => {
-				return this.errorHandler(error)
-			})
-			.then(response => {
-				const result = this.modelCreateFactory(response.data)
-				if (typeof model.maxRight !== 'undefined') {
-					result.maxRight = model.maxRight
-				}
-				return Promise.resolve(result)
-			})
-			.finally(() => {
-				cancel()
-			})
+		try {
+			const response = await this.http.put(finalUrl, model)
+			const result = this.modelCreateFactory(response.data)
+			if (typeof model.maxRight !== 'undefined') {
+				result.maxRight = model.maxRight
+			}
+			return result
+		} finally {
+			cancel()
+		}
 	}
 
 	/**
@@ -407,23 +380,19 @@ export default class AbstractService {
 	 * @param model
 	 * @returns {Q.Promise<unknown>}
 	 */
-	post(url, model) {
+	async post(url, model) {
 		const cancel = this.setLoading()
 
-		return this.http.post(url, model)
-			.catch(error => {
-				return this.errorHandler(error)
-			})
-			.then(response => {
-				const result = this.modelUpdateFactory(response.data)
-				if (typeof model.maxRight !== 'undefined') {
-					result.maxRight = model.maxRight
-				}
-				return Promise.resolve(result)
-			})
-			.finally(() => {
-				cancel()
-			})
+		try {
+			const response = await this.http.post(url, model)
+			const result = this.modelUpdateFactory(response.data)
+			if (typeof model.maxRight !== 'undefined') {
+				result.maxRight = model.maxRight
+			}
+			return result
+		} finally {
+			cancel()
+		}
 	}
 
 	/**
@@ -433,7 +402,7 @@ export default class AbstractService {
 	 */
 	update(model) {
 		if (this.paths.update === '') {
-			return Promise.reject({message: 'This model is not able to update data.'})
+			throw new Error('This model is not able to update data.')
 		}
 
 		const finalUrl = this.getReplacedRoute(this.paths.update, model)
@@ -445,24 +414,20 @@ export default class AbstractService {
 	 * @param model
 	 * @returns {Q.Promise<any>}
 	 */
-	delete(model) {
+	async delete(model) {
 		if (this.paths.delete === '') {
-			return Promise.reject({message: 'This model is not able to delete data.'})
+			throw new Error('This model is not able to delete data.')
 		}
 
 		const cancel = this.setLoading()
 		const finalUrl = this.getReplacedRoute(this.paths.delete, model)
 
-		return this.http.delete(finalUrl, model)
-			.catch(error => {
-				return this.errorHandler(error)
-			})
-			.then(response => {
-				return Promise.resolve(response.data)
-			})
-			.finally(() => {
-				cancel()
-			})
+		try {
+			const {data} = await this.http.delete(finalUrl, model)
+			return data
+		} finally {
+			cancel()
+		}
 	}
 
 	/**
@@ -496,32 +461,26 @@ export default class AbstractService {
 	 * @param formData
 	 * @returns {Q.Promise<unknown>}
 	 */
-	uploadFormData(url, formData) {
-		console.log(formData, formData._boundary)
-
+	async uploadFormData(url, formData) {
 		const cancel = this.setLoading()
-		return this.http.put(
-			url,
-			formData,
-			{
-				headers: {
-					'Content-Type':
-						'multipart/form-data; boundary=' + formData._boundary,
+		try {
+			const response = await this.http.put(
+				url,
+				formData,
+				{
+					headers: {
+						'Content-Type':
+							'multipart/form-data; boundary=' + formData._boundary,
+					},
+					onUploadProgress: progressEvent => {
+						this.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+					},
 				},
-				onUploadProgress: progressEvent => {
-					this.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
-				},
-			},
-		)
-			.catch(error => {
-				return this.errorHandler(error)
-			})
-			.then(response => {
-				return Promise.resolve(this.modelCreateFactory(response.data))
-			})
-			.finally(() => {
-				this.uploadProgress = 0
-				cancel()
-			})
+			)
+			return this.modelCreateFactory(response.data)
+		} finally {
+			this.uploadProgress = 0
+			cancel()
+		}
 	}
 }
\ No newline at end of file
diff --git a/src/services/attachment.js b/src/services/attachment.js
index afd28cdc..098d5ef6 100644
--- a/src/services/attachment.js
+++ b/src/services/attachment.js
@@ -37,9 +37,9 @@ export default class AttachmentService extends AbstractService {
 		return AbstractService.prototype.getBlobUrl.call(this, '/tasks/' + model.taskId + '/attachments/' + model.id)
 	}
 
-	download(model) {
-		this.getBlobUrl(model)
-			.then(url => downloadBlob(url, model.file.name))
+	async download(model) {
+		const url = await this.getBlobUrl(model)
+		return downloadBlob(url, model.file.name)
 	}
 
 	/**
diff --git a/src/services/backgroundUnsplash.js b/src/services/backgroundUnsplash.js
index f0d29645..09b748ac 100644
--- a/src/services/backgroundUnsplash.js
+++ b/src/services/backgroundUnsplash.js
@@ -18,17 +18,12 @@ export default class BackgroundUnsplashService extends AbstractService {
 		return new ListModel(data)
 	}
 
-	thumb(model) {
-		return this.http({
+	async thumb(model) {
+		const response = await this.http({
 			url: `/backgrounds/unsplash/images/${model.id}/thumb`,
 			method: 'GET',
 			responseType: 'blob',
 		})
-			.then(response => {
-				return window.URL.createObjectURL(new Blob([response.data]))
-			})
-			.catch(e => {
-				return e
-			})
+		return window.URL.createObjectURL(new Blob([response.data]))
 	}
 }
\ No newline at end of file
diff --git a/src/services/bucket.js b/src/services/bucket.js
index cabb7861..0e0c016a 100644
--- a/src/services/bucket.js
+++ b/src/services/bucket.js
@@ -18,7 +18,7 @@ export default class BucketService extends AbstractService {
 
 	beforeUpdate(model) {
 		const taskService = new TaskService()
-		model.tasks = model.tasks.map(t => taskService.processModel(t))
+		model.tasks = model.tasks?.map(t => taskService.processModel(t))
 		return model
 	}
 }
\ No newline at end of file
diff --git a/src/services/dataExport.js b/src/services/dataExport.js
index edadf756..9f8720bf 100644
--- a/src/services/dataExport.js
+++ b/src/services/dataExport.js
@@ -6,10 +6,13 @@ export default class DataExportService extends AbstractService {
 		return this.post('/user/export/request', {password: password})
 	}
 	
-	download(password) {
+	async download(password) {
 		const clear = this.setLoading()
-		return this.getBlobUrl('/user/export/download', 'POST', {password})
-			.then(url => downloadBlob(url, 'vikunja-export.zip'))
-			.finally(() => clear())
+		try {
+			const url = await this.getBlobUrl('/user/export/download', 'POST', {password})
+			downloadBlob(url, 'vikunja-export.zip')
+		} finally {
+			clear()
+		}
 	}
 }
\ No newline at end of file
diff --git a/src/services/list.js b/src/services/list.js
index 5fd2fc3d..3d61218f 100644
--- a/src/services/list.js
+++ b/src/services/list.js
@@ -44,36 +44,27 @@ export default class ListService extends AbstractService {
 		return super.update(newModel)
 	}
 
-	background(list) {
+	async background(list) {
 		if (list.background === null) {
-			return Promise.resolve('')
+			return ''
 		}
 
-		return this.http({
+		const response = await this.http({
 			url: `/lists/${list.id}/background`,
 			method: 'GET',
 			responseType: 'blob',
 		})
-			.then(response => {
-				return window.URL.createObjectURL(new Blob([response.data]))
-			})
-			.catch(e => {
-				return e
-			})
+		return window.URL.createObjectURL(new Blob([response.data]))
 	}
 
-	removeBackground(list) {
+	async removeBackground(list) {
 		const cancel = this.setLoading()
 
-		return this.http.delete(`/lists/${list.id}/background`, list)
-			.then(response => {
-				return Promise.resolve(response.data)
-			})
-			.catch(error => {
-				return this.errorHandler(error)
-			})
-			.finally(() => {
-				cancel()
-			})
+		try {
+			const response = await this.http.delete(`/lists/${list.id}/background`, list)
+			return response.data
+		} finally {
+			cancel()
+		}
 	}
 }
\ No newline at end of file
diff --git a/src/services/passwordReset.js b/src/services/passwordReset.js
index 6f972504..9d3dc56b 100644
--- a/src/services/passwordReset.js
+++ b/src/services/passwordReset.js
@@ -15,31 +15,23 @@ export default class PasswordResetService extends AbstractService {
 		return new PasswordResetModel(data)
 	}
 
-	resetPassword(model) {
+	async resetPassword(model) {
 		const cancel = this.setLoading()
-		return this.http.post(this.paths.reset, model)
-			.catch(error => {
-				return this.errorHandler(error)
-			})
-			.then(response => {
-				return Promise.resolve(this.modelFactory(response.data))
-			})
-			.finally(() => {
-				cancel()
-			})
+		try {
+			const response = await this.http.post(this.paths.reset, model)
+			return this.modelFactory(response.data)
+		} finally {
+			cancel()
+		}
 	}
 
-	requestResetPassword(model) {
+	async requestResetPassword(model) {
 		const cancel = this.setLoading()
-		return this.http.post(this.paths.requestReset, model)
-			.catch(error => {
-				return this.errorHandler(error)
-			})
-			.then(response => {
-				return Promise.resolve(this.modelFactory(response.data))
-			})
-			.finally(() => {
-				cancel()
-			})
+		try {
+			const response = await this.http.post(this.paths.requestReset, model)
+			return this.modelFactory(response.data)
+		} finally {
+			cancel()
+		}
 	}
 }
\ No newline at end of file
diff --git a/src/services/task.js b/src/services/task.js
index 1515ba93..361d08dd 100644
--- a/src/services/task.js
+++ b/src/services/task.js
@@ -37,7 +37,8 @@ export default class TaskService extends AbstractService {
 		return this.processModel(model)
 	}
 
-	processModel(model) {
+	processModel(updatedModel) {
+		const model = { ...updatedModel }
 
 		model.title = model.title?.trim()
 
diff --git a/src/services/totp.js b/src/services/totp.js
index 021d68e0..93367ab3 100644
--- a/src/services/totp.js
+++ b/src/services/totp.js
@@ -26,13 +26,12 @@ export default class TotpService extends AbstractService {
 		return this.post(`${this.urlPrefix}/disable`, model)
 	}
 
-	qrcode() {
-		return this.http({
+	async qrcode() {
+		const response = await this.http({
 			url: `${this.urlPrefix}/qrcode`,
 			method: 'GET',
 			responseType: 'blob',
-		}).then(response => {
-			return Promise.resolve(new Blob([response.data]))
 		})
+		return new Blob([response.data])
 	}
 }
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 26aac821..c60e0ebf 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,8 +1,7 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import {createStore} from 'vuex'
 import {
+	BACKGROUND,
 	CURRENT_LIST,
-	ERROR_MESSAGE,
 	HAS_TASKS,
 	KEYBOARD_SHORTCUTS_ACTIVE,
 	LOADING,
@@ -21,9 +20,7 @@ import labels from './modules/labels'
 
 import ListService from '../services/list'
 
-Vue.use(Vuex)
-
-export const store = new Vuex.Store({
+export const store = createStore({
 	strict: import.meta.env.DEV,
 	modules: {
 		config,
@@ -38,7 +35,6 @@ export const store = new Vuex.Store({
 	state: {
 		loading: false,
 		loadingModule: null,
-		errorMessage: '',
 		online: true,
 		// This is used to highlight the current list in menu for all list related views
 		currentList: {id: 0},
@@ -55,17 +51,46 @@ export const store = new Vuex.Store({
 		[LOADING_MODULE](state, module) {
 			state.loadingModule = module
 		},
-		[ERROR_MESSAGE](state, error) {
-			state.errorMessage = error
-		},
 		[ONLINE](state, online) {
-			state.online = import.meta.env.VITE_IS_ONLINE || online
+			if (import.meta.env.VITE_IS_ONLINE) {
+				console.log('Setting fake online state', import.meta.env.VITE_IS_ONLINE)
+			}
+			state.online = !!import.meta.env.VITE_IS_ONLINE || online
 		},
 		[CURRENT_LIST](state, currentList) {
+			// Server updates don't return the right. Therefore the right is reset after updating the list which is
+			// confusing because all the buttons will disappear in that case. To prevent this, we're keeping the right
+			// when updating the list in global state.
+			if (typeof state.currentList.maxRight !== 'undefined' && (typeof currentList.maxRight === 'undefined' || currentList.maxRight === null)) {
+				currentList.maxRight = state.currentList.maxRight
+			}
+			state.currentList = currentList
+		},
+		[HAS_TASKS](state, hasTasks) {
+			state.hasTasks = hasTasks
+		},
+		[MENU_ACTIVE](state, menuActive) {
+			state.menuActive = menuActive
+		},
+		toggleMenu(state) {
+			state.menuActive = !state.menuActive
+		},
+		[KEYBOARD_SHORTCUTS_ACTIVE](state, active) {
+			state.keyboardShortcutsActive = active
+		},
+		[QUICK_ACTIONS_ACTIVE](state, active) {
+			state.quickActionsActive = active
+		},
+		[BACKGROUND](state, background) {
+			state.background = background
+		},
+	},
+	actions: {
+		async [CURRENT_LIST]({state, commit}, currentList) {
 
 			if (currentList === null) {
-				state.currentList = {}
-				state.background = null
+				commit(CURRENT_LIST, {})
+				commit(BACKGROUND, null)
 				return
 			}
 
@@ -97,45 +122,21 @@ export const store = new Vuex.Store({
 				)
 			) {
 				if (currentList.backgroundInformation) {
-					const listService = new ListService()
-					listService.background(currentList)
-						.then(b => {
-							state.background = b
-						})
-						.catch(e => {
-							console.error('Error getting background image for list', currentList.id, e)
-						})
-				} else {
-					state.background = null
+					try {
+						const listService = new ListService()
+						const background = await listService.background(currentList)
+						commit(BACKGROUND, background)
+					} catch(e) {
+						console.error('Error getting background image for list', currentList.id, e)
+					}
 				}
 			}
 
 			if (typeof currentList.backgroundInformation === 'undefined' || currentList.backgroundInformation === null) {
-				state.background = null
+				commit(BACKGROUND, null)
 			}
 
-			// Server updates don't return the right. Therefore the right is reset after updating the list which is
-			// confusing because all the buttons will disappear in that case. To prevent this, we're keeping the right
-			// when updating the list in global state.
-			if (typeof state.currentList.maxRight !== 'undefined' && (typeof currentList.maxRight === 'undefined' || currentList.maxRight === null)) {
-				currentList.maxRight = state.currentList.maxRight
-			}
-			state.currentList = currentList
-		},
-		[HAS_TASKS](state, hasTasks) {
-			state.hasTasks = hasTasks
-		},
-		[MENU_ACTIVE](state, menuActive) {
-			state.menuActive = menuActive
-		},
-		toggleMenu(state) {
-			state.menuActive = !state.menuActive
-		},
-		[KEYBOARD_SHORTCUTS_ACTIVE](state, active) {
-			state.keyboardShortcutsActive = active
-		},
-		[QUICK_ACTIONS_ACTIVE](state, active) {
-			state.quickActionsActive = active
+			commit(CURRENT_LIST, currentList)
 		},
 	},
 })
diff --git a/src/store/modules/attachments.js b/src/store/modules/attachments.js
index 516ddf35..3dc5957b 100644
--- a/src/store/modules/attachments.js
+++ b/src/store/modules/attachments.js
@@ -1,5 +1,3 @@
-import Vue from 'vue'
-
 import {findIndexById} from '@/helpers/utils'
 
 export default {
@@ -10,7 +8,7 @@ export default {
 	mutations: {
 		set(state, attachments) {
 			console.debug('Set attachments', attachments)
-			Vue.set(state, 'attachments', attachments)
+			state.attachments = attachments
 		},
 		add(state, attachment) {
 			console.debug('Add attachement', attachment)
diff --git a/src/store/modules/auth.js b/src/store/modules/auth.js
index f9e5b159..19d4ba11 100644
--- a/src/store/modules/auth.js
+++ b/src/store/modules/auth.js
@@ -1,5 +1,5 @@
 import {HTTPFactory} from '@/http-common'
-import {ERROR_MESSAGE, LOADING} from '../mutation-types'
+import {LOADING} from '../mutation-types'
 import UserModel from '../../models/user'
 import {getToken, refreshToken, removeToken, saveToken} from '@/helpers/auth'
 
@@ -78,7 +78,7 @@ export default {
 	},
 	actions: {
 		// Logs a user in with a set of credentials.
-		login(ctx, credentials) {
+		async login(ctx, credentials) {
 			const HTTP = HTTPFactory()
 			ctx.commit(LOADING, true, {root: true})
 
@@ -94,53 +94,51 @@ export default {
 				data.totp_passcode = credentials.totpPasscode
 			}
 
-			return HTTP.post('login', data)
-				.then(response => {
-					// Save the token to local storage for later use
-					saveToken(response.data.token, true)
+			try {
+				const response = await HTTP.post('login', data)
+				// Save the token to local storage for later use
+				saveToken(response.data.token, true)
+				
+				// Tell others the user is autheticated
+				ctx.dispatch('checkAuth')
+			} catch(e) {
+				if (
+					e.response &&
+					e.response.data.code === 1017 &&
+					!credentials.totpPasscode
+				) {
+					ctx.commit('needsTotpPasscode', true)
+				}
 
-					// Tell others the user is autheticated
-					ctx.dispatch('checkAuth')
-					return Promise.resolve()
-				})
-				.catch(e => {
-					if (e.response) {
-						if (e.response.data.code === 1017 && !credentials.totpPasscode) {
-							ctx.commit('needsTotpPasscode', true)
-							return Promise.reject(e)
-						}
-					}
-
-					return Promise.reject(e)
-				})
-				.finally(() => {
-					ctx.commit(LOADING, false, {root: true})
-				})
+				throw e
+			} finally {
+				ctx.commit(LOADING, false, {root: true})
+			}
 		},
+
 		// Registers a new user and logs them in.
 		// Not sure if this is the right place to put the logic in, maybe a seperate js component would be better suited.
-		register(ctx, credentials) {
+		async register(ctx, credentials) {
 			const HTTP = HTTPFactory()
-			return HTTP.post('register', {
-				username: credentials.username,
-				email: credentials.email,
-				password: credentials.password,
-			})
-				.then(() => {
-					return ctx.dispatch('login', credentials)
+			try {
+				await HTTP.post('register', {
+					username: credentials.username,
+					email: credentials.email,
+					password: credentials.password,
 				})
-				.catch(e => {
-					if (e.response && e.response.data && e.response.data.message) {
-						ctx.commit(ERROR_MESSAGE, e.response.data.message, {root: true})
-					}
+				return ctx.dispatch('login', credentials)
+			} catch(e) {
+				if (e.response?.data?.message) {
+					throw e.response.data
+				}
 
-					return Promise.reject(e)
-				})
-				.finally(() => {
-					ctx.commit(LOADING, false, {root: true})
-				})
+				throw e
+			} finally {
+				ctx.commit(LOADING, false, {root: true})
+			}
 		},
-		openIdAuth(ctx, {provider, code}) {
+
+		async openIdAuth(ctx, {provider, code}) {
 			const HTTP = HTTPFactory()
 			ctx.commit(LOADING, true, {root: true})
 
@@ -150,42 +148,35 @@ export default {
 
 			// Delete an eventually preexisting old token
 			removeToken()
-			return HTTP.post(`/auth/openid/${provider}/callback`, data)
-				.then(response => {
-					// Save the token to local storage for later use
-					saveToken(response.data.token, true)
-
-					// Tell others the user is autheticated
-					ctx.dispatch('checkAuth')
-					return Promise.resolve()
-				})
-				.catch(e => {
-					return Promise.reject(e)
-				})
-				.finally(() => {
-					ctx.commit(LOADING, false, {root: true})
-				})
+			try {
+				const response = await HTTP.post(`/auth/openid/${provider}/callback`, data)
+				// Save the token to local storage for later use
+				saveToken(response.data.token, true)
+				
+				// Tell others the user is autheticated
+				ctx.dispatch('checkAuth')
+			} finally {
+				ctx.commit(LOADING, false, {root: true})
+			}
 		},
-		linkShareAuth(ctx, {hash, password}) {
+
+		async linkShareAuth(ctx, {hash, password}) {
 			const HTTP = HTTPFactory()
-			return HTTP.post('/shares/' + hash + '/auth', {
+			const response = await HTTP.post('/shares/' + hash + '/auth', {
 				password: password,
 			})
-				.then(r => {
-					saveToken(r.data.token, false)
-					ctx.dispatch('checkAuth')
-					return Promise.resolve(r.data)
-				}).catch(e => {
-					return Promise.reject(e)
-				})
+			saveToken(response.data.token, false)
+			ctx.dispatch('checkAuth')
+			return response.data
 		},
+
 		// Populates user information from jwt token saved in local storage in store
 		checkAuth(ctx) {
 
 			// This function can be called from multiple places at the same time and shortly after one another.
 			// To prevent hitting the api too frequently or race conditions, we check at most once per minute.
 			if (ctx.state.lastUserInfoRefresh !== null && ctx.state.lastUserInfoRefresh > (new Date()).setMinutes((new Date()).getMinutes() + 1)) {
-				return Promise.resolve()
+				return
 			}
 
 			const jwt = getToken()
@@ -195,14 +186,13 @@ export default {
 					.split('.')[1]
 					.replace('-', '+')
 					.replace('_', '/')
-				const info = new UserModel(JSON.parse(window.atob(base64)))
+				const info = new UserModel(JSON.parse(atob(base64)))
 				const ts = Math.round((new Date()).getTime() / 1000)
 				authenticated = info.exp >= ts
 				ctx.commit('info', info)
 
 				if (authenticated) {
 					ctx.dispatch('refreshUserInfo')
-					ctx.commit('authenticated', authenticated)
 				}
 			}
 
@@ -211,57 +201,55 @@ export default {
 				ctx.commit('info', null)
 				ctx.dispatch('config/redirectToProviderIfNothingElseIsEnabled', null, {root: true})
 			}
-
-			return Promise.resolve()
 		},
-		refreshUserInfo(ctx) {
+
+		async refreshUserInfo(ctx) {
 			const jwt = getToken()
 			if (!jwt) {
 				return
 			}
 
 			const HTTP = HTTPFactory()
-			// We're not returning the promise here to prevent blocking the initial ui render if the user is
-			// accessing the site with a token in local storage
-			HTTP.get('user', {
-				headers: {
-					Authorization: `Bearer ${jwt}`,
-				},
-			})
-				.then(r => {
-					const info = new UserModel(r.data)
-					info.type = ctx.state.info.type
-					info.email = ctx.state.info.email
-					info.exp = ctx.state.info.exp
+			try {
 
-					ctx.commit('info', info)
-					ctx.commit('lastUserRefresh')
-				})
-				.catch(e => {
-					console.error('Error while refreshing user info:', e)
+				const response = await HTTP.get('user', {
+					headers: {
+						Authorization: `Bearer ${jwt}`,
+					},
 				})
+				const info = new UserModel(response.data)
+				info.type = ctx.state.info.type
+				info.email = ctx.state.info.email
+				info.exp = ctx.state.info.exp
+				
+				ctx.commit('info', info)
+				ctx.commit('lastUserRefresh')
+				return info
+			} catch(e) {
+				throw new Error('Error while refreshing user info:', { cause: e })
+			}
 		},
+
 		// Renews the api token and saves it to local storage
 		renewToken(ctx) {
-			// Timeout to avoid race conditions when authenticated as a user (=auth token in localStorage) and as a
+			// FIXME: Timeout to avoid race conditions when authenticated as a user (=auth token in localStorage) and as a
 			// link share in another tab. Without the timeout both the token renew and link share auth are executed at
 			// the same time and one might win over the other.
-			setTimeout(() => {
+			setTimeout(async () => {
 				if (!ctx.state.authenticated) {
 					return
 				}
 
-				refreshToken(!ctx.state.isLinkShareAuth)
-					.then(() => {
-						ctx.dispatch('checkAuth')
-					})
-					.catch(e => {
-						// Don't logout on network errors as the user would then get logged out if they don't have
-						// internet for a short period of time - such as when the laptop is still reconnecting
-						if (e.request.status) {
-							ctx.dispatch('logout')
-						}
-					})
+				try {
+					await refreshToken(!ctx.state.isLinkShareAuth)
+					ctx.dispatch('checkAuth')
+				} catch(e) {
+					// Don't logout on network errors as the user would then get logged out if they don't have
+					// internet for a short period of time - such as when the laptop is still reconnecting
+					if (e.request.status) {
+						ctx.dispatch('logout')
+					}
+				}
 			}, 5000)
 		},
 		logout(ctx) {
diff --git a/src/store/modules/config.js b/src/store/modules/config.js
index 663c802c..e28a6b46 100644
--- a/src/store/modules/config.js
+++ b/src/store/modules/config.js
@@ -1,5 +1,3 @@
-import Vue from 'vue'
-
 import {CONFIG} from '../mutation-types'
 import {HTTPFactory} from '@/http-common'
 import {objectToCamelCase} from '@/helpers/case'
@@ -58,20 +56,18 @@ export default {
 			state.auth.local.enabled = auth.local.enabled
 			state.auth.openidConnect.enabled = auth.openidConnect.enabled
 			state.auth.openidConnect.redirectUrl = auth.openidConnect.redirectUrl
-			Vue.set(state.auth.openidConnect, 'providers', auth.openidConnect.providers)
+			state.auth.openidConnect.providers = auth.openidConnect.providers
 		},
 	},
 	actions: {
-		update(ctx) {
+		async update(ctx) {
 			const HTTP = HTTPFactory()
 
-			return HTTP.get('info')
-				.then(r => {
-					ctx.commit(CONFIG, r.data)
-					return Promise.resolve(r)
-				})
-				.catch(e => Promise.reject(e))
+			const { data: info } = await HTTP.get('info')
+			ctx.commit(CONFIG, info)
+			return info
 		},
+
 		redirectToProviderIfNothingElseIsEnabled(ctx) {
 			if (ctx.state.auth.local.enabled === false &&
 				ctx.state.auth.openidConnect.enabled &&
diff --git a/src/store/modules/kanban.js b/src/store/modules/kanban.js
index 73fb1954..acd6824e 100644
--- a/src/store/modules/kanban.js
+++ b/src/store/modules/kanban.js
@@ -1,16 +1,32 @@
-import Vue from 'vue'
+import cloneDeep from 'lodash.clonedeep'
+
+import {findById, findIndexById} from '@/helpers/utils'
+import {i18n} from '@/i18n'
+import {success} from '@/message'
 
 import BucketService from '../../services/bucket'
-import {filterObject} from '@/helpers/filterObject'
 import {setLoading} from '../helper'
 import TaskCollectionService from '@/services/taskCollection'
 
 const TASKS_PER_BUCKET = 25
 
+function getTaskIndicesById(state, taskId) {
+	let taskIndex
+	const bucketIndex = state.buckets.findIndex(({ tasks }) => {
+		taskIndex = findIndexById(tasks, taskId)
+		return taskIndex !== -1
+	})
+
+	return {
+		bucketIndex: bucketIndex !== -1 ? bucketIndex : null,
+		taskIndex: taskIndex !== -1 ? taskIndex : null,
+	}	
+}
+
 const addTaskToBucketAndSort = (state, task) => {
-	const bi = filterObject(state.buckets, b => b.id === task.bucketId)
-	state.buckets[bi].tasks.push(task)
-	state.buckets[bi].tasks.sort((a, b) => a.kanbanPosition > b.kanbanPosition ? 1 : -1)
+	const bucketIndex = findIndexById(state.buckets, task.bucketId)
+	state.buckets[bucketIndex].tasks.push(task)
+	state.buckets[bucketIndex].tasks.sort((a, b) => a.kanbanPosition > b.kanbanPosition ? 1 : -1)
 }
 
 /**
@@ -19,6 +35,7 @@ const addTaskToBucketAndSort = (state, task) => {
  */
 export default {
 	namespaced: true,
+
 	state: () => ({
 		buckets: [],
 		listId: 0,
@@ -26,43 +43,52 @@ export default {
 		taskPagesPerBucket: {},
 		allTasksLoadedForBucket: {},
 	}),
+
 	mutations: {
 		setListId(state, listId) {
 			state.listId = parseInt(listId)
 		},
+
 		setBuckets(state, buckets) {
 			state.buckets = buckets
 			buckets.forEach(b => {
-				Vue.set(state.taskPagesPerBucket, b.id, 1)
-				Vue.set(state.allTasksLoadedForBucket, b.id, false)
+				state.taskPagesPerBucket[b.id] = 1
+				state.allTasksLoadedForBucket[b.id] = false
 			})
 		},
+
 		addBucket(state, bucket) {
 			state.buckets.push(bucket)
 		},
+
 		removeBucket(state, bucket) {
-			for (const b in state.buckets) {
-				if (state.buckets[b].id === bucket.id) {
-					state.buckets.splice(b, 1)
-				}
-			}
+			const bucketIndex = findIndexById(state.buckets, bucket.id)
+			state.buckets.splice(bucketIndex, 1)
 		},
+
 		setBucketById(state, bucket) {
-			for (const b in state.buckets) {
-				if (state.buckets[b].id === bucket.id) {
-					Vue.set(state.buckets, b, bucket)
-					return
-				}
-			}
+			const bucketIndex = findIndexById(state.buckets, bucket.id)
+			state.buckets[bucketIndex] = bucket
 		},
+
 		setBucketByIndex(state, {bucketIndex, bucket}) {
-			Vue.set(state.buckets, bucketIndex, bucket)
+			state.buckets[bucketIndex] = bucket
 		},
+
 		setTaskInBucketByIndex(state, {bucketIndex, taskIndex, task}) {
 			const bucket = state.buckets[bucketIndex]
 			bucket.tasks[taskIndex] = task
-			Vue.set(state.buckets, bucketIndex, bucket)
+			state.buckets[bucketIndex] = bucket
 		},
+
+		setTasksInBucketByBucketId(state, {bucketId, tasks}) {
+			const bucketIndex = findIndexById(state.buckets, bucketId)
+			state.buckets[bucketIndex] = {
+				...state.buckets[bucketIndex],
+				tasks,
+			}
+		},
+		
 		setTaskInBucket(state, task) {
 			// If this gets invoked without any tasks actually loaded, we can save the hassle of finding the task
 			if (state.buckets.length === 0) {
@@ -82,7 +108,8 @@ export default {
 							addTaskToBucketAndSort(state, task)
 						}
 
-						Vue.set(state.buckets, b, bucket)
+						state.buckets[b] = bucket
+
 						found = true
 						return
 					}
@@ -105,69 +132,84 @@ export default {
 				}
 			}
 		},
-		addTaskToBucket(state, task) {
-			const bi = filterObject(state.buckets, b => b.id === task.bucketId)
-			state.buckets[bi].tasks.push(task)
-		},
-		addTasksToBucket(state, {tasks, bucketId}) {
-			const bi = filterObject(state.buckets, b => b.id === bucketId)
 
-			tasks.forEach(t => {
-				state.buckets[bi].tasks.push(t)
-			})
+		addTaskToBucket(state, task) {
+			const bucketIndex = findIndexById(state.buckets, task.bucketId)
+			const oldBucket = state.buckets[bucketIndex]
+			const newBucket = {
+				...oldBucket,
+				tasks: [
+					...oldBucket.tasks,
+					task,
+				],
+			}
+			state.buckets[bucketIndex] = newBucket
 		},
+
+		addTasksToBucket(state, {tasks, bucketId}) {
+			const bucketIndex = findIndexById(state.buckets, bucketId)
+			const oldBucket = state.buckets[bucketIndex]
+			const newBucket = {
+				...oldBucket,
+				tasks: [
+					...oldBucket.tasks,
+					...tasks,
+				],
+			}
+			state.buckets[bucketIndex] = newBucket
+		},
+
 		removeTaskInBucket(state, task) {
 			// If this gets invoked without any tasks actually loaded, we can save the hassle of finding the task
 			if (state.buckets.length === 0) {
 				return
 			}
 
-			for (const b in state.buckets) {
-				if (state.buckets[b].id === task.bucketId) {
-					for (const t in state.buckets[b].tasks) {
-						if (state.buckets[b].tasks[t].id === task.id) {
-							const bucket = state.buckets[b]
-							bucket.tasks.splice(t, 1)
-							Vue.set(state.buckets, b, bucket)
-							return
-						}
-					}
-					return
-				}
+			const { bucketIndex, taskIndex } = getTaskIndicesById(state, task.id)
+
+			if (
+				state.buckets[bucketIndex]?.id !== task.bucketId ||
+				state.buckets[bucketIndex]?.tasks[taskIndex]?.id !== task.id
+			) {
+				return
 			}
+			
+			state.buckets[bucketIndex].tasks.splice(taskIndex, 1)
 		},
+
 		setBucketLoading(state, {bucketId, loading}) {
-			Vue.set(state.bucketLoading, bucketId, loading)
+			state.bucketLoading[bucketId] = loading
 		},
+
 		setTasksLoadedForBucketPage(state, {bucketId, page}) {
-			Vue.set(state.taskPagesPerBucket, bucketId, page)
+			state.taskPagesPerBucket[bucketId] = page
 		},
+
 		setAllTasksLoadedForBucket(state, bucketId) {
-			Vue.set(state.allTasksLoadedForBucket, bucketId, true)
+			state.allTasksLoadedForBucket[bucketId] = true
 		},
 	},
+
 	getters: {
-		getTaskById: state => id => {
-			for (const b in state.buckets) {
-				for (const t in state.buckets[b].tasks) {
-					if (state.buckets[b].tasks[t].id === id) {
-						return {
-							bucketIndex: b,
-							taskIndex: t,
-							task: state.buckets[b].tasks[t],
-						}
-					}
+		getBucketById(state) {
+			return (bucketId) => findById(state.buckets, bucketId)
+		},
+
+		getTaskById(state) {
+			return (id) => {
+				const { bucketIndex, taskIndex } = getTaskIndicesById(state, id)
+
+				return {
+					bucketIndex,
+					taskIndex,
+					task: state.buckets[bucketIndex]?.tasks?.[taskIndex] || null,
 				}
 			}
-			return {
-				bucketIndex: null,
-				taskIndex: null,
-				task: null,
-			}
 		},
 	},
+
 	actions: {
-		loadBucketsForList(ctx, {listId, params}) {
+		async loadBucketsForList(ctx, {listId, params}) {
 			const cancel = setLoading(ctx, 'kanban')
 
 			// Clear everything to prevent having old buckets in the list if loading the buckets from this list takes a few moments
@@ -176,30 +218,29 @@ export default {
 			params.per_page = TASKS_PER_BUCKET
 
 			const bucketService = new BucketService()
-			return bucketService.getAll({listId: listId}, params)
-				.then(r => {
-					ctx.commit('setBuckets', r)
-					ctx.commit('setListId', listId)
-					return Promise.resolve(r)
-				})
-				.catch(e => {
-					return Promise.reject(e)
-				})
-				.finally(() => {
-					cancel()
-				})
+			try {
+				const response = await  bucketService.getAll({listId: listId}, params)
+				ctx.commit('setBuckets', response)
+				ctx.commit('setListId', listId)
+				return response
+			} finally {
+				cancel()
+			}
 		},
-		loadNextTasksForBucket(ctx, {listId, ps = {}, bucketId}) {
-			const isLoading = ctx.state.bucketLoading[bucketId] ?? false
+
+		async loadNextTasksForBucket(ctx, {listId, ps = {}, bucketId}) {
+			const bucketIndex = findIndexById(ctx.state.buckets, bucketId)
+
+			const isLoading = ctx.state.bucketLoading[bucketIndex] ?? false
 			if (isLoading) {
-				return Promise.resolve()
+				return
 			}
 
-			const page = (ctx.state.taskPagesPerBucket[bucketId] ?? 1) + 1
+			const page = (ctx.state.taskPagesPerBucket[bucketIndex] ?? 1) + 1
 
-			const alreadyLoaded = ctx.state.allTasksLoadedForBucket[bucketId] ?? false
+			const alreadyLoaded = ctx.state.allTasksLoadedForBucket[bucketIndex] ?? false
 			if (alreadyLoaded) {
-				return Promise.resolve()
+				return
 			}
 
 			const cancel = setLoading(ctx, 'kanban')
@@ -230,75 +271,92 @@ export default {
 			params.per_page = TASKS_PER_BUCKET
 
 			const taskService = new TaskCollectionService()
-			return taskService.getAll({listId: listId}, params, page)
-				.then(r => {
-					ctx.commit('addTasksToBucket', {tasks: r, bucketId: bucketId})
-					ctx.commit('setTasksLoadedForBucketPage', {bucketId, page})
-					if (taskService.totalPages <= page) {
-						ctx.commit('setAllTasksLoadedForBucket', bucketId)
-					}
-					return Promise.resolve(r)
-				})
-				.catch(e => {
-					return Promise.reject(e)
-				})
-				.finally(() => {
-					cancel()
-					ctx.commit('setBucketLoading', {bucketId: bucketId, loading: false})
-				})
+			try {
+
+				const tasks = await taskService.getAll({listId: listId}, params, page)
+				ctx.commit('addTasksToBucket', {tasks, bucketId: bucketId})
+				ctx.commit('setTasksLoadedForBucketPage', {bucketId, page})
+				if (taskService.totalPages <= page) {
+					ctx.commit('setAllTasksLoadedForBucket', bucketId)
+				}
+				return tasks
+			} finally {
+				cancel()
+				ctx.commit('setBucketLoading', {bucketId: bucketId, loading: false})
+			}
 		},
-		createBucket(ctx, bucket) {
+
+		async createBucket(ctx, bucket) {
 			const cancel = setLoading(ctx, 'kanban')
 
 			const bucketService = new BucketService()
-			return bucketService.create(bucket)
-				.then(r => {
-					ctx.commit('addBucket', r)
-					return Promise.resolve(r)
-				})
-				.catch(e => {
-					return Promise.reject(e)
-				})
-				.finally(() => {
-					cancel()
-				})
+			try {
+				const createdBucket = await bucketService.create(bucket)
+				ctx.commit('addBucket', createdBucket)
+				return createdBucket
+			} finally {
+				cancel()
+			}
 		},
-		deleteBucket(ctx, {bucket, params}) {
+
+		async deleteBucket(ctx, {bucket, params}) {
 			const cancel = setLoading(ctx, 'kanban')
 
 			const bucketService = new BucketService()
-			return bucketService.delete(bucket)
-				.then(r => {
-					ctx.commit('removeBucket', bucket)
-					// We reload all buckets because tasks are being moved from the deleted bucket
-					ctx.dispatch('loadBucketsForList', {listId: bucket.listId, params: params})
-					return Promise.resolve(r)
-				})
-				.catch(e => {
-					return Promise.reject(e)
-				})
-				.finally(() => {
-					cancel()
-				})
+			try {
+				const response = await bucketService.delete(bucket)
+				ctx.commit('removeBucket', bucket)
+				// We reload all buckets because tasks are being moved from the deleted bucket
+				ctx.dispatch('loadBucketsForList', {listId: bucket.listId, params: params})
+				return response
+			} finally {
+				cancel()
+			}
 		},
-		updateBucket(ctx, bucket) {
+
+		async updateBucket(ctx, updatedBucketData) {
 			const cancel = setLoading(ctx, 'kanban')
 
+			const bucketIndex = findIndexById(ctx.state.buckets, updatedBucketData.id)
+			const oldBucket = cloneDeep(ctx.state.buckets[bucketIndex])
+
+			const updatedBucket = {
+				...ctx.state.buckets[bucketIndex],
+				...updatedBucketData,
+			}
+
+			ctx.commit('setBucketByIndex', {bucketIndex, bucket: updatedBucket})
+			
 			const bucketService = new BucketService()
-			return bucketService.update(bucket)
-				.then(r => {
-					const bi = filterObject(ctx.state.buckets, b => b.id === r.id)
-					const bucket = r
-					bucket.tasks = ctx.state.buckets[bi].tasks
-					ctx.commit('setBucketByIndex', {bucketIndex: bi, bucket})
-					return Promise.resolve(r)
-				})
-				.catch(e => {
-					return Promise.reject(e)
-				})
-				.finally(() => {
-					cancel()
-				})
+			try {
+				const returnedBucket = await bucketService.update(updatedBucket)
+				ctx.commit('setBucketByIndex', {bucketIndex, bucket: returnedBucket})
+				return returnedBucket
+			} catch(e) {
+				// restore original state
+				ctx.commit('setBucketByIndex', {bucketIndex, bucket: oldBucket})
+
+				throw e
+			} finally {
+				cancel()
+			}
+		},
+
+		async updateBucketTitle(ctx, { id, title }) {
+			const bucket = findById(ctx.state.buckets, id)
+
+			if (bucket.title === title) {
+				// bucket title has not changed
+				return
+			}
+
+			const updatedBucketData = {
+				id,
+				title,
+			}
+
+			await ctx.dispatch('updateBucket', updatedBucketData)
+			success({message: i18n.global.t('list.kanban.bucketTitleSavedSuccess')})
 		},
 	},
 }
\ No newline at end of file
diff --git a/src/store/modules/labels.js b/src/store/modules/labels.js
index 29fc25de..5326483b 100644
--- a/src/store/modules/labels.js
+++ b/src/store/modules/labels.js
@@ -1,16 +1,18 @@
 import LabelService from '@/services/label'
-import Vue from 'vue'
 import {setLoading} from '@/store/helper'
-import {filterLabelsByQuery} from '@/helpers/labels'
+import { success } from '@/message'
+import {i18n} from '@/i18n'
+import {getLabelsByIds, filterLabelsByQuery} from '@/helpers/labels'
 
-/**
- * Returns the labels by id if found
- * @param {Object} state
- * @param {Array} ids
- * @returns {Array}
- */
-function getLabelsByIds(state, ids) {
-	return Object.values(state.labels).filter(({id}) => ids.includes(id))
+async function getAllLabels(page = 1) {
+	const labelService = new LabelService()
+	const labels = await labelService.getAll({}, {}, page)
+	if (page < labelService.totalPages) {
+		const nextLabels = await getAllLabels(page + 1)
+		return labels.concat(nextLabels)
+	} else {
+		return labels
+	}
 }
 
 export default {
@@ -23,14 +25,14 @@ export default {
 	mutations: {
 		setLabels(state, labels) {
 			labels.forEach(l => {
-				Vue.set(state.labels, l.id, l)
+				state.labels[l.id] = l
 			})
 		},
 		setLabel(state, label) {
-			Vue.set(state.labels, label.id, label)
+			state.labels[label.id] = label
 		},
 		removeLabelById(state, label) {
-			Vue.delete(state.labels, label.id)
+			delete state.labels[label.id]
 		},
 		setLoaded(state, loaded) {
 			state.loaded = loaded
@@ -45,75 +47,59 @@ export default {
 		},
 	},
 	actions: {
-		loadAllLabels(ctx, {forceLoad} = {}) {
+		async loadAllLabels(ctx, {forceLoad} = {}) {
 			if (ctx.state.loaded && !forceLoad) {
-				return Promise.resolve()
+				return
 			}
 
 			const cancel = setLoading(ctx, 'labels')
-			const labelService = new LabelService()
 
-			const getAllLabels = (page = 1) => {
-				return labelService.getAll({}, {}, page)
-					.then(labels => {
-						if (page < labelService.totalPages) {
-							return getAllLabels(page + 1)
-								.then(nextLabels => {
-									return labels.concat(nextLabels)
-								})
-						} else {
-							return labels
-						}
-					})
-					.catch(e => {
-						return Promise.reject(e)
-					})
+			try {
+				const labels = await getAllLabels()
+				ctx.commit('setLabels', labels)
+				ctx.commit('setLoaded', true)
+				return labels
+			} finally {
+				cancel()
 			}
-
-			return getAllLabels()
-				.then(r => {
-					ctx.commit('setLabels', r)
-					ctx.commit('setLoaded', true)
-					return Promise.resolve(r)
-				})
-				.catch(e => Promise.reject(e))
-				.finally(() => cancel())
 		},
-		deleteLabel(ctx, label) {
+		async deleteLabel(ctx, label) {
 			const cancel = setLoading(ctx, 'labels')
 			const labelService = new LabelService()
 
-			return labelService.delete(label)
-				.then(r => {
-					ctx.commit('removeLabelById', label)
-					return Promise.resolve(r)
-				})
-				.catch(e => Promise.reject(e))
-				.finally(() => cancel())
+			try {
+				const result = await labelService.delete(label)
+				ctx.commit('removeLabelById', label)
+				success({message: i18n.global.t('label.deleteSuccess')})
+				return result
+			} finally {
+				cancel()
+			}
 		},
-		updateLabel(ctx, label) {
+		async updateLabel(ctx, label) {
 			const cancel = setLoading(ctx, 'labels')
 			const labelService = new LabelService()
 
-			return labelService.update(label)
-				.then(r => {
-					ctx.commit('setLabel', r)
-					return Promise.resolve(r)
-				})
-				.catch(e => Promise.reject(e))
-				.finally(() => cancel())
+			try {
+				const newLabel = await labelService.update(label)
+				ctx.commit('setLabel', newLabel)
+				success({message: i18n.global.t('label.edit.success')})
+				return newLabel
+			} finally {
+				cancel()
+			}
 		},
-		createLabel(ctx, label) {
+		async createLabel(ctx, label) {
 			const cancel = setLoading(ctx, 'labels')
 			const labelService = new LabelService()
 
-			return labelService.create(label)
-				.then(r => {
-					ctx.commit('setLabel', r)
-					return Promise.resolve(r)
-				})
-				.catch(e => Promise.reject(e))
-				.finally(() => cancel())
+			try {
+				const newLabel = await labelService.create(label)
+				ctx.commit('setLabel', newLabel)
+				return newLabel
+			} finally {
+				cancel()
+			}
 		},
 	},
 }
diff --git a/src/store/modules/lists.js b/src/store/modules/lists.js
index 21400801..f5aa37b7 100644
--- a/src/store/modules/lists.js
+++ b/src/store/modules/lists.js
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import ListService from '@/services/list'
 import {setLoading} from '@/store/helper'
 import {removeListFromHistory} from '@/modules/listHistory.ts'
@@ -11,11 +10,11 @@ export default {
 	state: () => ({}),
 	mutations: {
 		setList(state, list) {
-			Vue.set(state, list.id, list)
+			state[list.id] = list
 		},
 		setLists(state, lists) {
 			lists.forEach(l => {
-				Vue.set(state, l.id, l)
+				state[l.id] = l
 			})
 		},
 		removeListById(state, list) {
@@ -43,69 +42,70 @@ export default {
 				isFavorite: !list.isFavorite,
 			})
 		},
-		createList(ctx, list) {
+
+		async createList(ctx, list) {
 			const cancel = setLoading(ctx, 'lists')
 			const listService = new ListService()
 
-			return listService.create(list)
-				.then(r => {
-					r.namespaceId = list.namespaceId
-					ctx.commit('namespaces/addListToNamespace', r, {root: true})
-					ctx.commit('setList', r)
-					return Promise.resolve(r)
-				})
-				.catch(e => Promise.reject(e))
-				.finally(() => cancel())
+			try {
+				const createdList = await listService.create(list)
+				createdList.namespaceId = list.namespaceId
+				ctx.commit('namespaces/addListToNamespace', createdList, {root: true})
+				ctx.commit('setList', createdList)
+				return createdList
+			} finally {
+				cancel()
+			}
 		},
-		updateList(ctx, list) {
+
+		async updateList(ctx, list) {
 			const cancel = setLoading(ctx, 'lists')
 			const listService = new ListService()
 
-			return listService.update(list)
-				.then(() => {
-					ctx.commit('setList', list)
-					ctx.commit('namespaces/setListInNamespaceById', list, {root: true})
-
-					// the returned list from listService.update is the same!
-					// in order to not validate vuex mutations we have to create a new copy
-					const newList = {
-						...list,
-						namespaceId: FavoriteListsNamespace,
-					}
-					if (list.isFavorite) {
-						ctx.commit('namespaces/addListToNamespace', newList, {root: true})
-					} else {
-						ctx.commit('namespaces/removeListFromNamespaceById', newList, {root: true})
-					}
-					ctx.dispatch('namespaces/loadNamespacesIfFavoritesDontExist', null, {root: true})
-					ctx.dispatch('namespaces/removeFavoritesNamespaceIfEmpty', null, {root: true})
-					return Promise.resolve(newList)
+			try {
+				await listService.update(list)
+				ctx.commit('setList', list)
+				ctx.commit('namespaces/setListInNamespaceById', list, {root: true})
+				
+				// the returned list from listService.update is the same!
+				// in order to not validate vuex mutations we have to create a new copy
+				const newList = {
+					...list,
+					namespaceId: FavoriteListsNamespace,
+				}
+				if (list.isFavorite) {
+					ctx.commit('namespaces/addListToNamespace', newList, {root: true})
+				} else {
+					ctx.commit('namespaces/removeListFromNamespaceById', newList, {root: true})
+				}
+				ctx.dispatch('namespaces/loadNamespacesIfFavoritesDontExist', null, {root: true})
+				ctx.dispatch('namespaces/removeFavoritesNamespaceIfEmpty', null, {root: true})
+				return newList
+			} catch(e) {
+				// Reset the list state to the initial one to avoid confusion for the user
+				ctx.commit('setList', {
+					...list,
+					isFavorite: !list.isFavorite,
 				})
-				.catch(e => {
-					// Reset the list state to the initial one to avoid confusion for the user
-					ctx.commit('setList', {
-						...list,
-						isFavorite: !list.isFavorite,
-					})
-					return Promise.reject(e)
-				})
-				.finally(() => cancel())
+				throw e
+			} finally {
+				cancel()
+			}
 		},
-		deleteList(ctx, list) {
+
+		async deleteList(ctx, list) {
 			const cancel = setLoading(ctx, 'lists')
 			const listService = new ListService()
 
-			return listService.delete(list)
-				.then(r => {
-					ctx.commit('removeListById', list)
-					ctx.commit('namespaces/removeListFromNamespaceById', list, {root: true})
-					removeListFromHistory({id: list.id})
-					return Promise.resolve(r)
-				})
-				.catch(e => {
-					return Promise.reject(e)
-				})
-				.finally(() => cancel())
+			try {	
+				const response = await listService.delete(list)
+				ctx.commit('removeListById', list)
+				ctx.commit('namespaces/removeListFromNamespaceById', list, {root: true})
+				removeListFromHistory({id: list.id})
+				return response
+			} finally{
+				cancel()
+			}
 		},
 	},
 }
\ No newline at end of file
diff --git a/src/store/modules/namespaces.js b/src/store/modules/namespaces.js
index 96a75777..cb78f560 100644
--- a/src/store/modules/namespaces.js
+++ b/src/store/modules/namespaces.js
@@ -1,5 +1,3 @@
-import Vue from 'vue'
-
 import NamespaceService from '../../services/namespace'
 import {setLoading} from '@/store/helper'
 
@@ -19,11 +17,13 @@ export default {
 				return
 			}
 
+			// FIXME: direct manipulation of the prop
+			// might not be a problem since this is happening in the mutation 
 			if (!namespace.lists || namespace.lists.length === 0) {
 				namespace.lists = state.namespaces[namespaceIndex].lists
 			}
-
-			Vue.set(state.namespaces, namespaceIndex, namespace)
+			
+			state.namespaces[namespaceIndex] = namespace
 		},
 		setListInNamespaceById(state, list) {
 			for (const n in state.namespaces) {
@@ -34,7 +34,7 @@ export default {
 						if (state.namespaces[n].lists[l].id === list.id) {
 							const namespace = state.namespaces[n]
 							namespace.lists[l] = list
-							Vue.set(state.namespaces, n, namespace)
+							state.namespaces[n] = namespace
 							return
 						}
 					}
@@ -90,76 +90,67 @@ export default {
 			return null
 		},
 		getNamespaceById: state => namespaceId => {
-			for (const n in state.namespaces) {
-				if (state.namespaces[n].id === namespaceId) {
-					return state.namespaces[n]
-				}
-			}
-			return null
+			return state.namespaces.find(({id}) => id == namespaceId) || null
 		},
 	},
 	actions: {
-		loadNamespaces(ctx) {
+		async loadNamespaces(ctx) {
 			const cancel = setLoading(ctx, 'namespaces')
 
 			const namespaceService = new NamespaceService()
-			// We always load all namespaces and filter them on the frontend
-			return namespaceService.getAll({}, {is_archived: true})
-				.then(r => {
-					ctx.commit('namespaces', r)
-
-					// Put all lists in the list state
-					const lists = []
-					r.forEach(n => {
-						n.lists.forEach(l => {
-							lists.push(l)
-						})
-					})
-
-					ctx.commit('lists/setLists', lists, {root: true})
-
-					return Promise.resolve(r)
-				})
-				.catch(e => Promise.reject(e))
-				.finally(() => {
-					cancel()
-				})
+			try {
+				// We always load all namespaces and filter them on the frontend
+				const namespaces = await namespaceService.getAll({}, {is_archived: true})
+				ctx.commit('namespaces', namespaces)
+				
+				// Put all lists in the list state
+				const lists = namespaces.flatMap(({lists}) => lists)
+				
+				ctx.commit('lists/setLists', lists, {root: true})
+				
+				return namespaces
+			} finally {
+				cancel()
+			}
 		},
+
 		loadNamespacesIfFavoritesDontExist(ctx) {
 			// The first namespace should be the one holding all favorites
 			if (ctx.state.namespaces[0].id !== -2) {
 				return ctx.dispatch('loadNamespaces')
 			}
 		},
+
 		removeFavoritesNamespaceIfEmpty(ctx) {
 			if (ctx.state.namespaces[0].id === -2 && ctx.state.namespaces[0].lists.length === 0) {
 				ctx.state.namespaces.splice(0, 1)
-				return Promise.resolve()
 			}
 		},
-		deleteNamespace(ctx, namespace) {
+
+		async deleteNamespace(ctx, namespace) {
 			const cancel = setLoading(ctx, 'namespaces')
 			const namespaceService = new NamespaceService()
 
-			return namespaceService.delete(namespace)
-				.then(r => {
-					ctx.commit('removeNamespaceById', namespace.id)
-					return Promise.resolve(r)
-				})
-				.catch(e => Promise.reject(e))
-				.finally(() => cancel())
+			try {
+				const response = await namespaceService.delete(namespace)
+				ctx.commit('removeNamespaceById', namespace.id)
+				return response
+			} finally {
+				cancel()
+			}
 		},
-		createNamespace(ctx, namespace) {
+
+		async createNamespace(ctx, namespace) {
 			const cancel = setLoading(ctx, 'namespaces')
 			const namespaceService = new NamespaceService()
 
-			return namespaceService.create(namespace)
-				.then(r => {
-					ctx.commit('addNamespace', r)
-					return Promise.resolve(r)
-				})
-				.catch(e => Promise.reject(e))
-				.finally(() => cancel())
+			try {
+				const createdNamespace = await namespaceService.create(namespace)
+				ctx.commit('addNamespace', createdNamespace)
+				return createdNamespace
+			} finally {
+				cancel()
+			}
 		},
 	},
 }
\ No newline at end of file
diff --git a/src/store/modules/tasks.js b/src/store/modules/tasks.js
index 0e2dbe67..8adf09bb 100644
--- a/src/store/modules/tasks.js
+++ b/src/store/modules/tasks.js
@@ -1,179 +1,305 @@
-import TaskService from '../../services/task'
-import TaskAssigneeService from '../../services/taskAssignee'
+import router from '@/router'
+
+import TaskService from '@/services/task'
+import TaskAssigneeService from '@/services/taskAssignee'
 import TaskAssigneeModel from '../../models/taskAssignee'
 import LabelTaskModel from '../../models/labelTask'
-import LabelTaskService from '../../services/labelTask'
+import LabelTaskService from '@/services/labelTask'
 import {HAS_TASKS} from '../mutation-types'
 import {setLoading} from '../helper'
+import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
+
+import {parseTaskText} from '@/modules/parseTaskText'
+import TaskModel from '@/models/task'
+import {formatISO} from 'date-fns'
+import LabelTask from '@/models/labelTask'
+import LabelModel from '@/models/label'
+import UserService from '@/services/user'
+
+
+// IDEA: maybe use a small fuzzy search here to prevent errors
+function findPropertyByValue(object, key, value) {
+	return Object.values(object).find(
+		(l) => l[key]?.toLowerCase() === value.toLowerCase(),
+	)
+}
+
+// Check if the user exists
+function validateUsername(users, username) {
+	return findPropertyByValue(users, 'username', username)
+}
+
+// Check if the label exists
+function validateLabel(labels, label) {
+	return findPropertyByValue(labels, 'title', label)
+}
+
+async function addLabelToTask(task, label) {
+	const labelTask = new LabelTask({
+		taskId: task.id,
+		labelId: label.id,
+	})
+	const labelTaskService = new LabelTaskService()
+	const response = await labelTaskService.create(labelTask)
+	task.labels.push(label)
+	return response
+}
+
+async function findAssignees(parsedTaskAssignees) {
+	if (parsedTaskAssignees.length <= 0) {
+		return []
+	}
+
+	const userService = new UserService()
+	const assignees = parsedTaskAssignees.map(async a => {
+		const users = await userService.getAll({}, {s: a})
+		return validateUsername(users, a)
+	})
+
+	const validatedUsers = await Promise.all(assignees) 
+	return validatedUsers.filter((item) => Boolean(item))
+}
+
 
 export default {
 	namespaced: true,
 	state: () => ({}),
 	actions: {
-		loadTasks(ctx, params) {
-			const cancel = setLoading(ctx, 'tasks')
+		async loadTasks(ctx, params) {
 			const taskService = new TaskService()
-			
-			return taskService.getAll({}, params)
-				.then(r => {
-					ctx.commit(HAS_TASKS, r.length > 0, {root: true})
-					return r
-				})
-				.catch(e => {
-					return Promise.reject(e)
-				})
-				.finally(() => {
-					cancel()
-				})
-			
+
+			const cancel = setLoading(ctx, 'tasks')
+			try {
+				const tasks = await taskService.getAll({}, params)
+				ctx.commit(HAS_TASKS, tasks.length > 0, {root: true})
+				return tasks
+			} finally {
+				cancel()
+			}
 		},
-		update(ctx, task) {
+
+		async update(ctx, task) {
 			const cancel = setLoading(ctx, 'tasks')
 
 			const taskService = new TaskService()
-			return taskService.update(task)
-				.then(t => {
-					ctx.commit('kanban/setTaskInBucket', t, {root: true})
-					return Promise.resolve(t)
-				})
-				.catch(e => {
-					return Promise.reject(e)
-				})
-				.finally(() => {
-					cancel()
-				})
+			try {
+				const updatedTask = await taskService.update(task)
+				ctx.commit('kanban/setTaskInBucket', updatedTask, {root: true})
+				return updatedTask
+			} finally {
+				cancel()
+			}
 		},
-		delete(ctx, task) {
+
+		async delete(ctx, task) {
 			const taskService = new TaskService()
-			return taskService.delete(task)
-				.then(t => {
-					ctx.commit('kanban/removeTaskInBucket', task, {root: true})
-					return Promise.resolve(t)
-				})
-				.catch(e => {
-					return Promise.reject(e)
-				})
+			const response = await taskService.delete(task)
+			ctx.commit('kanban/removeTaskInBucket', task, {root: true})
+			return response
 		},
+
 		// Adds a task attachment in store.
 		// This is an action to be able to commit other mutations
 		addTaskAttachment(ctx, {taskId, attachment}) {
 			const t = ctx.rootGetters['kanban/getTaskById'](taskId)
 			if (t.task !== null) {
-				const newTask = { ...t }
-				newTask.task.attachments.push(attachment)
+				const attachments = [
+					...t.task.attachments,
+					attachment,
+				]
+
+				const newTask = {
+					...t,
+					task: {
+						...t.task,
+						attachments,
+					},
+				}
 				ctx.commit('kanban/setTaskInBucketByIndex', newTask, {root: true})
 			}
 			ctx.commit('attachments/add', attachment, {root: true})
 		},
-		addAssignee(ctx, {user, taskId}) {
 
+		async addAssignee(ctx, {user, taskId}) {
 			const taskAssignee = new TaskAssigneeModel({userId: user.id, taskId: taskId})
-			const taskAssigneeService = new TaskAssigneeService()
 
-			return taskAssigneeService.create(taskAssignee)
-				.then(r => {
-					const t = ctx.rootGetters['kanban/getTaskById'](taskId)
-					if (t.task === null) {
-						// Don't try further adding a label if the task is not in kanban
-						// Usually this means the kanban board hasn't been accessed until now.
-						// Vuex seems to have its difficulties with that, so we just log the error and fail silently.
-						console.debug('Could not add assignee to task in kanban, task not found', t)
-						return Promise.resolve(r)
-					}
-					t.task.assignees.push(user)
-					ctx.commit('kanban/setTaskInBucketByIndex', t, {root: true})
-					return Promise.resolve(r)
-				})
-				.catch(e => {
-					return Promise.reject(e)
-				})
+			const taskAssigneeService = new TaskAssigneeService()
+			const r = await taskAssigneeService.create(taskAssignee)
+			const t = ctx.rootGetters['kanban/getTaskById'](taskId)
+			if (t.task === null) {
+				// Don't try further adding a label if the task is not in kanban
+				// Usually this means the kanban board hasn't been accessed until now.
+				// Vuex seems to have its difficulties with that, so we just log the error and fail silently.
+				console.debug('Could not add assignee to task in kanban, task not found', t)
+				return r
+			}
+			// FIXME: direct store manipulation (task)
+			t.task.assignees.push(user)
+			ctx.commit('kanban/setTaskInBucketByIndex', t, { root: true })
+			return r
 		},
-		removeAssignee(ctx, {user, taskId}) {
 
+		async removeAssignee(ctx, {user, taskId}) {
 			const taskAssignee = new TaskAssigneeModel({userId: user.id, taskId: taskId})
+
 			const taskAssigneeService = new TaskAssigneeService()
+			const response = await taskAssigneeService.delete(taskAssignee)
+			const t = ctx.rootGetters['kanban/getTaskById'](taskId)
+			if (t.task === null) {
+				// Don't try further adding a label if the task is not in kanban
+				// Usually this means the kanban board hasn't been accessed until now.
+				// Vuex seems to have its difficulties with that, so we just log the error and fail silently.
+				console.debug('Could not remove assignee from task in kanban, task not found', t)
+				return response
+			}
 
-			return taskAssigneeService.delete(taskAssignee)
-				.then(r => {
-					const t = ctx.rootGetters['kanban/getTaskById'](taskId)
-					if (t.task === null) {
-						// Don't try further adding a label if the task is not in kanban
-						// Usually this means the kanban board hasn't been accessed until now.
-						// Vuex seems to have its difficulties with that, so we just log the error and fail silently.
-						console.debug('Could not remove assignee from task in kanban, task not found', t)
-						return Promise.resolve(r)
-					}
+			for (const a in t.task.assignees) {
+				if (t.task.assignees[a].id === user.id) {
+					// FIXME: direct store manipulation (task)
+					t.task.assignees.splice(a, 1)
+					break
+				}
+			}
 
-					for (const a in t.task.assignees) {
-						if (t.task.assignees[a].id === user.id) {
-							t.task.assignees.splice(a, 1)
-							break
-						}
-					}
-
-					ctx.commit('kanban/setTaskInBucketByIndex', t, {root: true})
-					return Promise.resolve(r)
-				})
-				.catch(e => {
-					return Promise.reject(e)
-				})
+			ctx.commit('kanban/setTaskInBucketByIndex', t, {root: true})
+			return response
 
 		},
-		addLabel(ctx, {label, taskId}) {
 
-			const labelTaskService = new LabelTaskService()
+		async addLabel(ctx, {label, taskId}) {
 			const labelTask = new LabelTaskModel({taskId: taskId, labelId: label.id})
 
-			return labelTaskService.create(labelTask)
-				.then(r => {
-					const t = ctx.rootGetters['kanban/getTaskById'](taskId)
-					if (t.task === null) {
-						// Don't try further adding a label if the task is not in kanban
-						// Usually this means the kanban board hasn't been accessed until now.
-						// Vuex seems to have its difficulties with that, so we just log the error and fail silently.
-						console.debug('Could not add label to task in kanban, task not found', t)
-						return Promise.resolve(r)
-					}
-					t.task.labels.push(label)
-					ctx.commit('kanban/setTaskInBucketByIndex', t, {root: true})
-
-					return Promise.resolve(r)
-				})
-				.catch(e => {
-					return Promise.reject(e)
-				})
-		},
-		removeLabel(ctx, {label, taskId}) {
-
 			const labelTaskService = new LabelTaskService()
+			const r = await labelTaskService.create(labelTask)
+			const t = ctx.rootGetters['kanban/getTaskById'](taskId)
+			if (t.task === null) {
+				// Don't try further adding a label if the task is not in kanban
+				// Usually this means the kanban board hasn't been accessed until now.
+				// Vuex seems to have its difficulties with that, so we just log the error and fail silently.
+				console.debug('Could not add label to task in kanban, task not found', t)
+				return r
+			}
+			// FIXME: direct store manipulation (task)
+			t.task.labels.push(label)
+			ctx.commit('kanban/setTaskInBucketByIndex', t, { root: true })
+			return r
+		},
+
+		async removeLabel(ctx, {label, taskId}) {
 			const labelTask = new LabelTaskModel({taskId: taskId, labelId: label.id})
 
-			return labelTaskService.delete(labelTask)
-				.then(r => {
-					const t = ctx.rootGetters['kanban/getTaskById'](taskId)
-					if (t.task === null) {
-						// Don't try further adding a label if the task is not in kanban
-						// Usually this means the kanban board hasn't been accessed until now.
-						// Vuex seems to have its difficulties with that, so we just log the error and fail silently.
-						console.debug('Could not remove label from task in kanban, task not found', t)
-						return Promise.resolve(r)
-					}
+			const labelTaskService = new LabelTaskService()
+			const response = await labelTaskService.delete(labelTask)
+			const t = ctx.rootGetters['kanban/getTaskById'](taskId)
+			if (t.task === null) {
+				// Don't try further adding a label if the task is not in kanban
+				// Usually this means the kanban board hasn't been accessed until now.
+				// Vuex seems to have its difficulties with that, so we just log the error and fail silently.
+				console.debug('Could not remove label from task in kanban, task not found', t)
+				return response
+			}
 
-					// Remove the label from the list
-					for (const l in t.task.labels) {
-						if (t.task.labels[l].id === label.id) {
-							t.task.labels.splice(l, 1)
-							break
-						}
-					}
+			// Remove the label from the list
+			for (const l in t.task.labels) {
+				if (t.task.labels[l].id === label.id) {
+					// FIXME: direct store manipulation (task)
+					t.task.labels.splice(l, 1)
+					break
+				}
+			}
 
-					ctx.commit('kanban/setTaskInBucketByIndex', t, {root: true})
+			ctx.commit('kanban/setTaskInBucketByIndex', t, {root: true})
 
-					return Promise.resolve(r)
-				})
-				.catch(e => {
-					return Promise.reject(e)
-				})
+			return response
+		},
+
+		// Do everything that is involved in finding, creating and adding the label to the task
+		async addLabelsToTask({rootState, dispatch}, { task, parsedLabels }) {
+			if (parsedLabels.length <= 0) {
+				return task
+			}
+
+			const {labels} = rootState.labels
+
+			const labelAddsToWaitFor = parsedLabels.map(async labelTitle => {
+				let label = validateLabel(labels, labelTitle)
+				if (typeof label !== 'undefined') {
+					return label
+				}
+
+				// label not found, create it
+				const labelModel = new LabelModel({title: labelTitle})
+				await dispatch('labels/createLabel', labelModel, {root: true})
+				return addLabelToTask(task, label)
+			})
+
+			// This waits until all labels are created and added to the task
+			await Promise.all(labelAddsToWaitFor)
+			return task
+		},
+
+		findListId({ rootGetters }, { list: listName, listId }) {
+			let foundListId = null
+			
+			// Uses the following ways to get the list id of the new task:
+			//  1. If specified in quick add magic, look in store if it exists and use it if it does
+			if (listName !== null) {
+				const list = rootGetters['lists/findListByExactname'](listName)
+				foundListId = list === null ? null : list.id
+			}
+			
+			//  2. Else check if a list was passed as parameter
+			if (foundListId === null && listId !== 0) {
+				foundListId = listId
+			}
+		
+			//  3. Otherwise use the id from the route parameter
+			if (typeof router.currentRoute.value.params.listId !== 'undefined') {
+				foundListId = parseInt(router.currentRoute.value.params.listId)
+			}
+			
+			//  4. If none of the above worked, reject the promise with an error.
+			if (typeof foundListId === 'undefined' || listId === null) {
+				throw new Error('NO_LIST')
+			}
+		
+			return foundListId
+		},
+
+		async createNewTask({dispatch}, { 
+			title,
+			bucketId,
+			listId,
+			position,
+		}) {
+			const parsedTask = parseTaskText(title, getQuickAddMagicMode())
+		
+			const foundListId = await dispatch('findListId', {
+				list: parsedTask.list,
+				listId: listId || 0,
+			})
+		
+			const assignees = await findAssignees(parsedTask.assignees)
+			
+			// I don't know why, but it all goes up in flames when I just pass in the date normally.
+			const dueDate = parsedTask.date !== null ? formatISO(parsedTask.date) : null
+		
+			const task = new TaskModel({
+				title: parsedTask.text,
+				listId: foundListId,
+				dueDate,
+				priority: parsedTask.priority,
+				assignees,
+				bucketId: bucketId || 0,
+				position,
+			})
+		
+			const taskService = new TaskService()
+			const createdTask = await taskService.create(task)
+			return dispatch('addLabelsToTask', {
+				task: createdTask,
+				parsedLabels: parsedTask.labels,
+			})
 		},
 	},
 }
\ No newline at end of file
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
index 9c6381d2..7c37ee6c 100644
--- a/src/store/mutation-types.js
+++ b/src/store/mutation-types.js
@@ -1,12 +1,12 @@
 export const LOADING = 'loading'
 export const LOADING_MODULE = 'loadingModule'
-export const ERROR_MESSAGE = 'errorMessage'
 export const ONLINE = 'online'
 export const CURRENT_LIST = 'currentList'
 export const HAS_TASKS = 'hasTasks'
 export const MENU_ACTIVE = 'menuActive'
 export const KEYBOARD_SHORTCUTS_ACTIVE = 'keyboardShortcutsActive'
 export const QUICK_ACTIONS_ACTIVE = 'quickActionsActive'
+export const BACKGROUND = 'background'
 
 export const CONFIG = 'config'
 export const AUTH = 'auth'
diff --git a/src/styles/components/color-picker.scss b/src/styles/components/color-picker.scss
index 2df889c9..0dbaff73 100644
--- a/src/styles/components/color-picker.scss
+++ b/src/styles/components/color-picker.scss
@@ -3,9 +3,46 @@
   justify-content: center;
   align-items: center;
 
-  .verte__guide {
-    border-radius: 100%;
-    border: 1px solid $grey-300;
-    box-shadow: $card-shadow;
-  }
+	// reset / see https://stackoverflow.com/a/11471224/15522256
+	input[type="color"] {
+		-webkit-appearance: none;
+		border: none;
+	}
+	input[type="color"]::-webkit-color-swatch-wrapper {
+		padding: 0;
+	}
+	input[type="color"]::-webkit-color-swatch {
+		border: none;
+	}
+
+	$PICKER_SIZE: 24px;
+	$BORDER_WIDTH: 1px;
+	.picker {
+		display: grid;
+		width: $PICKER_SIZE;
+		height: $PICKER_SIZE;
+		overflow: hidden;
+		border-radius: 100%;
+		border: $BORDER_WIDTH solid $grey-300;
+		box-shadow: $card-shadow;
+
+		& > * {
+			grid-row: 1;
+			grid-column: 1;
+		}
+	}
+
+	input.picker__input {
+		padding: 0;
+		width: $PICKER_SIZE - 2 * $BORDER_WIDTH;
+		height: $PICKER_SIZE - 2 * $BORDER_WIDTH;
+	}
+
+	.picker__input.is-empty {
+		opacity: 0;
+	}
+	
+	.picker__pattern {
+		pointer-events: none;
+	}
 }
\ No newline at end of file
diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss
index 70e849ee..420c2880 100644
--- a/src/styles/components/kanban.scss
+++ b/src/styles/components/kanban.scss
@@ -212,8 +212,12 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 					}
 				}
 
-				&.v-leave, &.v-leave-to, &.v-leave-active
-				&.move-card-leave, &.move-card-leave-to, &.move-card-leave-active {
+				&.v-leave-from,
+				&.v-leave-to,
+				&.v-leave-active
+				&.move-card-leave-from,
+				&.move-card-leave-to,
+				&.move-card-leave-active {
 					display: none;
 				}
 			}
diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index 19d825f0..7a62b1f2 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -238,7 +238,8 @@
   }
 }
 
-.flash-background-enter, .flash-background-enter-active  {
+.flash-background-enter-from,
+.flash-background-enter-active  {
   animation: flash-background $flash-background-duration ease 1;
 }
 
diff --git a/src/styles/utilities/transitions.scss b/src/styles/utilities/transitions.scss
index 5cd273e3..19de9dd3 100644
--- a/src/styles/utilities/transitions.scss
+++ b/src/styles/utilities/transitions.scss
@@ -1,15 +1,19 @@
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition: opacity $transition-duration;
 }
 
-.fade-enter, .fade-leave-to {
+.fade-enter-from,
+.fade-leave-to {
   opacity: 0;
 }
 
-.width-enter-active, .width-leave-active {
+.width-enter-active,
+.width-leave-active {
   transition: width $transition-duration;
 }
 
-.width-enter, .width-leave-to {
+.width-enter-from,
+.width-leave-to {
   width: 0;
 }
\ No newline at end of file
diff --git a/src/sw.js b/src/sw.js
index 7b6e5dae..db1a077e 100644
--- a/src/sw.js
+++ b/src/sw.js
@@ -3,7 +3,10 @@
 
 const workboxVersion = 'v6.3.0'
 importScripts( `/workbox-${workboxVersion}/workbox-sw.js`)
-workbox.setConfig({modulePathPrefix: `/workbox-${workboxVersion}`})
+workbox.setConfig({
+	modulePathPrefix: `/workbox-${workboxVersion}`,
+	debug: Boolean(import.meta.env.VITE_WORKBOX_DEBUG),
+})
 
 import { precacheAndRoute } from 'workbox-precaching'
 precacheAndRoute(self.__WB_MANIFEST)
diff --git a/src/types/shims-vue.d.ts b/src/types/shims-vue.d.ts
index d9f24faa..8ccd616a 100644
--- a/src/types/shims-vue.d.ts
+++ b/src/types/shims-vue.d.ts
@@ -1,4 +1,19 @@
-declare module '*.vue' {
-  import Vue from 'vue'
+declare module 'vue' {
   export default Vue
+  export * from '@vue/runtime-dom'
 }
+
+// https://next.vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#typescript-support
+import { ComponentCustomProperties } from 'vue'
+import { Store } from 'vuex'
+
+declare module '@vue/runtime-core' {
+  // Declare your own store states.
+  interface State {
+    count: number
+  }
+
+  interface ComponentCustomProperties {
+    $store: Store<State>
+  }
+}
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 7bf6a9e6..d5231bd9 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="content has-text-centered">
-		<h2>
+		<h2 v-if="userInfo">
 			{{ $t(`home.welcome${welcome}`, {username: userInfo.name !== '' ? userInfo.name : userInfo.username}) }}!
 		</h2>
 		<div class="notification is-danger" v-if="deletionScheduledAt !== null">
diff --git a/src/views/filters/CreateSavedFilter.vue b/src/views/filters/CreateSavedFilter.vue
index 8a0ca6e6..27523f1f 100644
--- a/src/views/filters/CreateSavedFilter.vue
+++ b/src/views/filters/CreateSavedFilter.vue
@@ -60,8 +60,8 @@
 </template>
 
 <script>
-import LoadingComponent from '@/components/misc/loading.vue'
-import ErrorComponent from '@/components/misc/error.vue'
+import AsyncEditor from '@/components/input/AsyncEditor'
+
 import Filters from '@/components/list/partials/filters.vue'
 import SavedFilterService from '@/services/savedFilter'
 import SavedFilterModel from '@/models/savedFilter'
@@ -86,26 +86,18 @@ export default {
 	},
 	components: {
 		Filters,
-		editor: () => ({
-			component: import('../../components/input/editor'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	created() {
 		this.editorActive = false
 		this.$nextTick(() => this.editorActive = true)
 	},
 	methods: {
-		create() {
+		async create() {
 			this.savedFilter.filters = this.filters
-			this.savedFilterService.create(this.savedFilter)
-				.then(r => {
-					this.$store.dispatch('namespaces/loadNamespaces')
-					this.$router.push({name: 'list.index', params: {listId: r.getListId()}})
-				})
-				.catch(e => this.$message.error(e))
+			const savedFilter = await this.savedFilterService.create(this.savedFilter)
+			await this.$store.dispatch('namespaces/loadNamespaces')
+			this.$router.push({name: 'list.index', params: {listId: savedFilter.getListId()}})
 		},
 	},
 }
diff --git a/src/views/filters/settings/delete.vue b/src/views/filters/settings/delete.vue
index a95ba565..07172382 100644
--- a/src/views/filters/settings/delete.vue
+++ b/src/views/filters/settings/delete.vue
@@ -24,18 +24,15 @@ export default {
 		}
 	},
 	methods: {
-		deleteSavedFilter() {
+		async deleteSavedFilter() {
 			// We assume the listId in the route is the pseudolist
 			const list = new ListModel({id: this.$route.params.listId})
 			const filter = new SavedFilterModel({id: list.getSavedFilterId()})
 
-			this.filterService.delete(filter)
-				.then(() => {
-					this.$store.dispatch('namespaces/loadNamespaces')
-					this.$message.success({message: this.$t('filters.delete.success')})
-					this.$router.push({name: 'namespaces.index'})
-				})
-				.catch(e => this.$message.error(e))
+			await this.filterService.delete(filter)
+			await this.$store.dispatch('namespaces/loadNamespaces')
+			this.$message.success({message: this.$t('filters.delete.success')})
+			this.$router.push({name: 'namespaces.index'})
 		},
 	},
 }
diff --git a/src/views/filters/settings/edit.vue b/src/views/filters/settings/edit.vue
index a3371e90..2ee4e094 100644
--- a/src/views/filters/settings/edit.vue
+++ b/src/views/filters/settings/edit.vue
@@ -52,8 +52,8 @@
 </template>
 
 <script>
-import ErrorComponent from '@/components/misc/error.vue'
-import LoadingComponent from '@/components/misc/loading.vue'
+import AsyncEditor from '@/components/input/AsyncEditor'
+
 import CreateEdit from '@/components/misc/create-edit.vue'
 
 import SavedFilterModel from '@/models/savedFilter'
@@ -84,12 +84,7 @@ export default {
 	components: {
 		CreateEdit,
 		Filters,
-		editor: () => ({
-			component: import('@/components/input/editor.vue'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	watch: {
 		// call again the method if the route changes
@@ -100,29 +95,22 @@ export default {
 		},
 	},
 	methods: {
-		loadSavedFilter() {
+		async loadSavedFilter() {
 			// We assume the listId in the route is the pseudolist
 			const list = new ListModel({id: this.$route.params.listId})
 
 			this.filter = new SavedFilterModel({id: list.getSavedFilterId()})
-			this.filterService.get(this.filter)
-				.then(r => {
-					this.filter = r
-					this.filters = objectToSnakeCase(this.filter.filters)
-				})
-				.catch(e => this.$message.error(e))
+			this.filter = await this.filterService.get(this.filter)
+			this.filters = objectToSnakeCase(this.filter.filters)
 		},
-		save() {
+		async save() {
 			this.filter.filters = this.filters
-			this.filterService.update(this.filter)
-				.then(r => {
-					this.$store.dispatch('namespaces/loadNamespaces')
-					this.$message.success({message: this.$t('filters.edit.success')})
-					this.filter = r
-					this.filters = objectToSnakeCase(this.filter.filters)
-					this.$router.back()
-				})
-				.catch(e => this.$message.error(e))
+			const filter = await this.filterService.update(this.filter)
+			await this.$store.dispatch('namespaces/loadNamespaces')
+			this.$message.success({message: this.$t('filters.edit.success')})
+			this.filter = filter
+			this.filters = objectToSnakeCase(this.filter.filters)
+			this.$router.back()
 		},
 	},
 }
diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue
index 3842987f..e7ce816a 100644
--- a/src/views/labels/ListLabels.vue
+++ b/src/views/labels/ListLabels.vue
@@ -100,21 +100,16 @@
 import {mapState} from 'vuex'
 
 import LabelModel from '../../models/label'
-import ColorPicker from '../../components/input/colorPicker'
-import LoadingComponent from '../../components/misc/loading'
-import ErrorComponent from '../../components/misc/error'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
+import AsyncEditor from '@/components/input/AsyncEditor'
+import ColorPicker from '@/components/input/colorPicker'
+
 export default {
 	name: 'ListLabels',
 	components: {
 		ColorPicker,
-		editor: () => ({
-			component: import('../../components/input/editor'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	data() {
 		return {
@@ -124,7 +119,7 @@ export default {
 		}
 	},
 	created() {
-		this.loadLabels()
+		this.$store.dispatch('labels/loadAllLabels')
 	},
 	mounted() {
 		this.setTitle(this.$t('label.title'))
@@ -136,29 +131,11 @@ export default {
 		loading: state => state[LOADING] && state[LOADING_MODULE] === 'labels',
 	}),
 	methods: {
-		loadLabels() {
-			this.$store.dispatch('labels/loadAllLabels')
-				.catch(e => {
-					this.$message.error(e)
-				})
-		},
 		deleteLabel(label) {
-			this.$store.dispatch('labels/deleteLabel', label)
-				.then(() => {
-					this.$message.success({message: this.$t('label.deleteSuccess')})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			return this.$store.dispatch('labels/deleteLabel', label)
 		},
 		editLabelSubmit() {
-			this.$store.dispatch('labels/updateLabel', this.labelEditLabel)
-				.then(() => {
-					this.$message.success({message: this.$t('label.edit.success')})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			return this.$store.dispatch('labels/updateLabel', this.labelEditLabel)
 		},
 		editLabel(label) {
 			if (label.createdBy.id !== this.userInfo.id) {
diff --git a/src/views/labels/NewLabel.vue b/src/views/labels/NewLabel.vue
index 87506bba..5a97fec4 100644
--- a/src/views/labels/NewLabel.vue
+++ b/src/views/labels/NewLabel.vue
@@ -2,7 +2,7 @@
 	<create-edit
 		:title="$t('label.create.title')"
 		@create="newLabel()"
-		:create-disabled="label.title === ''"
+		:primary-disabled="label.title === ''"
 	>
 		<div class="field">
 			<label class="label" for="labelTitle">{{ $t('label.attributes.title') }}</label>
@@ -60,24 +60,19 @@ export default {
 		loading: state => state[LOADING] && state[LOADING_MODULE] === 'labels',
 	}),
 	methods: {
-		newLabel() {
+		async newLabel() {
 			if (this.label.title === '') {
 				this.showError = true
 				return
 			}
 			this.showError = false
 
-			this.$store.dispatch('labels/createLabel', this.label)
-				.then(r => {
-					this.$router.push({
-						name: 'labels.index',
-						params: {id: r.id},
-					})
-					this.$message.success({message: this.$t('label.create.success')})
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			const label = this.$store.dispatch('labels/createLabel', this.label)
+			this.$router.push({
+				name: 'labels.index',
+				params: {id: label.id},
+			})
+			this.$message.success({message: this.$t('label.create.success')})
 		},
 	},
 }
diff --git a/src/views/list/NewList.vue b/src/views/list/NewList.vue
index 6586768d..fb48e42b 100644
--- a/src/views/list/NewList.vue
+++ b/src/views/list/NewList.vue
@@ -1,5 +1,5 @@
 <template>
-	<create-edit :title="$t('list.create.header')" @create="newList()" :create-disabled="list.title === ''">
+	<create-edit :title="$t('list.create.header')" @create="newList()" :primary-disabled="list.title === ''">
 		<div class="field">
 			<label class="label" for="listTitle">{{ $t('list.title') }}</label>
 			<div
@@ -54,26 +54,20 @@ export default {
 		this.setTitle(this.$t('list.create.header'))
 	},
 	methods: {
-		newList() {
+		async newList() {
 			if (this.list.title === '') {
 				this.showError = true
 				return
 			}
 			this.showError = false
 
-			this.list.namespaceId = this.$route.params.id
-			this.$store
-				.dispatch('lists/createList', this.list)
-				.then((r) => {
-					this.$message.success({message: this.$t('list.create.createdSuccess') })
-					this.$router.push({
-						name: 'list.index',
-						params: { listId: r.id },
-					})
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			this.list.namespaceId = parseInt(this.$route.params.id)
+			const list = await this.$store.dispatch('lists/createList', this.list)
+			this.$message.success({message: this.$t('list.create.createdSuccess') })
+			this.$router.push({
+				name: 'list.index',
+				params: { listId: list.id },
+			})
 		},
 	},
 }
diff --git a/src/views/list/ShowList.vue b/src/views/list/ShowList.vue
index 9851cf22..68e417d9 100644
--- a/src/views/list/ShowList.vue
+++ b/src/views/list/ShowList.vue
@@ -48,13 +48,9 @@ export default {
 	data() {
 		return {
 			listService: new ListService(),
-			list: new ListModel(),
 			listLoaded: 0,
 		}
 	},
-	mounted() {
-		this.loadList()
-	},
 	watch: {
 		// call again the method if the route changes
 		'$route.path': {
@@ -84,7 +80,8 @@ export default {
 			this.$router.replace({name: savedListView, params: {id: this.$route.params.listId}})
 			console.debug('Replaced list view with', savedListView)
 		},
-		loadList() {
+
+		async loadList() {
 			if (this.$route.name.includes('.settings.')) {
 				return
 			}
@@ -140,18 +137,13 @@ export default {
 
 			// We create an extra list object instead of creating it in this.list because that would trigger a ui update which would result in bad ux.
 			const list = new ListModel(listData)
-			this.listService.get(list)
-				.then(r => {
-					this.$set(this, 'list', r)
-					this.$store.commit(CURRENT_LIST, r)
-					this.setTitle(this.getListTitle(r))
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.listLoaded = this.$route.params.listId
-				})
+			try {
+				const loadedList = await this.listService.get(list)
+				await this.$store.dispatch(CURRENT_LIST, loadedList)
+				this.setTitle(this.getListTitle(loadedList))
+			} finally {
+				this.listLoaded = this.$route.params.listId
+			}
 		},
 	},
 }
diff --git a/src/views/list/settings/archive.vue b/src/views/list/settings/archive.vue
index 86f595bf..fc7b8a55 100644
--- a/src/views/list/settings/archive.vue
+++ b/src/views/list/settings/archive.vue
@@ -30,24 +30,20 @@ export default {
 		},
 	},
 	methods: {
-		archiveList() {
+		async archiveList() {
 			const newList = {
 				...this.list,
 				isArchived: !this.list.isArchived,
 			}
 
-			this.listService.update(newList)
-				.then(r => {
-					this.$store.commit('currentList', r)
-					this.$store.commit('namespaces/setListInNamespaceById', r)
-					this.$message.success({message: this.$t('list.archive.success')})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.$router.back()
-				})
+			try {
+				const list = await this.listService.update(newList)
+				this.$store.commit('currentList', list)
+				this.$store.commit('namespaces/setListInNamespaceById', list)
+				this.$message.success({message: this.$t('list.archive.success')})
+			} finally {
+				this.$router.back()
+			}
 		},
 	},
 }
diff --git a/src/views/list/settings/background.vue b/src/views/list/settings/background.vue
index c63a2a92..fc78156f 100644
--- a/src/views/list/settings/background.vue
+++ b/src/views/list/settings/background.vue
@@ -28,7 +28,7 @@
 		<template v-if="unsplashBackgroundEnabled">
 			<input
 				:class="{'is-loading': backgroundService.loading}"
-				@keyup="() => newBackgroundSearch()"
+				@keyup="() => debounceNewBackgroundSearch()"
 				class="input is-expanded"
 				:placeholder="$t('list.background.searchPlaceholder')"
 				type="text"
@@ -70,18 +70,25 @@ import BackgroundUploadService from '../../../services/backgroundUpload'
 import ListService from '@/services/list'
 import {CURRENT_LIST} from '@/store/mutation-types'
 import CreateEdit from '@/components/misc/create-edit.vue'
+import debounce from 'lodash.debounce'
+
+const SEARCH_DEBOUNCE = 300
 
 export default {
 	name: 'list-setting-background',
 	components: {CreateEdit},
 	data() {
 		return {
+			backgroundService: new BackgroundUnsplashService(),
 			backgroundSearchTerm: '',
 			backgroundSearchResult: [],
-			backgroundService: new BackgroundUnsplashService(),
 			backgroundThumbs: {},
 			currentPage: 1,
-			backgroundSearchTimeout: null,
+
+			// We're using debounce to not search on every keypress but with a delay.
+			debounceNewBackgroundSearch: debounce(this.newBackgroundSearch, SEARCH_DEBOUNCE, {
+				trailing: true,
+			}),
 
 			backgroundUploadService: new BackgroundUploadService(),
 			listService: new ListService(),
@@ -104,77 +111,49 @@ export default {
 				return
 			}
 			// This is an extra method to reset a few things when searching to not break loading more photos.
-			this.$set(this, 'backgroundSearchResult', [])
-			this.$set(this, 'backgroundThumbs', {})
+			this.backgroundSearchResult = []
+			this.backgroundThumbs = {}
 			this.searchBackgrounds()
 		},
-		searchBackgrounds(page = 1) {
 
-			if (this.backgroundSearchTimeout !== null) {
-				clearTimeout(this.backgroundSearchTimeout)
-			}
-
-			// We're using the timeout to not search on every keypress but with a 300ms delay.
-			// If another key is pressed within these 300ms, the last search request is dropped and a new one is scheduled.
-			this.backgroundSearchTimeout = setTimeout(() => {
-				this.currentPage = page
-				this.backgroundService.getAll({}, {s: this.backgroundSearchTerm, p: page})
-					.then(r => {
-						this.backgroundSearchResult = this.backgroundSearchResult.concat(r)
-						r.forEach(b => {
-							this.backgroundService.thumb(b)
-								.then(t => {
-									this.$set(this.backgroundThumbs, b.id, t)
-								})
-						})
-					})
-					.catch(e => {
-						this.$message.error(e)
-					})
-			}, 300)
+		async searchBackgrounds(page = 1) {
+			this.currentPage = page
+			const result = await this.backgroundService.getAll({}, {s: this.backgroundSearchTerm, p: page})
+			this.backgroundSearchResult = this.backgroundSearchResult.concat(result)
+			result.forEach(async background => {
+				this.backgroundThumbs[background.id] = await this.backgroundService.thumb(background)
+			})
 		},
-		setBackground(backgroundId) {
+
+		async setBackground(backgroundId) {
 			// Don't set a background if we're in the process of setting one
 			if (this.backgroundService.loading) {
 				return
 			}
 
-			this.backgroundService.update({id: backgroundId, listId: this.$route.params.listId})
-				.then(l => {
-					this.$store.commit(CURRENT_LIST, l)
-					this.$store.commit('namespaces/setListInNamespaceById', l)
-					this.$message.success({message: this.$t('list.background.success')})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			const list = await this.backgroundService.update({id: backgroundId, listId: this.$route.params.listId})
+			await this.$store.dispatch(CURRENT_LIST, list)
+			this.$store.commit('namespaces/setListInNamespaceById', list)
+			this.$message.success({message: this.$t('list.background.success')})
 		},
-		uploadBackground() {
+
+		async uploadBackground() {
 			if (this.$refs.backgroundUploadInput.files.length === 0) {
 				return
 			}
 
-			this.backgroundUploadService.create(this.$route.params.listId, this.$refs.backgroundUploadInput.files[0])
-				.then(l => {
-					this.$store.commit(CURRENT_LIST, l)
-					this.$store.commit('namespaces/setListInNamespaceById', l)
-					this.$message.success({message: this.$t('list.background.success')})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			const list = await this.backgroundUploadService.create(this.$route.params.listId, this.$refs.backgroundUploadInput.files[0])
+			await this.$store.dispatch(CURRENT_LIST, list)
+			this.$store.commit('namespaces/setListInNamespaceById', list)
+			this.$message.success({message: this.$t('list.background.success')})
 		},
-		removeBackground() {
-			this.listService.removeBackground(this.currentList)
-				.then(l => {
-					this.$store.commit(CURRENT_LIST, l)
-					this.$store.commit('namespaces/setListInNamespaceById', l)
-					this.$message.success({message: this.$t('list.background.removeSuccess')})
-					this.$router.back()
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+
+		async removeBackground() {
+			const list = await this.listService.removeBackground(this.currentList)
+			await this.$store.dispatch(CURRENT_LIST, list)
+			this.$store.commit('namespaces/setListInNamespaceById', list)
+			this.$message.success({message: this.$t('list.background.removeSuccess')})
+			this.$router.back()
 		},
 	},
 }
diff --git a/src/views/list/settings/delete.vue b/src/views/list/settings/delete.vue
index 2f614dba..83d6caf4 100644
--- a/src/views/list/settings/delete.vue
+++ b/src/views/list/settings/delete.vue
@@ -24,15 +24,10 @@ export default {
 		},
 	},
 	methods: {
-		deleteList() {
-			this.$store.dispatch('lists/deleteList', this.list)
-				.then(() => {
-					this.$message.success({message: this.$t('list.delete.success')})
-					this.$router.push({name: 'home'})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+		async deleteList() {
+			await this.$store.dispatch('lists/deleteList', this.list)
+			this.$message.success({message: this.$t('list.delete.success')})
+			this.$router.push({name: 'home'})
 		},
 	},
 }
diff --git a/src/views/list/settings/duplicate.vue b/src/views/list/settings/duplicate.vue
index 184e57a7..6baf4e55 100644
--- a/src/views/list/settings/duplicate.vue
+++ b/src/views/list/settings/duplicate.vue
@@ -38,21 +38,17 @@ export default {
 		selectNamespace(namespace) {
 			this.selectedNamespace = namespace
 		},
-		duplicateList() {
+
+		async duplicateList() {
 			const listDuplicate = new ListDuplicateModel({
 				listId: this.$route.params.listId,
 				namespaceId: this.selectedNamespace.id,
 			})
-			this.listDuplicateService.create(listDuplicate)
-				.then(r => {
-					this.$store.commit('namespaces/addListToNamespace', r.list)
-					this.$store.commit('lists/setList', r.list)
-					this.$message.success({message: this.$t('list.duplicate.success')})
-					this.$router.push({name: 'list.index', params: {listId: r.list.id}})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			const duplicate = await this.listDuplicateService.create(listDuplicate)
+			this.$store.commit('namespaces/addListToNamespace', duplicate.list)
+			this.$store.commit('lists/setList', duplicate.list)
+			this.$message.success({message: this.$t('list.duplicate.success')})
+			this.$router.push({name: 'list.index', params: {listId: duplicate.list.id}})
 		},
 	},
 }
diff --git a/src/views/list/settings/edit.vue b/src/views/list/settings/edit.vue
index a6ea5086..73d2c770 100644
--- a/src/views/list/settings/edit.vue
+++ b/src/views/list/settings/edit.vue
@@ -32,7 +32,7 @@
 			<div class="control">
 				<input
 					:class="{ 'disabled': listService.loading}"
-					:disabled="listService.loading"
+					:disabled="listService.loading ? true : null"
 					@keyup.enter="save"
 					class="input"
 					id="identifier"
@@ -48,7 +48,7 @@
 				<editor
 					:class="{ 'disabled': listService.loading}"
 					:disabled="listService.loading"
-					:preview-is-default="false"
+					:previewIsDefault="false"
 					id="listdescription"
 					:placeholder="$t('list.edit.descriptionPlaceholder')"
 					v-model="list.description"
@@ -66,11 +66,11 @@
 </template>
 
 <script>
+import AsyncEditor from '@/components/input/AsyncEditor'
+
 import ListModel from '@/models/list'
 import ListService from '@/services/list'
 import ColorPicker from '@/components/input/colorPicker.vue'
-import LoadingComponent from '@/components/misc/loading.vue'
-import ErrorComponent from '@/components/misc/error.vue'
 import {CURRENT_LIST} from '@/store/mutation-types'
 import CreateEdit from '@/components/misc/create-edit.vue'
 
@@ -85,12 +85,7 @@ export default {
 	components: {
 		CreateEdit,
 		ColorPicker,
-		editor: () => ({
-			component: import('@/components/input/editor.vue'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	watch: {
 		'$route.params.listId': {
@@ -99,28 +94,19 @@ export default {
 		},
 	},
 	methods: {
-		loadList() {
+		async loadList() {
 			const list = new ListModel({id: this.$route.params.listId})
 
-			this.listService.get(list)
-				.then(r => {
-					this.list = { ...r }
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			const loadedList = await this.listService.get(list)
+			this.list = { ...loadedList }
 		},
-		save() {
-			this.$store.dispatch('lists/updateList', this.list)
-				.then(() => {
-					this.$store.commit(CURRENT_LIST, this.list)
-					this.setTitle(this.$t('list.edit.title', {list: this.list.title}))
-					this.$message.success({message: this.$t('list.edit.success')})
-					this.$router.back()
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+
+		async save() {
+			await this.$store.dispatch('lists/updateList', this.list)
+			await this.$store.dispatch(CURRENT_LIST, this.list)
+			this.setTitle(this.$t('list.edit.title', {list: this.list.title}))
+			this.$message.success({message: this.$t('list.edit.success')})
+			this.$router.back()
 		},
 	},
 }
diff --git a/src/views/list/settings/share.vue b/src/views/list/settings/share.vue
index 225abcb2..4a9967f8 100644
--- a/src/views/list/settings/share.vue
+++ b/src/views/list/settings/share.vue
@@ -56,21 +56,15 @@ export default {
 		this.loadList()
 	},
 	methods: {
-		loadList() {
+		async loadList() {
 			const list = new ListModel({id: this.$route.params.listId})
 
-			this.listService.get(list)
-				.then(r => {
-					this.$set(this, 'list', r)
-					this.$store.commit(CURRENT_LIST, r)
-					// This will trigger the dynamic loading of components once we actually have all the data to pass to them
-					this.manageTeamsComponent = 'userTeam'
-					this.manageUsersComponent = 'userTeam'
-					this.setTitle(this.$t('list.share.title', {list: this.list.title}))
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			this.list = await this.listService.get(list)
+			await this.$store.dispatch(CURRENT_LIST, this.list)
+			// This will trigger the dynamic loading of components once we actually have all the data to pass to them
+			this.manageTeamsComponent = 'userTeam'
+			this.manageUsersComponent = 'userTeam'
+			this.setTitle(this.$t('list.share.title', {list: this.list.title}))
 		},
 	},
 }
diff --git a/src/views/list/views/Gantt.vue b/src/views/list/views/Gantt.vue
index b05ae2cf..f5eab496 100644
--- a/src/views/list/views/Gantt.vue
+++ b/src/views/list/views/Gantt.vue
@@ -53,9 +53,11 @@
 		/>
 
 		<!-- This router view is used to show the task popup while keeping the gantt chart itself -->
-		<transition name="modal">
-			<router-view/>
-		</transition>
+		<router-view v-slot="{ Component }">
+			<transition name="modal">
+				<component :is="Component" />
+			</transition>
+		</router-view>
 
 		</card>
 	</div>
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index 3f4c7dd4..cc456aad 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -1,9 +1,9 @@
 <template>
 	<div class="kanban-view">
-		<div class="filter-container" v-if="list.isSavedFilter && !list.isSavedFilter()">
+		<div class="filter-container" v-if="isSavedFilter">
 			<div class="items">
 				<x-button
-					@click.prevent.stop="showFilters = !showFilters"
+					@click.prevent.stop="toggleFilterPopup"
 					icon="filter"
 					type="secondary"
 				>
@@ -11,33 +11,30 @@
 				</x-button>
 			</div>
 			<filter-popup
-				@change="() => {filtersChanged = true; loadBuckets()}"
 				:visible="showFilters"
 				v-model="params"
 			/>
 		</div>
 		<div
 			:class="{ 'is-loading': loading && !oneTaskUpdating}"
-			class="kanban kanban-bucket-container loader-container">
+			class="kanban kanban-bucket-container loader-container"
+		>
 			<draggable
 				v-bind="dragOptions"
-				v-model="buckets"
-				@start="() => dragBucket = true"
+				:modelValue="buckets"
+				@update:modelValue="updateBuckets"
 				@end="updateBucketPosition"
+				@start="() => dragBucket = true"
 				group="buckets"
 				:disabled="!canWrite"
-				:class="{'dragging-disabled': !canWrite}"
+				tag="transition-group"
+				:item-key="({id}) => `bucket${id}`"
+				:component-data="bucketDraggableComponentData"
 			>
-				<transition-group
-					type="transition"
-					:name="!dragBucket ? 'move-bucket': null"
-					tag="div"
-					class="kanban-bucket-container">
+				<template #item="{element: bucket, index: bucketIndex }">
 					<div
-						:key="`bucket${bucket.id}`"
 						class="bucket"
 						:class="{'is-collapsed': collapsedBuckets[bucket.id]}"
-						v-for="(bucket, k) in buckets"
 					>
 						<div class="bucket-header" @click="() => unCollapseBucket(bucket)">
 							<span
@@ -48,13 +45,13 @@
 								<icon icon="check-double"/>
 							</span>
 							<h2
-								:ref="`bucket${bucket.id}title`"
-								@focusout="() => saveBucketTitle(bucket.id)"
-								@keydown.enter.prevent.stop="() => saveBucketTitle(bucket.id)"
+								@keydown.enter.prevent.stop="$event.target.blur()"
+								@keydown.esc.prevent.stop="$event.target.blur()"
+								@blur="saveBucketTitle(bucket.id, $event.target.textContent)"
 								@click="focusBucketTitle"
 								class="title input"
-								:contenteditable="bucketTitleEditable && canWrite && !collapsedBuckets[bucket.id]"
-								spellcheck="false">{{ bucket.title }}</h2>
+								:contenteditable="(bucketTitleEditable && canWrite && !collapsedBuckets[bucket.id]) ? 'true' : 'false'"
+								:spellcheck="false">{{ bucket.title }}</h2>
 							<span
 								:class="{'is-max': bucket.tasks.length >= bucket.limit}"
 								class="limit"
@@ -74,14 +71,14 @@
 									<div class="field has-addons" v-if="showSetLimitInput">
 										<div class="control">
 											<input
-												@change="() => setBucketLimit(bucket)"
-												@keyup.enter="() => setBucketLimit(bucket)"
 												@keyup.esc="() => showSetLimitInput = false"
+												@keyup.enter="() => showSetLimitInput = false"
+												:value="bucket.limit"
+												@input="(event) => setBucketLimit(bucket.id, parseInt(event.target.value))"
 												class="input"
 												type="number"
 												min="0"
 												v-focus.always
-												v-model="bucket.limit"
 											/>
 										</div>
 										<div class="control">
@@ -127,25 +124,27 @@
 								</a>
 							</dropdown>
 						</div>
-						<div :ref="`tasks-container${bucket.id}`" class="tasks">
+						<div
+							:ref="(el) => setTaskContainerRef(bucket.id, el)"
+							@scroll="($event) => handleTaskContainerScroll(bucket.id, bucket.listId, $event.target)"
+							class="tasks"
+						>
 							<draggable
 								v-bind="dragOptions"
-								v-model="bucket.tasks"
+								:modelValue="bucket.tasks"
+								@update:modelValue="(tasks) => updateTasks(bucket.id, tasks)"
 								@start="() => dragstart(bucket)"
 								@end="updateTaskPosition"
 								:group="{name: 'tasks', put: shouldAcceptDrop(bucket) && !dragBucket}"
 								:disabled="!canWrite"
-								:class="{'dragging-disabled': !canWrite}"
-								:data-bucket-index="k"
-								class="dropper"
+								:data-bucket-index="bucketIndex"
+								tag="transition-group"
+								:item-key="(task) => `bucket${bucket.id}-task${task.id}`"
+								:component-data="taskDraggableTaskComponentData"
 							>
-								<transition-group type="transition" :name="!drag ? 'move-card': null" tag="div">
-									<kanban-card
-										:key="`bucket${bucket.id}-task${task.id}`"
-										v-for="task in bucket.tasks"
-										:task="task"
-									/>
-								</transition-group>
+								<template #item="{element: task}">
+									<kanban-card :task="task" />
+								</template>
 							</draggable>
 						</div>
 						<div class="bucket-footer" v-if="canWrite">
@@ -181,16 +180,16 @@
 							</x-button>
 						</div>
 					</div>
-				</transition-group>
+				</template>
 			</draggable>
 
 			<div class="bucket new-bucket" v-if="canWrite && !loading && buckets.length > 0">
 				<input
 					:class="{'is-loading': loading}"
 					:disabled="loading || null"
-					@focusout="() => showNewBucketInput = false"
+					@blur="() => showNewBucketInput = false"
 					@keyup.enter="createNewBucket"
-					@keyup.esc="() => showNewBucketInput = false"
+					@keyup.esc="$event.target.blur()"
 					class="input"
 					:placeholder="$t('list.kanban.addBucketPlaceholder')"
 					type="text"
@@ -202,7 +201,7 @@
 					@click="() => showNewBucketInput = true"
 					:shadow="false"
 					class="is-transparent is-fullwidth has-text-centered"
-					v-if="!showNewBucketInput"
+					v-else
 					type="secondary"
 					icon="plus"
 				>
@@ -212,9 +211,11 @@
 		</div>
 
 		<!-- This router view is used to show the task popup while keeping the kanban board itself -->
-		<transition name="modal">
-			<router-view/>
-		</transition>
+		<router-view v-slot="{ Component }">
+			<transition name="modal">
+				<component :is="Component" />
+			</transition>
+		</router-view>
 
 		<transition name="modal">
 			<modal
@@ -235,19 +236,29 @@
 
 <script>
 import draggable from 'vuedraggable'
+import cloneDeep from 'lodash.clonedeep'
 
 import BucketModel from '../../../models/bucket'
-import {filterObject} from '@/helpers/filterObject'
 import {mapState} from 'vuex'
 import {saveListView} from '@/helpers/saveListView'
 import Rights from '../../../models/constants/rights.json'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
-import createTask from '../../../components/tasks/mixins/createTask'
 import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
 import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
-import KanbanCard from '../../../components/tasks/partials/kanban-card'
+import KanbanCard from '@/components/tasks/partials/kanban-card'
+
+const DRAG_OPTIONS = {
+	// sortable options
+	animation: 150,
+	ghostClass: 'ghost',
+	dragClass: 'task-dragging',
+	delayOnTouchOnly: true,
+	delay: 150,
+}
+
+const MIN_SCROLL_HEIGHT_PERCENT = 0.25
 
 export default {
 	name: 'Kanban',
@@ -259,6 +270,10 @@ export default {
 	},
 	data() {
 		return {
+			taskContainerRefs: {},
+
+			dragOptions: DRAG_OPTIONS,
+
 			drag: false,
 			dragBucket: false,
 			sourceBucket: 0,
@@ -286,41 +301,53 @@ export default {
 				filter_concat: 'and',
 			},
 			showFilters: false,
-			filtersChanged: false, // To trigger a reload of the board
 		}
 	},
-	mixins: [
-		createTask,
-	],
 	created() {
-		this.loadBuckets()
-
 		// 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)
 	},
 	watch: {
-		'$route.params.listId': 'loadBuckets',
+		loadBucketParameter: {
+			handler: 'loadBuckets',
+			immediate: true,
+		},
 	},
 	computed: {
-		buckets: {
-			get() {
-				return this.$store.state.kanban.buckets
-			},
-			set(value) {
-				this.$store.commit('kanban/setBuckets', value)
-			},
+		isSavedFilter() {
+			return this.list.isSavedFilter && !this.list.isSavedFilter()
 		},
-		dragOptions() {
-			const options = {
-				animation: 150,
-				ghostClass: 'ghost',
-				dragClass: 'task-dragging',
-				delay: 150,
-				delayOnTouchOnly: true,
+		loadBucketParameter() {
+			return {
+				listId: this.$route.params.listId,
+				params: this.params,
 			}
-
-			return options
+		},
+		bucketDraggableComponentData() {
+			return {
+				type: 'transition',
+				tag: 'div',
+				name: !this.dragBucket ? 'move-bucket': null,
+				class: [
+					'kanban-bucket-container',
+					{ 'dragging-disabled': !this.canWrite },
+				],
+			}
+		},
+		taskDraggableTaskComponentData() {
+			return {
+				type: 'transition',
+				tag: 'div',
+				name: !this.drag ? 'move-card': null,
+				class: [
+					'dropper',
+					{ 'dragging-disabled': !this.canWrite },
+				],
+			}
+		},
+		buckets() {
+			return this.$store.state.kanban.buckets
 		},
 		...mapState({
 			loadedListId: state => state.kanban.listId,
@@ -330,105 +357,113 @@ export default {
 			list: state => state.currentList,
 		}),
 	},
+ 
 	methods: {
-		loadBuckets() {
+		toggleFilterPopup() {
+			this.showFilters = !this.showFilters
+		},
 
+		loadBuckets() {
 			// Prevent trying to load buckets if the task popup view is active
 			if (this.$route.name !== 'list.kanban') {
 				return
 			}
 
-			// Only load buckets if we don't already loaded them
-			if (
-				!this.filtersChanged && (
-				this.loadedListId === this.$route.params.listId ||
-				this.loadedListId === parseInt(this.$route.params.listId))
-			) {
+			const { listId, params } = this.loadBucketParameter
+
+			this.collapsedBuckets = getCollapsedBucketState(listId)
+
+			console.debug(`Loading buckets, loadedListId = ${this.loadedListId}, $route.params =`, this.$route.params)
+
+			this.$store.dispatch('kanban/loadBucketsForList', {listId, params})
+		},
+
+		setTaskContainerRef(id, el) {
+			if (!el) return
+			this.taskContainerRefs[id] = el
+		},
+
+		handleTaskContainerScroll(id, listId, el) {
+			if (!el) {
+				return
+			}
+			const scrollTopMax = el.scrollHeight - el.clientHeight
+			const threshold = el.scrollTop + el.scrollTop * MIN_SCROLL_HEIGHT_PERCENT
+			if (scrollTopMax > threshold) {
 				return
 			}
 
-			this.collapsedBuckets = getCollapsedBucketState(this.$route.params.listId)
-
-			console.debug(`Loading buckets, loadedListId = ${this.loadedListId}, $route.params =`, this.$route.params)
-			this.filtersChanged = false
-
-			const minScrollHeightPercent = 0.25
-
-			this.$store.dispatch('kanban/loadBucketsForList', {listId: this.$route.params.listId, params: this.params})
-				.then(bs => {
-					bs.forEach(b => {
-						const e = this.$refs[`tasks-container${b.id}`][0]
-						e.addEventListener('scroll', () => {
-							const scrollTopMax = e.scrollHeight - e.clientHeight
-							if (scrollTopMax <= e.scrollTop + e.scrollTop * minScrollHeightPercent) {
-								this.$store.dispatch('kanban/loadNextTasksForBucket', {
-									listId: this.$route.params.listId,
-									params: this.params,
-									bucketId: b.id,
-								})
-									.catch(e => {
-										this.$message.error(e)
-									})
-							}
-						})
-					})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			this.$store.dispatch('kanban/loadNextTasksForBucket', {
+				listId: listId,
+				params: this.params,
+				bucketId: id,
+			})
 		},
-		updateTaskPosition(e) {
+
+		updateTasks(bucketId, tasks) {
+			const newBucket = {
+				...this.$store.getters['kanban/getBucketById'](bucketId),
+				tasks,
+			}
+
+			this.$store.commit('kanban/setBucketById', newBucket)
+		},
+
+		async updateTaskPosition(e) {
 			this.drag = false
 
 			// While we could just pass the bucket index in through the function call, this would not give us the 
 			// new bucket id when a task has been moved between buckets, only the new bucket. Using the data-bucket-id
 			// of the drop target works all the time.
-			const bucketIndex = parseInt(e.to.parentNode.dataset.bucketIndex)
+			const bucketIndex = parseInt(e.to.dataset.bucketIndex)
 
 			const newBucket = this.buckets[bucketIndex]
 			const task = newBucket.tasks[e.newIndex]
 			const taskBefore = newBucket.tasks[e.newIndex - 1] ?? null
 			const taskAfter = newBucket.tasks[e.newIndex + 1] ?? null
 
-			task.kanbanPosition = calculateItemPosition(taskBefore !== null ? taskBefore.kanbanPosition : null, taskAfter !== null ? taskAfter.kanbanPosition : null)
-			task.bucketId = newBucket.id
+			const newTask = cloneDeep(task) // cloning the task to avoid vuex store mutations
+			newTask.bucketId = newBucket.id,
+			newTask.kanbanPosition = calculateItemPosition(taskBefore !== null ? taskBefore.kanbanPosition : null, taskAfter !== null ? taskAfter.kanbanPosition : null)
 
-			this.$store.dispatch('tasks/update', task)
-				.catch(e => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.$set(this.taskUpdating, task.id, false)
-					this.oneTaskUpdating = false
-				})
+			try {
+				await this.$store.dispatch('tasks/update', newTask)
+			} finally {
+				this.taskUpdating[task.id] = false
+				this.oneTaskUpdating = false
+			}
 		},
-		toggleShowNewTaskInput(bucket) {
-			this.$set(this.showNewTaskInput, bucket, !this.showNewTaskInput[bucket])
-		},
-		addTaskToBucket(bucketId) {
 
+		toggleShowNewTaskInput(bucketId) {
+			this.showNewTaskInput[bucketId] = !this.showNewTaskInput[bucketId]
+		},
+
+		async addTaskToBucket(bucketId) {
 			if (this.newTaskText === '') {
-				this.$set(this.newTaskError, bucketId, true)
+				this.newTaskError[bucketId] = true
 				return
 			}
-			this.$set(this.newTaskError, bucketId, false)
+			this.newTaskError[bucketId] = false
 
-			this.createNewTask(this.newTaskText, bucketId)
-				.then(r => {
-					this.newTaskText = ''
-					this.$store.commit('kanban/addTaskToBucket', r)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					if (!this.$refs[`tasks-container${bucketId}`][0]) {
-						return
-					}
-					this.$refs[`tasks-container${bucketId}`][0].scrollTop = this.$refs[`tasks-container${bucketId}`][0].scrollHeight
-				})
+			const task = await this.$store.dispatch('tasks/createNewTask', {
+				title: this.newTaskText,
+				bucketId,
+				listId: this.$route.params.listId,
+			})
+			this.newTaskText = ''
+			this.$store.commit('kanban/addTaskToBucket', task)
+			this.scrollTaskContainerToBottom(bucketId)
 		},
-		createNewBucket() {
+
+		scrollTaskContainerToBottom(bucketId) {
+			const bucketEl = this.taskContainerRefs[bucketId]
+			if (!bucketEl) {
+				return
+			}
+			bucketEl.scrollTop = bucketEl.scrollHeight
+		},
+
+		async createNewBucket() {
 			if (this.newBucketTitle === '') {
 				return
 			}
@@ -438,15 +473,11 @@ export default {
 				listId: parseInt(this.$route.params.listId),
 			})
 
-			this.$store.dispatch('kanban/createBucket', newBucket)
-				.then(() => {
-					this.newBucketTitle = ''
-					this.showNewBucketInput = false
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			await this.$store.dispatch('kanban/createBucket', newBucket)
+			this.newBucketTitle = ''
+			this.showNewBucketInput = false
 		},
+
 		deleteBucketModal(bucketId) {
 			if (this.buckets.length <= 1) {
 				return
@@ -455,109 +486,98 @@ export default {
 			this.bucketToDelete = bucketId
 			this.showBucketDeleteModal = true
 		},
-		deleteBucket() {
+
+		async deleteBucket() {
 			const bucket = new BucketModel({
 				id: this.bucketToDelete,
-				listId: this.$route.params.listId,
+				listId: parseInt(this.$route.params.listId),
 			})
 
-			this.$store.dispatch('kanban/deleteBucket', {bucket: bucket, params: this.params})
-				.then(() => {
-					this.$message.success({message: this.$t('list.kanban.deleteBucketSuccess')})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.showBucketDeleteModal = false
+			try {
+				await this.$store.dispatch('kanban/deleteBucket', {
+					bucket,
+					params: this.params,
 				})
+				this.$message.success({message: this.$t('list.kanban.deleteBucketSuccess')})
+			} finally {
+				this.showBucketDeleteModal = false
+			}
 		},
+
 		focusBucketTitle(e) {
 			// This little helper allows us to drag a bucket around at the title without focusing on it right away.
 			this.bucketTitleEditable = true
 			this.$nextTick(() => e.target.focus())
 		},
-		saveBucketTitle(bucketId) {
-			this.bucketTitleEditable = false
-			const bucketTitleElement = this.$refs[`bucket${bucketId}title`][0]
-			const bucketTitle = bucketTitleElement.textContent
-			const bucket = new BucketModel({
+
+		async saveBucketTitle(bucketId, bucketTitle) {
+			const updatedBucketData = {
 				id: bucketId,
 				title: bucketTitle,
-				listId: Number(this.$route.params.listId),
-			})
-
-			// Because the contenteditable does not have a change event,
-			// we're building it ourselves here and only updating the bucket
-			// if the title changed.
-			const realBucket = this.buckets[filterObject(this.buckets, b => b.id === bucketId)]
-			if (realBucket.title === bucketTitle) {
-				return
 			}
 
-			this.$store.dispatch('kanban/updateBucket', bucket)
-				.then(r => {
-					realBucket.title = r.title
-					bucketTitleElement.blur()
-					this.$message.success({message: this.$t('list.kanban.bucketTitleSavedSuccess')})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			await this.$store.dispatch('kanban/updateBucketTitle', updatedBucketData)
+			this.bucketTitleEditable = false
+			this.$message.success({message: this.$t('list.kanban.bucketTitleSavedSuccess')})
 		},
-		updateBucket(bucket) {
-			bucket.limit = parseInt(bucket.limit)
-			this.$store.dispatch('kanban/updateBucket', bucket)
-				.then(() => {
-					this.$message.success({message: this.$t('list.kanban.bucketLimitSavedSuccess')})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+
+		updateBuckets(value) {
+			// (1) buckets get updated in store and tasks positions get invalidated
+			this.$store.commit('kanban/setBuckets', value)
 		},
+
 		updateBucketPosition(e) {
+			// (2) bucket positon is changed
 			this.dragBucket = false
 
 			const bucket = this.buckets[e.newIndex]
 			const bucketBefore = this.buckets[e.newIndex - 1] ?? null
 			const bucketAfter = this.buckets[e.newIndex + 1] ?? null
 
-			bucket.position = calculateItemPosition(bucketBefore !== null ? bucketBefore.position : null, bucketAfter !== null ? bucketAfter.position : null)
+			const updatedData = {
+				id: bucket.id,
+				position: calculateItemPosition(bucketBefore !== null ? bucketBefore.position : null, bucketAfter !== null ? bucketAfter.position : null),
+			}
 
-			this.$store.dispatch('kanban/updateBucket', bucket)
-				.catch(e => {
-					this.$message.error(e)
-				})
+			this.$store.dispatch('kanban/updateBucket', updatedData)
 		},
-		setBucketLimit(bucket) {
-			if (bucket.limit < 0) {
+
+		async setBucketLimit(bucketId, limit) {
+			if (limit < 0) {
 				return
 			}
 
-			this.updateBucket(bucket)
+			const newBucket = {
+				...this.$store.getters['kanban/getBucketById'](bucketId),
+				limit,
+			}
+
+			await this.$store.dispatch('kanban/updateBucket', newBucket)
+			this.$message.success({message: this.$t('list.kanban.bucketLimitSavedSuccess')})
 		},
+
 		shouldAcceptDrop(bucket) {
 			return bucket.id === this.sourceBucket || // When dragging from a bucket who has its limit reached, dragging should still be possible
 				bucket.limit === 0 || // If there is no limit set, dragging & dropping should always work
 				bucket.tasks.length < bucket.limit // Disallow dropping to buckets which have their limit reached
 		},
+
 		dragstart(bucket) {
 			this.drag = true
 			this.sourceBucket = bucket.id
 		},
-		toggleDoneBucket(bucket) {
-			bucket.isDoneBucket = !bucket.isDoneBucket
-			this.$store.dispatch('kanban/updateBucket', bucket)
-				.then(() => {
-					this.$message.success({message: this.$t('list.kanban.doneBucketSavedSuccess')})
-				})
-				.catch(e => {
-					this.$message.error(e)
-					bucket.isDoneBucket = !bucket.isDoneBucket
-				})
+
+		async toggleDoneBucket(bucket) {
+			const newBucket = {
+				...bucket,
+				isDoneBucket: !bucket.isDoneBucket,
+			}
+			await this.$store.dispatch('kanban/updateBucket', newBucket)
+			this.$message.success({message: this.$t('list.kanban.doneBucketSavedSuccess')})
 		},
+
 		collapseBucket(bucket) {
-			this.$set(this.collapsedBuckets, bucket.id, true)
+			this.collapsedBuckets[bucket.id] = true
 			saveCollapsedBucketState(this.$route.params.listId, this.collapsedBuckets)
 		},
 		unCollapseBucket(bucket) {
@@ -565,7 +585,7 @@ export default {
 				return
 			}
 
-			this.$set(this.collapsedBuckets, bucket.id, false)
+			this.collapsedBuckets[bucket.id] = false
 			saveCollapsedBucketState(this.$route.params.listId, this.collapsedBuckets)
 		},
 	},
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index 4c95d908..7324b460 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -50,9 +50,9 @@
 				</x-button>
 			</div>
 			<filter-popup
-				@change="loadTasks(1)"
 				:visible="showTaskFilter"
 				v-model="params"
+				@update:modelValue="loadTasks()"
 			/>
 		</div>
 
@@ -87,28 +87,33 @@
 						@end="saveTaskPosition"
 						handle=".handle"
 						:disabled="!canWrite"
-						:class="{'dragging-disabled': !canWrite}"
+						item-key="id"
+						:component-data="{
+							class: { 'dragging-disabled': !canWrite },
+						}"
 					>
-						<single-task-in-list
-							:show-list-color="false"
-							:disabled="!canWrite"
-							:key="t.id"
-							:the-task="t"
-							@taskUpdated="updateTasks"
-							task-detail-route="task.detail"
-							v-for="t in tasks"
-						>
-							<span class="icon handle" v-if="canWrite">
-								<icon icon="grip-lines"/>
-							</span>
-							<div
-								@click="editTask(t.id)"
-								class="icon settings"
-								v-if="!list.isArchived && canWrite"
+						<template #item="{element: t}">
+							<single-task-in-list
+								:show-list-color="false"
+								:disabled="!canWrite"
+								:the-task="t"
+								@taskUpdated="updateTasks"
+								task-detail-route="task.detail"
 							>
-								<icon icon="pencil-alt"/>
-							</div>
-						</single-task-in-list>
+								<template v-if="canWrite">
+									<span class="icon handle">
+										<icon icon="grip-lines"/>
+									</span>
+									<div
+										@click="editTask(t.id)"
+										class="icon settings"
+										v-if="!list.isArchived"
+									>
+										<icon icon="pencil-alt"/>
+									</div>
+								</template>
+							</single-task-in-list>
+						</template>
 					</draggable>
 				</div>
 				<card
@@ -127,9 +132,11 @@
 		</card>
 
 		<!-- This router view is used to show the task popup while keeping the kanban board itself -->
-		<transition name="modal">
-			<router-view/>
-		</transition>
+		<router-view v-slot="{ Component }">
+			<transition name="modal">
+				<component :is="Component" />
+			</transition>
+		</router-view>
 	</div>
 </template>
 
@@ -146,7 +153,6 @@ import Rights from '../../../models/constants/rights.json'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import {HAS_TASKS} from '@/store/mutation-types'
 import Nothing from '@/components/misc/nothing.vue'
-import createTask from '@/components/tasks/mixins/createTask'
 import Pagination from '@/components/misc/pagination.vue'
 
 import draggable from 'vuedraggable'
@@ -189,7 +195,6 @@ export default {
 	},
 	mixins: [
 		taskList,
-		createTask,
 	],
 	components: {
 		Nothing,
@@ -279,13 +284,14 @@ export default {
 		updateTasks(updatedTask) {
 			for (const t in this.tasks) {
 				if (this.tasks[t].id === updatedTask.id) {
-					this.$set(this.tasks, t, updatedTask)
+					this.tasks[t] = updatedTask
 					break
 				}
 			}
 			sortTasks(this.tasks)
 		},
-		saveTaskPosition(e) {
+
+		async saveTaskPosition(e) {
 			this.drag = false
 			
 			const task = this.tasks[e.newIndex]
@@ -297,13 +303,8 @@ export default {
 				position: calculateItemPosition(taskBefore !== null ? taskBefore.position : null, taskAfter !== null ? taskAfter.position : null),
 			}
 
-			this.$store.dispatch('tasks/update', newTask)
-				.then(r => {
-					this.$set(this.tasks, e.newIndex, r)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			const updatedTask = await this.$store.dispatch('tasks/update', newTask)
+			this.tasks[e.newIndex] = updatedTask
 		},
 	},
 }
diff --git a/src/views/list/views/Table.vue b/src/views/list/views/Table.vue
index 04b407d8..8a5f8605 100644
--- a/src/views/list/views/Table.vue
+++ b/src/views/list/views/Table.vue
@@ -59,9 +59,9 @@
 				</card>
 			</transition>
 			<filter-popup
-				@change="loadTasks(1)"
 				:visible="showTaskFilter"
 				v-model="params"
+				@update:modelValue="loadTasks()"
 			/>
 		</div>
 
@@ -179,9 +179,11 @@
 		</card>
 
 		<!-- This router view is used to show the task popup while keeping the table view itself -->
-		<transition name="modal">
-			<router-view/>
-		</transition>
+		<router-view v-slot="{ Component }">
+			<transition name="modal">
+				<component :is="Component" />
+			</transition>
+		</router-view>
 
 	</div>
 </template>
@@ -239,16 +241,16 @@ export default {
 	created() {
 		const savedShowColumns = localStorage.getItem('tableViewColumns')
 		if (savedShowColumns !== null) {
-			this.$set(this, 'activeColumns', JSON.parse(savedShowColumns))
+			this.activeColumns = JSON.parse(savedShowColumns)
 		}
 		const savedSortBy = localStorage.getItem('tableViewSortBy')
 		if (savedSortBy !== null) {
-			this.$set(this, 'sortBy', JSON.parse(savedSortBy))
+			this.sortBy = JSON.parse(savedSortBy)
 		}
 
-		this.$set(this.params, 'filter_by', [])
-		this.$set(this.params, 'filter_value', [])
-		this.$set(this.params, 'filter_comparator', [])
+		this.params.filter_by = []
+		this.params.filter_value = []
+		this.params.filter_comparator = []
 
 		this.initTasks(1)
 
@@ -286,11 +288,11 @@ export default {
 		sort(property) {
 			const order = this.sortBy[property]
 			if (typeof order === 'undefined' || order === 'none') {
-				this.$set(this.sortBy, property, 'desc')
+				this.sortBy[property] = 'desc'
 			} else if (order === 'desc') {
-				this.$set(this.sortBy, property, 'asc')
+				this.sortBy[property] = 'asc'
 			} else {
-				this.$delete(this.sortBy, property)
+				delete this.sortBy[property]
 			}
 			this.initTasks(this.currentPage, this.searchTerm)
 			// Save the order to be able to retrieve them later
diff --git a/src/views/migrator/MigrateService.vue b/src/views/migrator/MigrateService.vue
index 05f057e2..fddf901e 100644
--- a/src/views/migrator/MigrateService.vue
+++ b/src/views/migrator/MigrateService.vue
@@ -32,7 +32,7 @@ export default {
 			this.identifier = identifier
 			this.isFileMigrator = isFileMigrator
 		} catch (e) {
-			this.$router.push({name: '404'})
+			this.$router.push({name: 'not-found'})
 		}
 	},
 }
diff --git a/src/views/namespaces/NewNamespace.vue b/src/views/namespaces/NewNamespace.vue
index e4c55670..e97a5748 100644
--- a/src/views/namespaces/NewNamespace.vue
+++ b/src/views/namespaces/NewNamespace.vue
@@ -2,7 +2,7 @@
 	<create-edit
 		:title="$t('namespace.create.title')"
 		@create="newNamespace()"
-		:create-disabled="namespace.title === ''"
+		:primary-disabled="namespace.title === ''"
 	>
 		<div class="field">
 			<label class="label" for="namespaceTitle">{{ $t('namespace.attributes.title') }}</label>
@@ -63,23 +63,17 @@ export default {
 		this.setTitle(this.$t('namespace.create.title'))
 	},
 	methods: {
-		newNamespace() {
+		async newNamespace() {
 			if (this.namespace.title === '') {
 				this.showError = true
 				return
 			}
 			this.showError = false
 
-			this.namespaceService
-				.create(this.namespace)
-				.then((r) => {
-					this.$store.commit('namespaces/addNamespace', r)
-					this.$message.success({message: this.$t('namespace.create.success') })
-					this.$router.back()
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			const namespace = await this.namespaceService.create(this.namespace)
+			this.$store.commit('namespaces/addNamespace', namespace)
+			this.$message.success({message: this.$t('namespace.create.success') })
+			this.$router.back()
 		},
 	},
 }
diff --git a/src/views/namespaces/settings/archive.vue b/src/views/namespaces/settings/archive.vue
index 0a7d4a1e..9eb1305b 100644
--- a/src/views/namespaces/settings/archive.vue
+++ b/src/views/namespaces/settings/archive.vue
@@ -23,6 +23,7 @@ export default {
 			title: '',
 		}
 	},
+
 	created() {
 		this.namespace = this.$store.getters['namespaces/getNamespaceById'](this.$route.params.id)
 		this.title = this.namespace.isArchived ?
@@ -30,22 +31,18 @@ export default {
 			this.$t('namespace.archive.titleArchive', { namespace: this.namespace.title })
 		this.setTitle(this.title)
 	},
-	methods: {
-		archiveNamespace() {
 
+	methods: {
+		async archiveNamespace() {
 			this.namespace.isArchived = !this.namespace.isArchived
 
-			this.namespaceService.update(this.namespace)
-				.then(r => {
-					this.$store.commit('namespaces/setNamespaceById', r)
-					this.$message.success({message: this.$t('namespace.archive.success')})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.$router.back()
-				})
+			try {
+				const namespace = await this.namespaceService.update(this.namespace)
+				this.$store.commit('namespaces/setNamespaceById', namespace)
+				this.$message.success({message: this.$t('namespace.archive.success')})
+			} finally {
+				this.$router.back()
+			}
 		},
 	},
 }
diff --git a/src/views/namespaces/settings/delete.vue b/src/views/namespaces/settings/delete.vue
index de04b63a..79f325a8 100644
--- a/src/views/namespaces/settings/delete.vue
+++ b/src/views/namespaces/settings/delete.vue
@@ -13,33 +13,32 @@
 </template>
 
 <script>
-import NamespaceService from '@/services/namespace'
-
 export default {
 	name: 'namespace-setting-delete',
-	data() {
-		return {
-			namespaceService: new NamespaceService(),
-			title: '',
-		}
+	computed: {
+		namespace() {
+			return this.$store.getters['namespaces/getNamespaceById'](this.$route.params.id)
+		},
+		title() {
+			if (!this.namespace) {
+				return
+			}
+			return this.$t('namespace.delete.title', {namespace: this.namespace.title})
+		},
 	},
-	created() {
-		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)
+	watch: {
+		title: {
+			handler(title) {
+				this.setTitle(title)
+			},
+			immediate: true,
+		},
 	},
 	methods: {
-		deleteNamespace() {
-			const namespace = this.$store.getters['namespaces/getNamespaceById'](this.$route.params.id)
-
-			this.$store.dispatch('namespaces/deleteNamespace', namespace)
-				.then(() => {
-					this.$message.success({message: this.$t('namespace.delete.success')})
-					this.$router.push({name: 'home'})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+		async deleteNamespace() {
+			await this.$store.dispatch('namespaces/deleteNamespace', this.namespace)
+			this.$message.success({message: this.$t('namespace.delete.success')})
+			this.$router.push({name: 'home'})
 		},
 	},
 }
diff --git a/src/views/namespaces/settings/edit.vue b/src/views/namespaces/settings/edit.vue
index 7afc3cf6..594c5bc3 100644
--- a/src/views/namespaces/settings/edit.vue
+++ b/src/views/namespaces/settings/edit.vue
@@ -27,7 +27,6 @@
 				<div class="control">
 					<editor
 						:class="{ 'disabled': namespaceService.loading}"
-						:disabled="namespaceService.loading"
 						:preview-is-default="false"
 						id="namespacedescription"
 						:placeholder="$t('namespace.attributes.descriptionPlaceholder')"
@@ -57,12 +56,12 @@
 </template>
 
 <script>
+import AsyncEditor from '@/components/input/AsyncEditor'
+
 import NamespaceService from '@/services/namespace'
 import NamespaceModel from '@/models/namespace'
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 import ColorPicker from '@/components/input/colorPicker.vue'
-import LoadingComponent from '@/components/misc/loading.vue'
-import ErrorComponent from '@/components/misc/error.vue'
 import CreateEdit from '@/components/misc/create-edit.vue'
 
 export default {
@@ -79,12 +78,7 @@ export default {
 		CreateEdit,
 		ColorPicker,
 		Fancycheckbox,
-		editor: () => ({
-			component: import('@/components/input/editor.vue'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	beforeMount() {
 		this.namespace.id = this.$route.params.id
@@ -98,8 +92,8 @@ export default {
 		},
 	},
 	methods: {
-		loadNamespace() {
-			// This makes the editor trigger its mounted function again which makes it forget every input
+		async loadNamespace() {
+			// HACK: This makes the editor trigger its mounted function again which makes it forget every input
 			// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
 			// which made it impossible to detect change from the outside. Therefore the component would
 			// not update if new content from the outside was made available.
@@ -108,30 +102,20 @@ export default {
 			this.$nextTick(() => this.editorActive = true)
 
 			const namespace = new NamespaceModel({id: this.$route.params.id})
-			this.namespaceService.get(namespace)
-				.then(r => {
-					this.$set(this, 'namespace', r)
-					// This will trigger the dynamic loading of components once we actually have all the data to pass to them
-					this.manageTeamsComponent = 'manageSharing'
-					this.manageUsersComponent = 'manageSharing'
-					this.title = this.$t('namespace.edit.title', {namespace: r.title})
-					this.setTitle(this.title)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			this.namespace = await this.namespaceService.get(namespace)
+			// This will trigger the dynamic loading of components once we actually have all the data to pass to them
+			this.manageTeamsComponent = 'manageSharing'
+			this.manageUsersComponent = 'manageSharing'
+			this.title = this.$t('namespace.edit.title', {namespace: this.namespace.title})
+			this.setTitle(this.title)
 		},
-		save() {
-			this.namespaceService.update(this.namespace)
-				.then(r => {
-					// Update the namespace in the parent
-					this.$store.commit('namespaces/setNamespaceById', r)
-					this.$message.success({message: this.$t('namespace.edit.success')})
-					this.$router.back()
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+
+		async save() {
+			const namespace = await this.namespaceService.update(this.namespace)
+			// Update the namespace in the parent
+			this.$store.commit('namespaces/setNamespaceById', namespace)
+			this.$message.success({message: this.$t('namespace.edit.success')})
+			this.$router.back()
 		},
 	},
 }
diff --git a/src/views/namespaces/settings/share.vue b/src/views/namespaces/settings/share.vue
index 5096bb7f..8f70cbd5 100644
--- a/src/views/namespaces/settings/share.vue
+++ b/src/views/namespaces/settings/share.vue
@@ -57,20 +57,14 @@ export default {
 		},
 	},
 	methods: {
-		loadNamespace() {
+		async loadNamespace() {
 			const namespace = new NamespaceModel({id: this.$route.params.id})
-			this.namespaceService.get(namespace)
-				.then(r => {
-					this.$set(this, 'namespace', r)
-					// This will trigger the dynamic loading of components once we actually have all the data to pass to them
-					this.manageTeamsComponent = 'manageSharing'
-					this.manageUsersComponent = 'manageSharing'
-					this.title = this.$t('namespace.share.title', { namespace: this.namespace.title })
-					this.setTitle(this.title)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			this.namespace = await this.namespaceService.get(namespace)
+			// This will trigger the dynamic loading of components once we actually have all the data to pass to them
+			this.manageTeamsComponent = 'manageSharing'
+			this.manageUsersComponent = 'manageSharing'
+			this.title = this.$t('namespace.share.title', { namespace: this.namespace.title })
+			this.setTitle(this.title)
 		},
 	},
 }
diff --git a/src/views/sharing/LinkSharingAuth.vue b/src/views/sharing/LinkSharingAuth.vue
index c152a22a..042aca7d 100644
--- a/src/views/sharing/LinkSharingAuth.vue
+++ b/src/views/sharing/LinkSharingAuth.vue
@@ -57,7 +57,7 @@ export default {
 		'authLinkShare',
 	]),
 	methods: {
-		auth() {
+		async auth() {
 			this.errorMessage = ''
 
 			if (this.authLinkShare) {
@@ -66,29 +66,30 @@ export default {
 
 			this.loading = true
 
-			this.$store.dispatch('auth/linkShareAuth', {hash: this.$route.params.share, password: this.password})
-				.then((r) => {
-					this.$router.push({name: 'list.list', params: {listId: r.list_id}})
+			try {
+				const r = await this.$store.dispatch('auth/linkShareAuth', {
+					hash: this.$route.params.share,
+					password: this.password,
 				})
-				.catch(e => {
-					if (typeof e.response.data.code !== 'undefined' && e.response.data.code === 13001) {
-						this.authenticateWithPassword = true
-						return
-					}
+				this.$router.push({name: 'list.list', params: {listId: r.list_id}})
+			} catch(e) {
+				if (typeof e.response.data.code !== 'undefined' && e.response.data.code === 13001) {
+					this.authenticateWithPassword = true
+					return
+				}
 
-					// TODO: Put this logic in a global errorMessage handler method which checks all auth codes
-					let errorMessage = this.$t('sharing.error')
-					if (e.response && e.response.data && e.response.data.message) {
-						errorMessage = e.response.data.message
-					}
-					if (typeof e.response.data.code !== 'undefined' && e.response.data.code === 13002) {
-						errorMessage = this.$t('sharing.invalidPassword')
-					}
-					this.errorMessage = errorMessage
-				})
-				.finally(() => {
-					this.loading = false
-				})
+				// TODO: Put this logic in a global errorMessage handler method which checks all auth codes
+				let errorMessage = this.$t('sharing.error')
+				if (e.response && e.response.data && e.response.data.message) {
+					errorMessage = e.response.data.message
+				}
+				if (typeof e.response.data.code !== 'undefined' && e.response.data.code === 13002) {
+					errorMessage = this.$t('sharing.invalidPassword')
+				}
+				this.errorMessage = errorMessage
+			} finally {
+				this.loading = false
+			}
 		},
 	},
 }
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index 015044d3..f9f1a9d3 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -33,15 +33,12 @@
 		</h3>
 		<div v-if="!showAll" class="mb-4">
 			<x-button type="secondary" @click="showTodaysTasks()" class="mr-2">{{ $t('task.show.today') }}</x-button>
-			<x-button type="secondary" @click="setDatesToNextWeek()" class="mr-2">{{
-					$t('task.show.nextWeek')
-				}}
-			</x-button>
+			<x-button type="secondary" @click="setDatesToNextWeek()" class="mr-2">{{ $t('task.show.nextWeek') }}</x-button>
 			<x-button type="secondary" @click="setDatesToNextMonth()">{{ $t('task.show.nextMonth') }}</x-button>
 		</div>
 		<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
 			<h3 class="nothing">{{ $t('task.show.noTasks') }}</h3>
-			<img alt="" :src="llamaCoolUrl"/>
+			<img alt="" :src="llamaCoolUrl" />
 		</template>
 		<div :class="{ 'is-loading': loading}" class="spinner"></div>
 
@@ -144,7 +141,7 @@ export default {
 				},
 			})
 		},
-		loadPendingTasks() {
+		async loadPendingTasks() {
 			// Since this route is authentication only, users would get an error message if they access the page unauthenticated.
 			// Since this component is mounted as the home page before unauthenticated users get redirected
 			// to the login page, they will almost always see the error message.
@@ -203,31 +200,26 @@ export default {
 				}
 			}
 
-			this.$store.dispatch('tasks/loadTasks', params)
-				.then(r => {
+			const tasks = await this.$store.dispatch('tasks/loadTasks', params)
 
-					// Sorting tasks with a due date so that the soonest or overdue are displayed at the top of the list.
-					const tasksWithDueDates = r
-						.filter(t => t.dueDate !== null)
-						.sort((a, b) => a.dueDate > b.dueDate ? 1 : -1)
-
-					const tasksWithoutDueDates = r.filter(t => t.dueDate === null)
-
-					const tasks = [
-						...tasksWithDueDates,
-						...tasksWithoutDueDates,
-					]
-
-					this.$set(this, 'tasks', tasks)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			// FIXME: sort tasks in computed
+			// Sort all tasks to put those with a due date before the ones without a due date, the
+			// soonest before the later ones.
+			// We can't use the api sorting here because that sorts tasks with a due date after
+			// ones without a due date.
+			this.tasks = tasks.sort((a, b) => {
+				const sortByDueDate = b.dueDate - a.dueDate
+				return sortByDueDate === 0
+					? b.id - a.id
+					: sortByDueDate
+			})
 		},
+
+		// FIXME: this modification should happen in the store
 		updateTasks(updatedTask) {
 			for (const t in this.tasks) {
 				if (this.tasks[t].id === updatedTask.id) {
-					this.$set(this.tasks, t, updatedTask)
+					this.tasks[t] = updatedTask
 					// Move the task to the end of the done tasks if it is now done
 					if (updatedTask.done) {
 						this.tasks.splice(t, 1)
@@ -237,18 +229,21 @@ export default {
 				}
 			}
 		},
+
 		setDatesToNextWeek() {
 			this.cStartDate = new Date()
 			this.cEndDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
 			this.showOverdue = false
 			this.setDate()
 		},
+
 		setDatesToNextMonth() {
 			this.cStartDate = new Date()
 			this.cEndDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1))
 			this.showOverdue = false
 			this.setDate()
 		},
+
 		showTodaysTasks() {
 			const d = new Date()
 			this.cStartDate = new Date()
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index f1acc047..9ccefd40 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -265,7 +265,7 @@
 					/>
 					<x-button
 						@click="setFieldActive('assignees')"
-						@shortkey.native="setFieldActive('assignees')"
+						@shortkey="setFieldActive('assignees')"
 						type="secondary"
 						v-shortkey="['a']">
 						<span class="icon is-small"><icon icon="users"/></span>
@@ -273,7 +273,7 @@
 					</x-button>
 					<x-button
 						@click="setFieldActive('labels')"
-						@shortkey.native="setFieldActive('labels')"
+						@shortkey="setFieldActive('labels')"
 						type="secondary"
 						v-shortkey="['l']"
 						icon="tags"
@@ -289,7 +289,7 @@
 					</x-button>
 					<x-button
 						@click="setFieldActive('dueDate')"
-						@shortkey.native="setFieldActive('dueDate')"
+						@shortkey="setFieldActive('dueDate')"
 						type="secondary"
 						v-shortkey="['d']"
 						icon="calendar"
@@ -333,7 +333,7 @@
 					</x-button>
 					<x-button
 						@click="setFieldActive('attachments')"
-						@shortkey.native="setFieldActive('attachments')"
+						@shortkey="setFieldActive('attachments')"
 						type="secondary"
 						v-shortkey="['f']"
 						icon="paperclip"
@@ -342,7 +342,7 @@
 					</x-button>
 					<x-button
 						@click="setFieldActive('relatedTasks')"
-						@shortkey.native="setFieldActive('relatedTasks')"
+						@shortkey="setFieldActive('relatedTasks')"
 						type="secondary"
 						v-shortkey="['r']"
 						icon="tasks"
@@ -381,22 +381,22 @@
 
 					<!-- Created / Updated [by] -->
 					<p class="created">
-						<i18n path="task.detail.created">
+						<i18n-t keypath="task.detail.created">
 							<span v-tooltip="formatDate(task.created)">{{ formatDateSince(task.created) }}</span>
 							{{ task.createdBy.getDisplayName() }}
-						</i18n>
+						</i18n-t>
 						<template v-if="+new Date(task.created) !== +new Date(task.updated)">
 							<br/>
 							<!-- Computed properties to show the actual date every time it gets updated -->
-							<i18n path="task.detail.updated">
+							<i18n-t keypath="task.detail.updated">
 								<span v-tooltip="updatedFormatted">{{ updatedSince }}</span>
-							</i18n>
+							</i18n-t>
 						</template>
 						<template v-if="task.done">
 							<br/>
-							<i18n path="task.detail.doneAt">
+							<i18n-t keypath="task.detail.doneAt">
 								<span v-tooltip="doneFormatted">{{ doneSince }}</span>
-							</i18n>
+							</i18n-t>
 						</template>
 					</p>
 				</div>
@@ -508,6 +508,15 @@ export default {
 			handler: 'loadTask',
 			immediate: true,
 		},
+		parent: {
+			handler(parent) {
+				const parentList = parent !== null ? parent.list : null
+				if (parentList !== null) {
+					this.$store.commit(CURRENT_LIST, parentList)
+				}
+			},
+			immediate: true,
+		},
 	},
 	computed: {
 		taskId() {
@@ -529,9 +538,7 @@ export default {
 				return null
 			}
 
-			const list = this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
-			this.$store.commit(CURRENT_LIST, list !== null ? list.list : this.currentList)
-			return list
+			return this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
 		},
 		canWrite() {
 			return typeof this.task !== 'undefined' && typeof this.task.maxRight !== 'undefined' && this.task.maxRight > rights.READ
@@ -557,26 +564,22 @@ export default {
 			return uploadFile(this.taskId, ...args)
 		},
 
-		loadTask(taskId) {
+		async loadTask(taskId) {
 			if (taskId === undefined) {
 				return
 			}
 
-			this.taskService.get({id: taskId})
-				.then(r => {
-					this.$set(this, 'task', r)
-					this.$store.commit('attachments/set', r.attachments)
-					this.taskColor = this.task.hexColor
-					this.setActiveFields()
-					this.setTitle(this.task.title)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.$nextTick(() => this.visible = true)
-					this.scrollToHeading()
-				})
+			try {
+				this.task = await this.taskService.get({id: taskId})
+				this.$store.commit('attachments/set', this.task.attachments)
+				this.taskColor = this.task.hexColor
+				this.setActiveFields()
+				this.setTitle(this.task.title)
+			} finally {
+				this.scrollToHeading()
+				await this.$nextTick()
+				this.visible = true
+			}
 		},
 		scrollToHeading() {
 			this.$refs.heading.$el.scrollIntoView({block: 'center'})
@@ -599,46 +602,40 @@ export default {
 			this.activeFields.attachments = this.task.attachments.length > 0
 			this.activeFields.relatedTasks = Object.keys(this.task.relatedTasks).length > 0
 		},
-		saveTask(showNotification = true, undoCallback = null) {
-
+		async saveTask(showNotification = true, undoCallback = null) {
 			if (!this.canWrite) {
 				return
 			}
 
 			// We're doing the whole update in a nextTick because sometimes race conditions can occur when
 			// setting the due date on mobile which leads to no due date change being saved.
-			this.$nextTick(() => {
-				this.task.hexColor = this.taskColor
+			await this.$nextTick()
 
-				// If no end date is being set, but a start date and due date,
-				// use the due date as the end date
-				if (this.task.endDate === null && this.task.startDate !== null && this.task.dueDate !== null) {
-					this.task.endDate = this.task.dueDate
-				}
+			this.task.hexColor = this.taskColor
 
-				this.$store.dispatch('tasks/update', this.task)
-					.then(r => {
-						this.task = r
-						this.setActiveFields()
+			// If no end date is being set, but a start date and due date,
+			// use the due date as the end date
+			if (this.task.endDate === null && this.task.startDate !== null && this.task.dueDate !== null) {
+				this.task.endDate = this.task.dueDate
+			}
 
-						if (!showNotification) {
-							return
-						}
+			this.task = await this.$store.dispatch('tasks/update', this.task)
+			this.setActiveFields()
 
-						let actions = []
-						if (undoCallback !== null) {
-							actions = [{
-								title: 'Undo',
-								callback: undoCallback,
-							}]
-						}
-						this.$message.success({message: this.$t('task.detail.updateSuccess')}, actions)
-					})
-					.catch(e => {
-						this.$message.error(e)
-					})
-			})
+			if (!showNotification) {
+				return
+			}
+
+			let actions = []
+			if (undoCallback !== null) {
+				actions = [{
+					title: 'Undo',
+					callback: undoCallback,
+				}]
+			}
+			this.$message.success({message: this.$t('task.detail.updateSuccess')}, actions)
 		},
+
 		setFieldActive(fieldName) {
 			this.activeFields[fieldName] = true
 			this.$nextTick(() => {
@@ -657,16 +654,13 @@ export default {
 				}
 			})
 		},
-		deleteTask() {
-			this.$store.dispatch('tasks/delete', this.task)
-				.then(() => {
-					this.$message.success({message: this.$t('task.detail.deleteSuccess')})
-					this.$router.push({name: 'list.index', params: {listId: this.task.listId}})
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+
+		async deleteTask() {
+			await this.$store.dispatch('tasks/delete', this.task)
+			this.$message.success({message: this.$t('task.detail.deleteSuccess')})
+			this.$router.push({name: 'list.index', params: {listId: this.task.listId}})
 		},
+
 		toggleTaskDone() {
 			this.task.done = !this.task.done
 
@@ -674,39 +668,26 @@ export default {
 				playPop()
 			}
 
-			this.saveTask(true, () => this.toggleTaskDone())
+			this.saveTask(true, this.toggleTaskDone)
 		},
+
 		setDescriptionChanged(e) {
 			if (e.key === 'Enter' || e.key === 'Control') {
 				return
 			}
 			this.descriptionChanged = true
 		},
-		saveTaskIfDescriptionChanged() {
-			// We want to only save the description if it was changed.
-			// Since we can either trigger this with ctrl+enter or @change, it would be possible to save a task first
-			// with ctrl+enter and then with @change although nothing changed since the last save when @change gets fired.
-			// To only save one time we added this method.
-			if (this.descriptionChanged) {
-				this.descriptionChanged = false
-				this.saveTask()
-			}
-		},
-		changeList(list) {
-			this.task.listId = list.id
-			this.saveTask()
+
+		async changeList(list) {
 			this.$store.commit('kanban/removeTaskInBucket', this.task)
+			this.task.listId = list.id
+			await this.saveTask()
 		},
-		toggleFavorite() {
+
+		async toggleFavorite() {
 			this.task.isFavorite = !this.task.isFavorite
-			this.taskService.update(this.task)
-				.then(t => {
-					this.task = t
-					this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+			this.task = await this.taskService.update(this.task)
+			this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
 		},
 	},
 }
diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue
index b2b8e869..65fd5bd4 100644
--- a/src/views/teams/EditTeam.vue
+++ b/src/views/teams/EditTeam.vue
@@ -161,6 +161,7 @@
 </template>
 
 <script>
+import AsyncEditor from '@/components/input/AsyncEditor'
 import {mapState} from 'vuex'
 
 import TeamService from '../../services/team'
@@ -171,9 +172,6 @@ import UserModel from '../../models/user'
 import UserService from '../../services/user'
 import Rights from '../../models/constants/rights.json'
 
-import LoadingComponent from '../../components/misc/loading'
-import ErrorComponent from '../../components/misc/error'
-
 import Multiselect from '@/components/input/multiselect.vue'
 
 export default {
@@ -199,12 +197,7 @@ export default {
 	},
 	components: {
 		Multiselect,
-		editor: () => ({
-			component: import('../../components/input/editor'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	watch: {
 		// call again the method if the route changes
@@ -226,116 +219,81 @@ export default {
 			userInfo: (state) => state.auth.info,
 		}),
 	},
+
 	methods: {
-		loadTeam() {
+		async loadTeam() {
 			this.team = new TeamModel({id: this.teamId})
-			this.teamService
-				.get(this.team)
-				.then((response) => {
-					this.$set(this, 'team', response)
-					this.title = this.$t('team.edit.title', {team: this.team.name})
-					this.setTitle(this.title)
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			this.team = await this.teamService.get(this.team)
+			this.title = this.$t('team.edit.title', {team: this.team.name})
+			this.setTitle(this.title)
 		},
-		save() {
+
+		async save() {
 			if (this.team.name === '') {
 				this.showError = true
 				return
 			}
 			this.showError = false
 
-			this.teamService
-				.update(this.team)
-				.then((response) => {
-					this.team = response
-					this.$message.success({message: this.$t('team.edit.success')})
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			this.team = await this.teamService.update(this.team)
+			this.$message.success({message: this.$t('team.edit.success')})
 		},
-		deleteTeam() {
-			this.teamService
-				.delete(this.team)
-				.then(() => {
-					this.$message.success({message: this.$t('team.edit.delete.success')})
-					this.$router.push({name: 'teams.index'})
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+
+		async deleteTeam() {
+			await this.teamService.delete(this.team)
+			this.$message.success({message: this.$t('team.edit.delete.success')})
+			this.$router.push({name: 'teams.index'})
 		},
-		deleteUser() {
-			this.teamMemberService
-				.delete(this.member)
-				.then(() => {
-					this.$message.success({message: this.$t('team.edit.deleteUser.success')})
-					this.loadTeam()
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
-				.finally(() => {
-					this.showUserDeleteModal = false
-				})
+
+		async deleteUser() {
+			try {
+				await this.teamMemberService.delete(this.member)
+				this.$message.success({message: this.$t('team.edit.deleteUser.success')})
+				this.loadTeam()
+			} finally {
+				this.showUserDeleteModal = false
+			}
 		},
-		addUser() {
+
+		async addUser() {
 			const newMember = new TeamMemberModel({
 				teamId: this.teamId,
 				username: this.newMember.username,
 			})
-			this.teamMemberService
-				.create(newMember)
-				.then(() => {
-					this.loadTeam()
-					this.$message.success({message: this.$t('team.edit.userAddedSuccess')})
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			await this.teamMemberService.create(newMember)
+			this.loadTeam()
+			this.$message.success({message: this.$t('team.edit.userAddedSuccess')})
 		},
-		toggleUserType(member) {
+
+		async toggleUserType(member) {
+			// FIXME: direct manipulation
 			member.admin = !member.admin
 			member.teamId = this.teamId
-			this.teamMemberService
-				.update(member)
-				.then((r) => {
-					for (const tm in this.team.members) {
-						if (this.team.members[tm].id === member.id) {
-							this.$set(this.team.members[tm], 'admin', r.admin)
-							break
-						}
-					}
-					this.$message.success({
-						message: member.admin ?
-							this.$t('team.edit.madeAdmin') :
-							this.$t('team.edit.madeMember'),
-					})
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			const r = await this.teamMemberService.update(member)
+			for (const tm in this.team.members) {
+				if (this.team.members[tm].id === member.id) {
+					this.team.members[tm].admin = r.admin
+					break
+				}
+			}
+			this.$message.success({
+				message: member.admin ?
+					this.$t('team.edit.madeAdmin') :
+					this.$t('team.edit.madeMember'),
+			})
 		},
-		findUser(query) {
+
+		async findUser(query) {
 			if (query === '') {
-				this.$set(this, 'foundUsers', [])
+				this.clearAll()
 				return
 			}
 
-			this.userService
-				.getAll({}, {s: query})
-				.then((response) => {
-					this.$set(this, 'foundUsers', response)
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			this.foundUsers = await this.userService.getAll({}, {s: query})
 		},
+
 		clearAll() {
-			this.$set(this, 'foundUsers', [])
+			this.foundUsers = []
 		},
 	},
 }
diff --git a/src/views/teams/ListTeams.vue b/src/views/teams/ListTeams.vue
index 7712a277..d6dd95af 100644
--- a/src/views/teams/ListTeams.vue
+++ b/src/views/teams/ListTeams.vue
@@ -43,14 +43,8 @@ export default {
 		this.setTitle(this.$t('team.title'))
 	},
 	methods: {
-		loadTeams() {
-			this.teamService.getAll()
-				.then(response => {
-					this.$set(this, 'teams', response)
-				})
-				.catch(e => {
-					this.$message.error(e)
-				})
+		async loadTeams() {
+			this.teams = await this.teamService.getAll()
 		},
 	},
 }
diff --git a/src/views/teams/NewTeam.vue b/src/views/teams/NewTeam.vue
index a92f50b3..c5a1afb0 100644
--- a/src/views/teams/NewTeam.vue
+++ b/src/views/teams/NewTeam.vue
@@ -2,7 +2,7 @@
 	<create-edit
 		:title="$t('team.create.title')"
 		@create="newTeam()"
-		:create-disabled="team.name === ''"
+		:primary-disabled="team.name === ''"
 	>
 		<div class="field">
 			<label class="label" for="teamName">{{ $t('team.attributes.name') }}</label>
@@ -49,25 +49,19 @@ export default {
 		this.setTitle(this.$t('team.create.title'))
 	},
 	methods: {
-		newTeam() {
+		async newTeam() {
 			if (this.team.name === '') {
 				this.showError = true
 				return
 			}
 			this.showError = false
 
-			this.teamService
-				.create(this.team)
-				.then((response) => {
-					this.$router.push({
-						name: 'teams.edit',
-						params: { id: response.id },
-					})
-					this.$message.success({message: this.$t('team.create.success') })
-				})
-				.catch((e) => {
-					this.$message.error(e)
-				})
+			const response = await this.teamService.create(this.team)
+			this.$router.push({
+				name: 'teams.edit',
+				params: { id: response.id },
+			})
+			this.$message.success({message: this.$t('team.create.success') })
 		},
 	},
 }
diff --git a/src/views/user/DataExportDownload.vue b/src/views/user/DataExportDownload.vue
index 71507c52..c8db6541 100644
--- a/src/views/user/DataExportDownload.vue
+++ b/src/views/user/DataExportDownload.vue
@@ -57,7 +57,6 @@ export default {
 			}
 
 			this.dataExportService.download(this.password)
-				.catch(e => this.$message.error(e))
 		},
 	},
 }
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 4efa9636..0ad4dac0 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -105,7 +105,7 @@
 import {mapState} from 'vuex'
 
 import {HTTPFactory} from '@/http-common'
-import {ERROR_MESSAGE, LOADING} from '@/store/mutation-types'
+import {LOADING} from '@/store/mutation-types'
 import legal from '../../components/misc/legal'
 import ApiConfig from '@/components/misc/api-config.vue'
 import {getErrorText} from '@/message'
@@ -121,6 +121,7 @@ export default {
 		return {
 			confirmedEmailSuccess: false,
 			hasApiUrl: false,
+			errorMessage: '',
 		}
 	},
 	beforeMount() {
@@ -138,7 +139,7 @@ export default {
 				})
 				.catch(e => {
 					cancel()
-					this.$store.commit(ERROR_MESSAGE, e.response.data.message)
+					this.errorMessage = e.response.data.message
 				})
 		}
 
@@ -170,7 +171,6 @@ export default {
 		...mapState({
 			registrationEnabled: state => state.config.registrationEnabled,
 			loading: LOADING,
-			errorMessage: ERROR_MESSAGE,
 			needsTotpPasscode: state => state.auth.needsTotpPasscode,
 			authenticated: state => state.auth.authenticated,
 			localAuthEnabled: state => state.config.auth.local.enabled,
@@ -187,8 +187,9 @@ export default {
 				this.loading = false
 			}
 		},
-		submit() {
-			this.$store.commit(ERROR_MESSAGE, '')
+
+		async submit() {
+			this.errorMessage = ''
 			// Some browsers prevent Vue bindings from working with autofilled values.
 			// To work around this, we're manually getting the values here instead of relying on vue bindings.
 			// For more info, see https://kolaente.dev/vikunja/frontend/issues/78
@@ -201,24 +202,19 @@ export default {
 				credentials.totpPasscode = this.$refs.totpPasscode.value
 			}
 
-			this.$store.dispatch('auth/login', credentials)
-				.then(() => {
-					this.$store.commit('auth/needsTotpPasscode', false)
-				})
-				.catch(e => {
-					if (e.response && e.response.data.code === 1017 && !credentials.totpPasscode) {
-						return
-					}
+			try {
+				await this.$store.dispatch('auth/login', credentials)
+				this.$store.commit('auth/needsTotpPasscode', false)
+			} catch(e) {
+				if (e.response && e.response.data.code === 1017 && !credentials.totpPasscode) {
+					return
+				}
 
-					const err = getErrorText(e, p => this.$t(p))
-					if (typeof err[1] !== 'undefined') {
-						this.$store.commit(ERROR_MESSAGE, err[1])
-						return
-					}
-
-					this.$store.commit(ERROR_MESSAGE, err[0])
-				})
+				const err = getErrorText(e)
+				this.errorMessage = typeof err[1] !== 'undefined' ? err[1] : err[0]
+			}
 		},
+
 		redirectToProvider(provider) {
 			redirectToProvider(provider, this.openidConnect.redirectUrl)
 		},
diff --git a/src/views/user/OpenIdAuth.vue b/src/views/user/OpenIdAuth.vue
index 66b2b305..93b421b3 100644
--- a/src/views/user/OpenIdAuth.vue
+++ b/src/views/user/OpenIdAuth.vue
@@ -12,21 +12,25 @@
 <script>
 import {mapState} from 'vuex'
 
-import {ERROR_MESSAGE, LOADING} from '@/store/mutation-types'
+import {LOADING} from '@/store/mutation-types'
 import {getErrorText} from '@/message'
 import {clearLastVisited, getLastVisited} from '../../helpers/saveLastVisited'
 
 export default {
 	name: 'Auth',
+	data() {
+		return {
+			errorMessage: '',
+		}
+	},
 	computed: mapState({
-		errorMessage: ERROR_MESSAGE,
 		loading: LOADING,
 	}),
 	mounted() {
 		this.authenticateWithCode()
 	},
 	methods: {
-		authenticateWithCode() {
+		async authenticateWithCode() {
 			// This component gets mounted twice: The first time when the actual auth request hits the frontend,
 			// the second time after that auth request succeeded and the outer component "content-no-auth" isn't used
 			// but instead the "content-auth" component is used. Because this component is just a route and thus
@@ -40,53 +44,44 @@ export default {
 			}
 			localStorage.setItem('authenticating', true)
 
+			this.errorMessage = ''
+
 			if (typeof this.$route.query.error !== 'undefined') {
-				let error = this.$t('user.auth.openIdGeneralError')
-				if (typeof this.$route.query.message !== 'undefined') {
-					error = this.$route.query.message
-				}
 				localStorage.removeItem('authenticating')
-				this.$store.commit(ERROR_MESSAGE, error)
+				this.errorMessage = typeof this.$route.query.message !== 'undefined'
+					? this.$route.query.message
+					: this.$t('user.auth.openIdGeneralError')
 				return
 			}
 
 			const state = localStorage.getItem('state')
 			if (typeof this.$route.query.state === 'undefined' || this.$route.query.state !== state) {
 				localStorage.removeItem('authenticating')
-				this.$store.commit(ERROR_MESSAGE, this.$t('user.auth.openIdStateError'))
+				this.errorMessage = this.$t('user.auth.openIdStateError')
 				return
 			}
 
-			this.$store.commit(ERROR_MESSAGE, '')
-
-			this.$store.dispatch('auth/openIdAuth', {
-				provider: this.$route.params.provider,
-				code: this.$route.query.code,
-			})
-				.then(() => {
-					const last = getLastVisited()
-					if (last !== null) {
-						this.$router.push({
-							name: last.name,
-							params: last.params,
-						})
-						clearLastVisited()
-					} else {
-						this.$router.push({name: 'home'})
-					}
-				})
-				.catch(e => {
-					const err = getErrorText(e, p => this.$t(p))
-					if (typeof err[1] !== 'undefined') {
-						this.$store.commit(ERROR_MESSAGE, err[1])
-						return
-					}
-
-					this.$store.commit(ERROR_MESSAGE, err[0])
-				})
-				.finally(() => {
-					localStorage.removeItem('authenticating')
+			try {
+				await this.$store.dispatch('auth/openIdAuth', {
+					provider: this.$route.params.provider,
+					code: this.$route.query.code,
 				})
+				const last = getLastVisited()
+				if (last !== null) {
+					this.$router.push({
+						name: last.name,
+						params: last.params,
+					})
+					clearLastVisited()
+				} else {
+					this.$router.push({name: 'home'})
+				}
+			} catch(e) {
+				const err = getErrorText(e)
+				this.errorMessage = typeof err[1] !== 'undefined' ? err[1] : err[0]
+			} finally {
+				localStorage.removeItem('authenticating')
+			}
 		},
 	},
 }
diff --git a/src/views/user/PasswordReset.vue b/src/views/user/PasswordReset.vue
index 2773a955..fa0d4d94 100644
--- a/src/views/user/PasswordReset.vue
+++ b/src/views/user/PasswordReset.vue
@@ -85,11 +85,13 @@ export default {
 			successMessage: '',
 		}
 	},
+
 	mounted() {
 		this.setTitle(this.$t('user.auth.resetPassword'))
 	},
+
 	methods: {
-		submit() {
+		async submit() {
 			this.errorMsg = ''
 
 			if (this.credentials.password2 !== this.credentials.password) {
@@ -98,14 +100,13 @@ export default {
 			}
 
 			let passwordReset = new PasswordResetModel({newPassword: this.credentials.password})
-			this.passwordResetService.resetPassword(passwordReset)
-				.then(response => {
-					this.successMessage = response.message
-					localStorage.removeItem('passwordResetToken')
-				})
-				.catch(e => {
-					this.errorMsg = e.response.data.message
-				})
+			try {
+				const { message } = this.passwordResetService.resetPassword(passwordReset)
+				this.successMessage = message
+				localStorage.removeItem('passwordResetToken')
+			} catch(e) {
+				this.errorMsg = e.response.data.message
+			}
 		},
 	},
 }
diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index 7d3b24ec..39ef2b28 100644
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@@ -98,7 +98,7 @@
 <script>
 import router from '../../router'
 import {mapState} from 'vuex'
-import {ERROR_MESSAGE, LOADING} from '@/store/mutation-types'
+import {LOADING} from '@/store/mutation-types'
 import Legal from '../../components/misc/legal'
 
 export default {
@@ -113,6 +113,7 @@ export default {
 				password: '',
 				password2: '',
 			},
+			errorMessage: '',
 		}
 	},
 	beforeMount() {
@@ -127,15 +128,14 @@ export default {
 	computed: mapState({
 		authenticated: state => state.auth.authenticated,
 		loading: LOADING,
-		errorMessage: ERROR_MESSAGE,
 	}),
 	methods: {
-		submit() {
+		async submit() {
 			this.$store.commit(LOADING, true)
-			this.$store.commit(ERROR_MESSAGE, '')
+			this.errorMessage = ''
 
 			if (this.credentials.password2 !== this.credentials.password) {
-				this.$store.commit(ERROR_MESSAGE, this.$t('user.auth.passwordsDontMatch'))
+				this.errorMessage = this.$t('user.auth.passwordsDontMatch')
 				this.$store.commit(LOADING, false)
 				return
 			}
@@ -146,8 +146,11 @@ export default {
 				password: this.credentials.password,
 			}
 
-			this.$store.dispatch('auth/register', credentials)
-				.catch(() => {})
+			try {
+				await this.$store.dispatch('auth/register', credentials)
+			} catch(e) {
+				this.errorMessage = e.message
+			}
 		},
 	},
 }
diff --git a/src/views/user/RequestPasswordReset.vue b/src/views/user/RequestPasswordReset.vue
index a4468271..57f2196a 100644
--- a/src/views/user/RequestPasswordReset.vue
+++ b/src/views/user/RequestPasswordReset.vue
@@ -69,15 +69,14 @@ export default {
 		this.setTitle(this.$t('user.auth.resetPassword'))
 	},
 	methods: {
-		submit() {
+		async submit() {
 			this.errorMsg = ''
-			this.passwordResetService.requestResetPassword(this.passwordReset)
-				.then(() => {
-					this.isSuccess = true
-				})
-				.catch(e => {
-					this.errorMsg = e.response.data.message
-				})
+			try {
+				await this.passwordResetService.requestResetPassword(this.passwordReset)
+				this.isSuccess = true
+			} catch(e) {
+				this.errorMsg = e.response.data.message
+			}
 		},
 	},
 }
diff --git a/src/views/user/Settings.vue b/src/views/user/Settings.vue
index 8709fbcd..1652bfa8 100644
--- a/src/views/user/Settings.vue
+++ b/src/views/user/Settings.vue
@@ -298,9 +298,8 @@ import EmailUpdateModel from '../../models/emailUpdate'
 import TotpModel from '../../models/totp'
 import TotpService from '../../services/totp'
 import UserSettingsService from '../../services/userSettings'
-import UserSettingsModel from '../../models/userSettings'
 import {playSoundWhenDoneKey} from '@/helpers/playPop'
-import {availableLanguages, saveLanguage, getCurrentLanguage} from '../../i18n/setup'
+import {availableLanguages, saveLanguage, getCurrentLanguage} from '@/i18n'
 import {getQuickAddMagicMode, setQuickAddMagicMode} from '../../helpers/quickAddMagicMode'
 import {PrefixMode} from '../../modules/parseTaskText'
 
@@ -312,6 +311,10 @@ import ListSearch from '@/components/tasks/partials/listSearch.vue'
 import UserSettingsDeletion from '../../components/user/settings/deletion'
 import DataExport from '../../components/user/settings/data-export'
 
+function getPlaySoundWhenDoneSetting() {
+	return localStorage.getItem(playSoundWhenDoneKey) === 'true' || localStorage.getItem(playSoundWhenDoneKey) === null
+}
+
 export default {
 	name: 'Settings',
 	data() {
@@ -330,15 +333,13 @@ export default {
 			totpConfirmPasscode: '',
 			totpDisableForm: false,
 			totpDisablePassword: '',
-			playSoundWhenDone: false,
+			playSoundWhenDone: getPlaySoundWhenDoneSetting(),
 			language: getCurrentLanguage(),
 			quickAddMagicMode: getQuickAddMagicMode(),
 			quickAddMagicPrefixes: PrefixMode,
 
-			settings: UserSettingsModel,
+			settings: { ...this.$store.state.auth.settings },
 			userSettingsService: new UserSettingsService(),
-
-			defaultList: null,
 		}
 	},
 	components: {
@@ -348,9 +349,6 @@ export default {
 		DataExport,
 	},
 	created() {
-		this.settings = this.$store.state.auth.settings
-		this.playSoundWhenDone = localStorage.getItem(playSoundWhenDoneKey) === 'true' || localStorage.getItem(playSoundWhenDoneKey) === null
-		this.defaultList = this.$store.getters['lists/getListById'](this.settings.defaultListId)
 		this.totpStatus()
 	},
 	mounted() {
@@ -358,6 +356,9 @@ export default {
 		this.anchorHashCheck()
 	},
 	computed: {
+		defaultList() {
+			return this.$store.getters['lists/getListById'](this.settings.defaultListId)
+		},
 		caldavUrl() {
 			let apiBase = window.API_URL.replace('/api/v1', '')
 			if (apiBase === '') { // Frontend and api on the same host which means we need to prefix the frontend url
@@ -384,90 +385,77 @@ export default {
 	methods: {
 		copy,
 
-		updatePassword() {
+		async updatePassword() {
 			if (this.passwordConfirm !== this.passwordUpdate.newPassword) {
 				this.$message.error({message: this.$t('user.settings.passwordsDontMatch')})
 				return
 			}
 
-			this.passwordUpdateService.update(this.passwordUpdate)
-				.then(() => {
-					this.$message.success({message: this.$t('user.settings.passwordUpdateSuccess')})
-				})
-				.catch(e => this.$message.error(e))
+			await this.passwordUpdateService.update(this.passwordUpdate)
+			this.$message.success({message: this.$t('user.settings.passwordUpdateSuccess')})
 		},
-		updateEmail() {
-			this.emailUpdateService.update(this.emailUpdate)
-				.then(() => {
-					this.$message.success({message: this.$t('user.settings.updateEmailSuccess')})
-				})
-				.catch(e => this.$message.error(e))
+
+		async updateEmail() {
+			await this.emailUpdateService.update(this.emailUpdate)
+			this.$message.success({message: this.$t('user.settings.updateEmailSuccess')})
 		},
-		totpStatus() {
+
+		async totpStatus() {
 			if (!this.totpEnabled) {
 				return
 			}
-			this.totpService.get()
-				.then(r => {
-					this.$set(this, 'totp', r)
-					this.totpSetQrCode()
-				})
-				.catch(e => {
-					// Error code 1016 means totp is not enabled, we don't need an error in that case.
-					if (e.response && e.response.data && e.response.data.code && e.response.data.code === 1016) {
-						this.totpEnrolled = false
-						return
-					}
-
-					this.$message.error(e)
-				})
-		},
-		totpSetQrCode() {
-			this.totpService.qrcode()
-				.then(qr => {
-					const urlCreator = window.URL || window.webkitURL
-					this.totpQR = urlCreator.createObjectURL(qr)
-				})
-		},
-		totpEnroll() {
-			this.totpService.enroll()
-				.then(r => {
-					this.totpEnrolled = true
-					this.$set(this, 'totp', r)
-					this.totpSetQrCode()
-				})
-				.catch(e => this.$message.error(e))
-		},
-		totpConfirm() {
-			this.totpService.enable({passcode: this.totpConfirmPasscode})
-				.then(() => {
-					this.$set(this.totp, 'enabled', true)
-					this.$message.success({message: this.$t('user.settings.totp.confirmSuccess')})
-				})
-				.catch(e => this.$message.error(e))
-		},
-		totpDisable() {
-			this.totpService.disable({password: this.totpDisablePassword})
-				.then(() => {
+			try {
+				this.totp = await this.totpService.get()
+				this.totpSetQrCode()
+			} catch(e) {
+				// Error code 1016 means totp is not enabled, we don't need an error in that case.
+				if (e.response && e.response.data && e.response.data.code && e.response.data.code === 1016) {
 					this.totpEnrolled = false
-					this.$set(this, 'totp', new TotpModel())
-					this.$message.success({message: this.$t('user.settings.totp.disableSuccess')})
-				})
-				.catch(e => this.$message.error(e))
+					return
+				}
+
+				throw e
+			}
 		},
-		updateSettings() {
+	
+		async totpSetQrCode() {
+			const qr = await this.totpService.qrcode()
+			const urlCreator = window.URL || window.webkitURL
+			this.totpQR = urlCreator.createObjectURL(qr)
+		},
+
+		async totpEnroll() {
+			this.totp = await this.totpService.enroll()
+			this.totpEnrolled = true
+			this.totpSetQrCode()
+		},
+	
+		async totpConfirm() {
+			await this.totpService.enable({passcode: this.totpConfirmPasscode})
+			this.totp.enabled = true
+			this.$message.success({message: this.$t('user.settings.totp.confirmSuccess')})
+		},
+
+		async totpDisable() {
+			await this.totpService.disable({password: this.totpDisablePassword})
+			this.totpEnrolled = false
+			this.totp = new TotpModel()
+			this.$message.success({message: this.$t('user.settings.totp.disableSuccess')})
+		},
+
+		async updateSettings() {
 			localStorage.setItem(playSoundWhenDoneKey, this.playSoundWhenDone)
 			saveLanguage(this.language)
 			setQuickAddMagicMode(this.quickAddMagicMode)
 			this.settings.defaultListId = this.defaultList ? this.defaultList.id : 0
 
-			this.userSettingsService.update(this.settings)
-				.then(() => {
-					this.$store.commit('auth/setUserSettings', this.settings)
-					this.$message.success({message: this.$t('user.settings.general.savedSuccess')})
-				})
-				.catch(e => this.$message.error(e))
+			await this.userSettingsService.update(this.settings)
+			this.$store.commit('auth/setUserSettings', {
+				...this.settings,
+			})
+			this.$message.success({message: this.$t('user.settings.general.savedSuccess')})
 		},
+
 		anchorHashCheck() {
 			if (window.location.hash === this.$route.hash) {
 				const el = document.getElementById(this.$route.hash.slice(1))
diff --git a/tsconfig.json b/tsconfig.json
index 4e9b15a7..8830343a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -40,9 +40,4 @@
     "tests/**/*.ts",
     "tests/**/*.tsx"
   ],
-
-  // https://github.com/johnsoncodehk/volar#using
-  "vueCompilerOptions": {
-    "experimentalCompatMode": 2
-  },
 }
diff --git a/vite.config.js b/vite.config.js
index aa649314..b22ab63a 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,5 +1,5 @@
 import { defineConfig } from 'vite'
-const {createVuePlugin} = require('vite-plugin-vue2')
+import vue from '@vitejs/plugin-vue'
 import legacyFn from '@vitejs/plugin-legacy'
 const {VitePWA} = require('vite-plugin-pwa')
 const path = require('path')
@@ -32,7 +32,15 @@ export default defineConfig({
 		},
 	},
 	plugins: [
-		createVuePlugin(),
+		vue({
+			template: {
+				compilerOptions: {
+					compatConfig: {
+						MODE: 3,
+					},
+				},
+			},
+		}),
 		legacy,
 		VitePWA({
 			srcDir: 'src',
@@ -96,6 +104,10 @@ export default defineConfig({
 	],
 	resolve: {
 		alias: [
+			{
+				find: 'vue',
+				replacement: '@vue/compat',
+			},
 			{
 				find: '@',
 				replacement: path.resolve(__dirname, 'src'),
@@ -110,26 +122,10 @@ export default defineConfig({
 	build: {
 		rollupOptions: {
 			plugins: [
-				visualizer(),
+				visualizer({
+					filename: 'stats.html',
+				}),
 			],
-			output: {
-				manualChunks: {
-					'user-settings': [
-						'./src/views/user/PasswordReset',
-						'./src/views/user/RequestPasswordReset',
-						'./src/views/user/Settings',
-					],
-					'settings': [
-						'./src/views/list/NewList',
-						'./src/views/namespaces/NewNamespace',
-						'./src/views/teams/EditTeam',
-						'./src/views/teams/NewTeam',
-					],
-					'highlight': [
-						'highlight.js',
-					],
-				},
-			},
 		},
 	},
 })
diff --git a/yarn.lock b/yarn.lock
index 61d4f26c..9bb6a9db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -23,23 +23,11 @@
   dependencies:
     "@babel/highlight" "^7.14.5"
 
-"@babel/code-frame@^7.15.8":
-  version "7.15.8"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.15.8.tgz#45990c47adadb00c03677baa89221f7cc23d2503"
-  integrity sha512-2IAnmn8zbvC/jKYhq5Ki9I+DwjlrtMPUCH/CpHvqI4dNnlwHwsxoIhlc8WcYY5LSYknXQtAlFYuHfqAFCvQ4Wg==
-  dependencies:
-    "@babel/highlight" "^7.14.5"
-
 "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.14.5", "@babel/compat-data@^7.14.7":
   version "7.14.7"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.14.7.tgz#7b047d7a3a89a67d2258dc61f604f098f1bc7e08"
   integrity sha512-nS6dZaISCXJ3+518CWiBfEr//gHyMO02uDxBkXTKZDN5POruCnOZ1N4YBRZDCabwF8nZMWBpRxIicmXtBs+fvw==
 
-"@babel/compat-data@^7.15.0":
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.15.0.tgz#2dbaf8b85334796cafbb0f5793a90a2fc010b176"
-  integrity sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==
-
 "@babel/core@^7.1.0", "@babel/core@^7.11.1", "@babel/core@^7.7.2", "@babel/core@^7.7.5":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.8.tgz#20cdf7c84b5d86d83fac8710a8bc605a7ba3f010"
@@ -61,27 +49,6 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
-"@babel/core@^7.15.8":
-  version "7.15.8"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.15.8.tgz#195b9f2bffe995d2c6c159e72fe525b4114e8c10"
-  integrity sha512-3UG9dsxvYBMYwRv+gS41WKHno4K60/9GPy1CJaH6xy3Elq8CTtvtjT5R5jmNhXfCYLX2mTw+7/aq5ak/gOE0og==
-  dependencies:
-    "@babel/code-frame" "^7.15.8"
-    "@babel/generator" "^7.15.8"
-    "@babel/helper-compilation-targets" "^7.15.4"
-    "@babel/helper-module-transforms" "^7.15.8"
-    "@babel/helpers" "^7.15.4"
-    "@babel/parser" "^7.15.8"
-    "@babel/template" "^7.15.4"
-    "@babel/traverse" "^7.15.4"
-    "@babel/types" "^7.15.6"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.2"
-    json5 "^2.1.2"
-    semver "^6.3.0"
-    source-map "^0.5.0"
-
 "@babel/generator@^7.14.8", "@babel/generator@^7.7.2":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.8.tgz#bf86fd6af96cf3b74395a8ca409515f89423e070"
@@ -91,15 +58,6 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.15.4", "@babel/generator@^7.15.8":
-  version "7.15.8"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.15.8.tgz#fa56be6b596952ceb231048cf84ee499a19c0cd1"
-  integrity sha512-ECmAKstXbp1cvpTTZciZCgfOt6iN64lR0d+euv3UZisU5awfRawOvg07Utn/qBGuH4bRIEZKrA/4LzZyXhZr8g==
-  dependencies:
-    "@babel/types" "^7.15.6"
-    jsesc "^2.5.1"
-    source-map "^0.5.0"
-
 "@babel/helper-annotate-as-pure@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz#7bf478ec3b71726d56a8ca5775b046fc29879e61"
@@ -107,13 +65,6 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
-"@babel/helper-annotate-as-pure@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.15.4.tgz#3d0e43b00c5e49fdb6c57e421601a7a658d5f835"
-  integrity sha512-QwrtdNvUNsPCj2lfNQacsGSQvGX8ee1ttrBrcozUP2Sv/jylewBP/8QFe6ZkBsC8T/GYWonNAWJV4aRR9AL2DA==
-  dependencies:
-    "@babel/types" "^7.15.4"
-
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.14.5.tgz#b939b43f8c37765443a19ae74ad8b15978e0a191"
@@ -132,16 +83,6 @@
     browserslist "^4.16.6"
     semver "^6.3.0"
 
-"@babel/helper-compilation-targets@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.15.4.tgz#cf6d94f30fbefc139123e27dd6b02f65aeedb7b9"
-  integrity sha512-rMWPCirulnPSe4d+gwdWXLfAXTTBj8M3guAf5xFQJ0nvFY7tfNAFnWdqaHegHlgDZOCT4qvhF3BYlSJag8yhqQ==
-  dependencies:
-    "@babel/compat-data" "^7.15.0"
-    "@babel/helper-validator-option" "^7.14.5"
-    browserslist "^4.16.6"
-    semver "^6.3.0"
-
 "@babel/helper-create-class-features-plugin@^7.14.5":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.8.tgz#a6f8c3de208b1e5629424a9a63567f56501955fc"
@@ -154,18 +95,6 @@
     "@babel/helper-replace-supers" "^7.14.5"
     "@babel/helper-split-export-declaration" "^7.14.5"
 
-"@babel/helper-create-class-features-plugin@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.15.4.tgz#7f977c17bd12a5fba363cb19bea090394bf37d2e"
-  integrity sha512-7ZmzFi+DwJx6A7mHRwbuucEYpyBwmh2Ca0RvI6z2+WLZYCqV0JOaLb+u0zbtmDicebgKBZgqbYfLaKNqSgv5Pw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.15.4"
-    "@babel/helper-function-name" "^7.15.4"
-    "@babel/helper-member-expression-to-functions" "^7.15.4"
-    "@babel/helper-optimise-call-expression" "^7.15.4"
-    "@babel/helper-replace-supers" "^7.15.4"
-    "@babel/helper-split-export-declaration" "^7.15.4"
-
 "@babel/helper-create-regexp-features-plugin@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.14.5.tgz#c7d5ac5e9cf621c26057722fb7a8a4c5889358c4"
@@ -204,15 +133,6 @@
     "@babel/template" "^7.14.5"
     "@babel/types" "^7.14.5"
 
-"@babel/helper-function-name@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.15.4.tgz#845744dafc4381a4a5fb6afa6c3d36f98a787ebc"
-  integrity sha512-Z91cOMM4DseLIGOnog+Z8OI6YseR9bua+HpvLAQ2XayUGU+neTtX+97caALaLdyu53I/fjhbeCnWnRH1O3jFOw==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.15.4"
-    "@babel/template" "^7.15.4"
-    "@babel/types" "^7.15.4"
-
 "@babel/helper-get-function-arity@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz#25fbfa579b0937eee1f3b805ece4ce398c431815"
@@ -220,13 +140,6 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
-"@babel/helper-get-function-arity@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.15.4.tgz#098818934a137fce78b536a3e015864be1e2879b"
-  integrity sha512-1/AlxSF92CmGZzHnC515hm4SirTxtpDnLEJ0UyEMgTMZN+6bxXKg04dKhiRx5Enel+SUA1G1t5Ed/yQia0efrA==
-  dependencies:
-    "@babel/types" "^7.15.4"
-
 "@babel/helper-hoist-variables@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz#e0dd27c33a78e577d7c8884916a3e7ef1f7c7f8d"
@@ -234,13 +147,6 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
-"@babel/helper-hoist-variables@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.15.4.tgz#09993a3259c0e918f99d104261dfdfc033f178df"
-  integrity sha512-VTy085egb3jUGVK9ycIxQiPbquesq0HUQ+tPO0uv5mPEBZipk+5FkRKiWq5apuyTE9FUrjENB0rCf8y+n+UuhA==
-  dependencies:
-    "@babel/types" "^7.15.4"
-
 "@babel/helper-member-expression-to-functions@^7.14.5", "@babel/helper-member-expression-to-functions@^7.14.7":
   version "7.14.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz#97e56244beb94211fe277bd818e3a329c66f7970"
@@ -248,27 +154,13 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
-"@babel/helper-member-expression-to-functions@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.4.tgz#bfd34dc9bba9824a4658b0317ec2fd571a51e6ef"
-  integrity sha512-cokOMkxC/BTyNP1AlY25HuBWM32iCEsLPI4BHDpJCHHm1FU2E7dKWWIXJgQgSFiu4lp8q3bL1BIKwqkSUviqtA==
-  dependencies:
-    "@babel/types" "^7.15.4"
-
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.14.5":
+"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz#6d1a44df6a38c957aa7c312da076429f11b422f3"
   integrity sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==
   dependencies:
     "@babel/types" "^7.14.5"
 
-"@babel/helper-module-imports@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.15.4.tgz#e18007d230632dea19b47853b984476e7b4e103f"
-  integrity sha512-jeAHZbzUwdW/xHgHQ3QmWR4Jg6j15q4w/gCfwZvtqOxoo5DKtLHk8Bsf4c5RZRC7NmLEs+ohkdq8jFefuvIxAA==
-  dependencies:
-    "@babel/types" "^7.15.4"
-
 "@babel/helper-module-transforms@^7.14.5", "@babel/helper-module-transforms@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.14.8.tgz#d4279f7e3fd5f4d5d342d833af36d4dd87d7dc49"
@@ -283,20 +175,6 @@
     "@babel/traverse" "^7.14.8"
     "@babel/types" "^7.14.8"
 
-"@babel/helper-module-transforms@^7.15.8":
-  version "7.15.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz#d8c0e75a87a52e374a8f25f855174786a09498b2"
-  integrity sha512-DfAfA6PfpG8t4S6npwzLvTUpp0sS7JrcuaMiy1Y5645laRJIp/LiLGIBbQKaXSInK8tiGNI7FL7L8UvB8gdUZg==
-  dependencies:
-    "@babel/helper-module-imports" "^7.15.4"
-    "@babel/helper-replace-supers" "^7.15.4"
-    "@babel/helper-simple-access" "^7.15.4"
-    "@babel/helper-split-export-declaration" "^7.15.4"
-    "@babel/helper-validator-identifier" "^7.15.7"
-    "@babel/template" "^7.15.4"
-    "@babel/traverse" "^7.15.4"
-    "@babel/types" "^7.15.6"
-
 "@babel/helper-optimise-call-expression@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz#f27395a8619e0665b3f0364cddb41c25d71b499c"
@@ -304,13 +182,6 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
-"@babel/helper-optimise-call-expression@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz#f310a5121a3b9cc52d9ab19122bd729822dee171"
-  integrity sha512-E/z9rfbAOt1vDW1DR7k4SzhzotVV5+qMciWV6LaG1g4jeFrkDlJedjtV4h0i4Q/ITnUu+Pk08M7fczsB9GXBDw==
-  dependencies:
-    "@babel/types" "^7.15.4"
-
 "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
@@ -335,16 +206,6 @@
     "@babel/traverse" "^7.14.5"
     "@babel/types" "^7.14.5"
 
-"@babel/helper-replace-supers@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.15.4.tgz#52a8ab26ba918c7f6dee28628b07071ac7b7347a"
-  integrity sha512-/ztT6khaXF37MS47fufrKvIsiQkx1LBRvSJNzRqmbyeZnTwU9qBxXYLaaT/6KaxfKhjs2Wy8kG8ZdsFUuWBjzw==
-  dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.15.4"
-    "@babel/helper-optimise-call-expression" "^7.15.4"
-    "@babel/traverse" "^7.15.4"
-    "@babel/types" "^7.15.4"
-
 "@babel/helper-simple-access@^7.14.5", "@babel/helper-simple-access@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.14.8.tgz#82e1fec0644a7e775c74d305f212c39f8fe73924"
@@ -352,13 +213,6 @@
   dependencies:
     "@babel/types" "^7.14.8"
 
-"@babel/helper-simple-access@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.15.4.tgz#ac368905abf1de8e9781434b635d8f8674bcc13b"
-  integrity sha512-UzazrDoIVOZZcTeHHEPYrr1MvTR/K+wgLg6MY6e1CJyaRhbibftF6fR2KU2sFRtI/nERUZR9fBd6aKgBlIBaPg==
-  dependencies:
-    "@babel/types" "^7.15.4"
-
 "@babel/helper-skip-transparent-expression-wrappers@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.14.5.tgz#96f486ac050ca9f44b009fbe5b7d394cab3a0ee4"
@@ -373,23 +227,11 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
-"@babel/helper-split-export-declaration@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.15.4.tgz#aecab92dcdbef6a10aa3b62ab204b085f776e257"
-  integrity sha512-HsFqhLDZ08DxCpBdEVtKmywj6PQbwnF6HHybur0MAnkAKnlS6uHkwnmRIkElB2Owpfb4xL4NwDmDLFubueDXsw==
-  dependencies:
-    "@babel/types" "^7.15.4"
-
 "@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.8.tgz#32be33a756f29e278a0d644fa08a2c9e0f88a34c"
   integrity sha512-ZGy6/XQjllhYQrNw/3zfWRwZCTVSiBLZ9DHVZxn9n2gip/7ab8mv2TWlKPIBk26RwedCBoWdjLmn+t9na2Gcow==
 
-"@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.15.7":
-  version "7.15.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
-  integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
-
 "@babel/helper-validator-option@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
@@ -414,15 +256,6 @@
     "@babel/traverse" "^7.14.8"
     "@babel/types" "^7.14.8"
 
-"@babel/helpers@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.15.4.tgz#5f40f02050a3027121a3cf48d497c05c555eaf43"
-  integrity sha512-V45u6dqEJ3w2rlryYYXf6i9rQ5YMNu4FLS6ngs8ikblhu2VdR1AqAd6aJjBzmf2Qzh6KOLqKHxEN9+TFbAkAVQ==
-  dependencies:
-    "@babel/template" "^7.15.4"
-    "@babel/traverse" "^7.15.4"
-    "@babel/types" "^7.15.4"
-
 "@babel/highlight@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
@@ -437,10 +270,10 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.8.tgz#66fd41666b2d7b840bd5ace7f7416d5ac60208d4"
   integrity sha512-syoCQFOoo/fzkWDeM0dLEZi5xqurb5vuyzwIMNZRNun+N/9A4cUZeQaE7dTrB8jGaKuJRBtEOajtnmw0I5hvvA==
 
-"@babel/parser@^7.15.4", "@babel/parser@^7.15.8":
-  version "7.15.8"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.8.tgz#7bacdcbe71bdc3ff936d510c15dcea7cf0b99016"
-  integrity sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA==
+"@babel/parser@^7.15.0":
+  version "7.15.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.7.tgz#0c3ed4a2eb07b165dfa85b3cc45c727334c4edae"
+  integrity sha512-rycZXvQ+xS9QyIcJ9HXeDWf1uxqlbVFAUq0Rq0dbc50Zb/+wUe/ehyfzGfm9KZZF0kBejYgxltBXocP+gKdL2g==
 
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.14.5":
   version "7.14.5"
@@ -477,15 +310,6 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
-"@babel/plugin-proposal-decorators@^7.15.8":
-  version "7.15.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.15.8.tgz#eb2969abf8993f15289f09fed762bb1df1521bd5"
-  integrity sha512-5n8+xGK7YDrXF+WAORg3P7LlCCdiaAyKLZi22eP2BwTy4kJ0kFUMMDCj4nQ8YrKyNZgjhU/9eRVqONnjB3us8g==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.15.4"
-    "@babel/helper-plugin-utils" "^7.14.5"
-    "@babel/plugin-syntax-decorators" "^7.14.5"
-
 "@babel/plugin-proposal-dynamic-import@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.14.5.tgz#0c6617df461c0c1f8fff3b47cd59772360101d2c"
@@ -616,13 +440,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-decorators@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.14.5.tgz#eafb9c0cbe09c8afeb964ba3a7bbd63945a72f20"
-  integrity sha512-c4sZMRWL4GSvP1EXy0woIP7m4jkVcEuG8R1TOZxPBPtp4FSM/kiPZub9UIs/Jrb5ZAOzvTUSGYrWsrSu1JvoPw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-
 "@babel/plugin-syntax-dynamic-import@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
@@ -651,13 +468,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.2.0":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
-  integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
@@ -714,7 +524,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-typescript@^7.14.5", "@babel/plugin-syntax-typescript@^7.7.2":
+"@babel/plugin-syntax-typescript@^7.7.2":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz#b82c6ce471b165b5ce420cf92914d6fb46225716"
   integrity sha512-u6OXzDaIXjEstBRRoBCQ/uKQKlbuaeE5in0RvWdA4pN6AhqxTIwUsnHPU1CFZA/amYObMsuWhYfRl3Ch90HD0Q==
@@ -954,15 +764,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-typescript@^7.15.8":
-  version "7.15.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.15.8.tgz#ff0e6a47de9b2d58652123ab5a879b2ff20665d8"
-  integrity sha512-ZXIkJpbaf6/EsmjeTbiJN/yMxWPFWvlr7sEG1P95Xb4S4IBcrf2n7s/fItIhsAmOf8oSh3VJPDppO6ExfAfKRQ==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.15.4"
-    "@babel/helper-plugin-utils" "^7.14.5"
-    "@babel/plugin-syntax-typescript" "^7.14.5"
-
 "@babel/plugin-transform-unicode-escapes@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.14.5.tgz#9d4bd2a681e3c5d7acf4f57fa9e51175d91d0c6b"
@@ -1089,15 +890,6 @@
     "@babel/parser" "^7.14.5"
     "@babel/types" "^7.14.5"
 
-"@babel/template@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.15.4.tgz#51898d35dcf3faa670c4ee6afcfd517ee139f194"
-  integrity sha512-UgBAfEa1oGuYgDIPM2G+aHa4Nlo9Lh6mGD2bDBGMTbYnc38vulXPuC1MGjYILIEmlwl6Rd+BPR9ee3gm20CBtg==
-  dependencies:
-    "@babel/code-frame" "^7.14.5"
-    "@babel/parser" "^7.15.4"
-    "@babel/types" "^7.15.4"
-
 "@babel/traverse@^7.1.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.14.5", "@babel/traverse@^7.14.8", "@babel/traverse@^7.7.2":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.8.tgz#c0253f02677c5de1a8ff9df6b0aacbec7da1a8ce"
@@ -1113,21 +905,6 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/traverse@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.4.tgz#ff8510367a144bfbff552d9e18e28f3e2889c22d"
-  integrity sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==
-  dependencies:
-    "@babel/code-frame" "^7.14.5"
-    "@babel/generator" "^7.15.4"
-    "@babel/helper-function-name" "^7.15.4"
-    "@babel/helper-hoist-variables" "^7.15.4"
-    "@babel/helper-split-export-declaration" "^7.15.4"
-    "@babel/parser" "^7.15.4"
-    "@babel/types" "^7.15.4"
-    debug "^4.1.0"
-    globals "^11.1.0"
-
 "@babel/types@^7.0.0", "@babel/types@^7.14.5", "@babel/types@^7.14.8", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.8.tgz#38109de8fcadc06415fbd9b74df0065d4d41c728"
@@ -1136,14 +913,6 @@
     "@babel/helper-validator-identifier" "^7.14.8"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.15.4", "@babel/types@^7.15.6":
-  version "7.15.6"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.6.tgz#99abdc48218b2881c058dd0a7ab05b99c9be758f"
-  integrity sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.14.9"
-    to-fast-properties "^2.0.0"
-
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1223,10 +992,10 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "^0.2.36"
 
-"@fortawesome/vue-fontawesome@2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.5.tgz#147ed42f788f22bb44c2b1afd9e93e33add5798d"
-  integrity sha512-BktJiEuZhU+HxANJ37Pek6y+LRVVFgcU5CDd6b+t6XKj30QrYrh3ICsC5FQm5MuAdh3CPpYT99ywjk5v6nWteA==
+"@fortawesome/vue-fontawesome@3.0.0-4":
+  version "3.0.0-4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.0-4.tgz#f90c62160c436e102f82d8bc02ec44de2cf008dc"
+  integrity sha512-dQVhhMRcUPCb0aqk5ohm0KGk5OJ7wFZ9aYapLzJB3Z+xs7LhkRWLTb87reelUAG5PFDjutDAXuloT9hi6cz72A==
 
 "@hapi/hoek@^9.0.0":
   version "9.2.0"
@@ -1254,6 +1023,44 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
   integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
 
+"@intlify/core-base@9.2.0-beta.11":
+  version "9.2.0-beta.11"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.2.0-beta.11.tgz#1b579a8532ec2f7dc2ddcf799b25c3afe6ecabc4"
+  integrity sha512-ECq24EGCOldaDQuBJSGkuhbLIxzaA1O8S5JEucaWj3enjZJFolk9F0HUceQ8U2Fi+B+GlTv9hrXSK9nT6CGu8w==
+  dependencies:
+    "@intlify/devtools-if" "9.2.0-beta.11"
+    "@intlify/message-compiler" "9.2.0-beta.11"
+    "@intlify/shared" "9.2.0-beta.11"
+    "@intlify/vue-devtools" "9.2.0-beta.11"
+
+"@intlify/devtools-if@9.2.0-beta.11":
+  version "9.2.0-beta.11"
+  resolved "https://registry.yarnpkg.com/@intlify/devtools-if/-/devtools-if-9.2.0-beta.11.tgz#b9c950ee3a646dca1b9e8fb87f7a90b2d874a4fb"
+  integrity sha512-2MxFmHIBvHPBcahdTFAcPAdrs0qSYGNQseso78p8eUJ0WO4TWZp+yXkVOhBhFA6xiWfxw47dfeFI7U7zJ7vpdA==
+  dependencies:
+    "@intlify/shared" "9.2.0-beta.11"
+
+"@intlify/message-compiler@9.2.0-beta.11":
+  version "9.2.0-beta.11"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.2.0-beta.11.tgz#2a41fd58bf947191405537406ea10d37a6acb04d"
+  integrity sha512-ehNX6TGVivnivWmAlfarlE9i/iMOMsDI01MxCylXRLoBpHfdNeA3E7rsPCOM0YdSuFrvECuxCTdA3ECiOruEoQ==
+  dependencies:
+    "@intlify/shared" "9.2.0-beta.11"
+    source-map "0.6.1"
+
+"@intlify/shared@9.2.0-beta.11":
+  version "9.2.0-beta.11"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.2.0-beta.11.tgz#9beb40de0c884fd7d62311445a0666399396de97"
+  integrity sha512-b6lmE5nH/Vn5bwKu8T3AM57a2cWO+ZMQ5ydEbyNs92VYayIEHYe2Rza8wRwQBhklta9xJG0gP5Ywv8t/xiCT8A==
+
+"@intlify/vue-devtools@9.2.0-beta.11":
+  version "9.2.0-beta.11"
+  resolved "https://registry.yarnpkg.com/@intlify/vue-devtools/-/vue-devtools-9.2.0-beta.11.tgz#3022580dd7984025380fc720c8bc9a54f5097212"
+  integrity sha512-odubEzztg5MqMxlLaYQtFWrV3CXrSmehr3jfRzMqgzRF08EAJ+X4vms4erJgYUJ+vHihuV7FetoVTIMYYmCNzQ==
+  dependencies:
+    "@intlify/core-base" "9.2.0-beta.11"
+    "@intlify/shared" "9.2.0-beta.11"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -1450,6 +1257,11 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@kyvg/vue3-notification@2.3.4":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@kyvg/vue3-notification/-/vue3-notification-2.3.4.tgz#7503647ae1d26a7c58bbf5182b505ca345c0882a"
+  integrity sha512-20Km1L75gncIZCjosT1OKbJl9HhNiOd7LRXqVIqlehHHem9NgBjQhDFz6XGo1RcF0MyA4/BC7kV7tcq/PMT+tA==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1508,14 +1320,6 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rollup/pluginutils@^4.1.1":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec"
-  integrity sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ==
-  dependencies:
-    estree-walker "^2.0.1"
-    picomatch "^2.2.2"
-
 "@sideway/address@^4.1.0":
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.2.tgz#811b84333a335739d3969cfc434736268170cad1"
@@ -1657,9 +1461,9 @@
     pretty-format "^27.0.0"
 
 "@types/json-schema@^7.0.7":
-  version "7.0.8"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.8.tgz#edf1bf1dbf4e04413ca8e5b17b3b7d7d54b59818"
-  integrity sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==
+  version "7.0.9"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
+  integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
 
 "@types/marked@^2.0.2":
   version "2.0.4"
@@ -1825,101 +1629,72 @@
     regenerator-runtime "^0.13.9"
     systemjs "^6.10.3"
 
-"@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81"
-  integrity sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==
+"@vitejs/plugin-vue@^1.9.3":
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.9.3.tgz#93d61893ce6c723d0209af0483ec8b91a2cd811f"
+  integrity sha512-yW6H/q+4Mc2PcVjSOelcsMrg/k15DnMUz8jyCFsI04emc3aLwo4AoofUfGnjHUkgirrDxSJLVqQVGhonQ3yykA==
 
-"@vue/babel-plugin-transform-vue-jsx@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.2.1.tgz#646046c652c2f0242727f34519d917b064041ed7"
-  integrity sha512-HJuqwACYehQwh1fNT8f4kyzqlNMpBuUK4rSiSES5D4QsYncv5fxFsLyrxFPG2ksO7t5WP+Vgix6tt6yKClwPzA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-    "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1"
-    html-tags "^2.0.0"
-    lodash.kebabcase "^4.1.1"
-    svg-tags "^1.0.0"
+"@vue/compat@3.2.20":
+  version "3.2.20"
+  resolved "https://registry.yarnpkg.com/@vue/compat/-/compat-3.2.20.tgz#19851068a115394369d1858a5f76276c05d0eee0"
+  integrity sha512-ZbdYtVegOS4wgeHzlnYz7Q9j9NLYF083i5pK9UB1P11vTSVUqozDlPSo4V1ODkluuFED7aGfFCHm7KmTJrnORA==
 
-"@vue/babel-preset-jsx@^1.2.4":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/babel-preset-jsx/-/babel-preset-jsx-1.2.4.tgz#92fea79db6f13b01e80d3a0099e2924bdcbe4e87"
-  integrity sha512-oRVnmN2a77bYDJzeGSt92AuHXbkIxbf/XXSE3klINnh9AXBmVS1DGa1f0d+dDYpLfsAKElMnqKTQfKn7obcL4w==
+"@vue/compiler-core@3.2.20":
+  version "3.2.20"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.20.tgz#af5a3c5237818835b0d0be837eb5885a8d21c160"
+  integrity sha512-vcEXlKXoPwBXFP5aUTHN9GTZaDfwCofa9Yu9bbW2C5O/QSa9Esdt7OG4+0RRd3EHEMxUvEdj4RZrd/KpQeiJbA==
   dependencies:
-    "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1"
-    "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
-    "@vue/babel-sugar-composition-api-inject-h" "^1.2.1"
-    "@vue/babel-sugar-composition-api-render-instance" "^1.2.4"
-    "@vue/babel-sugar-functional-vue" "^1.2.2"
-    "@vue/babel-sugar-inject-h" "^1.2.2"
-    "@vue/babel-sugar-v-model" "^1.2.3"
-    "@vue/babel-sugar-v-on" "^1.2.3"
+    "@babel/parser" "^7.15.0"
+    "@vue/shared" "3.2.20"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
 
-"@vue/babel-sugar-composition-api-inject-h@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-composition-api-inject-h/-/babel-sugar-composition-api-inject-h-1.2.1.tgz#05d6e0c432710e37582b2be9a6049b689b6f03eb"
-  integrity sha512-4B3L5Z2G+7s+9Bwbf+zPIifkFNcKth7fQwekVbnOA3cr3Pq71q71goWr97sk4/yyzH8phfe5ODVzEjX7HU7ItQ==
+"@vue/compiler-dom@3.2.20":
+  version "3.2.20"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.20.tgz#8e0ef354449c0faf41519b00bfc2045eae01dcb5"
+  integrity sha512-QnI77ec/JtV7R0YBbcVayYTDCRcI9OCbxiUQK6izVyqQO0658n0zQuoNwe+bYgtqnvGAIqTR3FShTd5y4oOjdg==
   dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
+    "@vue/compiler-core" "3.2.20"
+    "@vue/shared" "3.2.20"
 
-"@vue/babel-sugar-composition-api-render-instance@^1.2.4":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-composition-api-render-instance/-/babel-sugar-composition-api-render-instance-1.2.4.tgz#e4cbc6997c344fac271785ad7a29325c51d68d19"
-  integrity sha512-joha4PZznQMsxQYXtR3MnTgCASC9u3zt9KfBxIeuI5g2gscpTsSKRDzWQt4aqNIpx6cv8On7/m6zmmovlNsG7Q==
+"@vue/compiler-sfc@3.2.20":
+  version "3.2.20"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.20.tgz#2d7668e76f066c566dd7c09c15c9acce4e876e0a"
+  integrity sha512-03aZo+6tQKiFLfunHKSPZvdK4Jsn/ftRCyaro8AQIWkuxJbvSosbKK6HTTn+D2c3nPScG155akJoxKENw7rftQ==
   dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
+    "@babel/parser" "^7.15.0"
+    "@vue/compiler-core" "3.2.20"
+    "@vue/compiler-dom" "3.2.20"
+    "@vue/compiler-ssr" "3.2.20"
+    "@vue/ref-transform" "3.2.20"
+    "@vue/shared" "3.2.20"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+    postcss "^8.1.10"
+    source-map "^0.6.1"
 
-"@vue/babel-sugar-functional-vue@^1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-functional-vue/-/babel-sugar-functional-vue-1.2.2.tgz#267a9ac8d787c96edbf03ce3f392c49da9bd2658"
-  integrity sha512-JvbgGn1bjCLByIAU1VOoepHQ1vFsroSA/QkzdiSs657V79q6OwEWLCQtQnEXD/rLTA8rRit4rMOhFpbjRFm82w==
+"@vue/compiler-ssr@3.2.20":
+  version "3.2.20"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.20.tgz#9cceb6261d9932cb5568202610c1c28f86c5e521"
+  integrity sha512-rzzVVYivm+EjbfiGQvNeyiYZWzr6Hkej97RZLZvcumacQlnKv9176Xo9rRyeWwFbBlxmtNdrVMslRXtipMXk2w==
   dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
+    "@vue/compiler-dom" "3.2.20"
+    "@vue/shared" "3.2.20"
 
-"@vue/babel-sugar-inject-h@^1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-inject-h/-/babel-sugar-inject-h-1.2.2.tgz#d738d3c893367ec8491dcbb669b000919293e3aa"
-  integrity sha512-y8vTo00oRkzQTgufeotjCLPAvlhnpSkcHFEp60+LJUwygGcd5Chrpn5480AQp/thrxVm8m2ifAk0LyFel9oCnw==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
+"@vue/devtools-api@^6.0.0-beta.11":
+  version "6.0.0-beta.15"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.15.tgz#ad7cb384e062f165bcf9c83732125bffbc2ad83d"
+  integrity sha512-quBx4Jjpexo6KDiNUGFr/zF/2A4srKM9S9v2uHgMXSU//hjgq1eGzqkIFql8T9gfX5ZaVOUzYBP3jIdIR3PKIA==
 
-"@vue/babel-sugar-v-model@^1.2.3":
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-model/-/babel-sugar-v-model-1.2.3.tgz#fa1f29ba51ebf0aa1a6c35fa66d539bc459a18f2"
-  integrity sha512-A2jxx87mySr/ulAsSSyYE8un6SIH0NWHiLaCWpodPCVOlQVODCaSpiR4+IMsmBr73haG+oeCuSvMOM+ttWUqRQ==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-    "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1"
-    "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
-    camelcase "^5.0.0"
-    html-tags "^2.0.0"
-    svg-tags "^1.0.0"
+"@vue/devtools-api@^6.0.0-beta.13":
+  version "6.0.0-beta.17"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.17.tgz#d4b9eb02c670d39a4532f4bb3c8517abce3fcb82"
+  integrity sha512-hwGY4Xxc2nl34OyNH7l2VO8/ja3R78B8bcbaBQnZljSju5Z0Bm9HTt+/fQao+TUrs3gfNrrQrY3euWqiaG8chw==
 
-"@vue/babel-sugar-v-on@^1.2.3":
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-on/-/babel-sugar-v-on-1.2.3.tgz#342367178586a69f392f04bfba32021d02913ada"
-  integrity sha512-kt12VJdz/37D3N3eglBywV8GStKNUhNrsxChXIV+o0MwVXORYuhDTHJRKPgLJRb/EY3vM2aRFQdxJBp9CLikjw==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-    "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
-    camelcase "^5.0.0"
-
-"@vue/component-compiler-utils@^3.2.2":
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.2.2.tgz#2f7ed5feed82ff7f0284acc11d525ee7eff22460"
-  integrity sha512-rAYMLmgMuqJFWAOb3Awjqqv5X3Q3hVr4jH/kgrFJpiU0j3a90tnNBplqbj+snzrgZhC9W128z+dtgMifOiMfJg==
-  dependencies:
-    consolidate "^0.15.1"
-    hash-sum "^1.0.2"
-    lru-cache "^4.1.2"
-    merge-source-map "^1.1.0"
-    postcss "^7.0.36"
-    postcss-selector-parser "^6.0.2"
-    source-map "~0.6.1"
-    vue-template-es2015-compiler "^1.9.0"
-  optionalDependencies:
-    prettier "^1.18.2"
+"@vue/devtools-api@^6.0.0-beta.18":
+  version "6.0.0-beta.19"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.19.tgz#f8e88059daa424515992426a0c7ea5cde07e99bf"
+  integrity sha512-ObzQhgkoVeoyKv+e8+tB/jQBL2smtk/NmC9OmFK8UqdDpoOdv/Kf9pyDWL+IFyM7qLD2C75rszJujvGSPSpGlw==
 
 "@vue/eslint-config-typescript@8.0.0":
   version "8.0.0"
@@ -1928,34 +1703,53 @@
   dependencies:
     vue-eslint-parser "^7.0.0"
 
-"@vue/reactivity@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.19.tgz#fc6e0f0106f295226835cfed5ff5f84d927bea65"
-  integrity sha512-FtachoYs2SnyrWup5UikP54xDX6ZJ1s5VgHcJp4rkGoutU3Ry61jhs+nCX7J64zjX992Mh9gGUC0LqTs8q9vCA==
+"@vue/reactivity@3.2.20":
+  version "3.2.20"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.20.tgz#81fe1c368e7f20bc0ec1dec1045bbee253582de8"
+  integrity sha512-nSmoLojUTk+H8HNTAkrUduB4+yIUBK2HPihJo2uXVSH4Spry6oqN6lFzE5zpLK+F27Sja+UqR9R1+/kIOsHV5w==
   dependencies:
-    "@vue/shared" "3.2.19"
+    "@vue/shared" "3.2.20"
 
-"@vue/runtime-core@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.19.tgz#807715b7f4728abb84fa4a8efdbe37d8ddb4c6d3"
-  integrity sha512-qArZSWKxWsgKfxk9BelZ32nY0MZ31CAW2kUUyVJyxh4cTfHaXGbjiQB5JgsvKc49ROMNffv9t3/qjasQqAH+RQ==
+"@vue/ref-transform@3.2.20":
+  version "3.2.20"
+  resolved "https://registry.yarnpkg.com/@vue/ref-transform/-/ref-transform-3.2.20.tgz#2a59ec90caf8e5c7336776a0900bff0a8b81c090"
+  integrity sha512-Y42d3PGlYZ1lXcF3dbd3+qU/C/a3wYEZ949fyOI5ptzkjDWlkfU6vn74fmOjsLjEcjs10BXK2qO99FqQIK2r1Q==
   dependencies:
-    "@vue/reactivity" "3.2.19"
-    "@vue/shared" "3.2.19"
+    "@babel/parser" "^7.15.0"
+    "@vue/compiler-core" "3.2.20"
+    "@vue/shared" "3.2.20"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
 
-"@vue/runtime-dom@latest":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.19.tgz#7e8bf645754703e360fa132e4be9113edf2377bb"
-  integrity sha512-hIRboxXwafeHhbZEkZYNV0MiJXPNf4fP0X6hM2TJb0vssz8BKhD9cF92BkRgZztTQevecbhk0gu4uAPJ3dxL9A==
+"@vue/runtime-core@3.2.20":
+  version "3.2.20"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.20.tgz#8f63e956a3f88fb772541443c45a7701211012cb"
+  integrity sha512-d1xfUGhZPfiZzAN7SatStD4vRtT8deJSXib2+Cz3x0brjMWKxe32asQc154FF1E2fFgMCHtnfd4A90bQEzV4GQ==
   dependencies:
-    "@vue/runtime-core" "3.2.19"
-    "@vue/shared" "3.2.19"
+    "@vue/reactivity" "3.2.20"
+    "@vue/shared" "3.2.20"
+
+"@vue/runtime-dom@3.2.20":
+  version "3.2.20"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.20.tgz#8aa56ae6c30f9cd4a71ca0e9ec3c4bdc67148d15"
+  integrity sha512-4TCvZMLhESWCFHFYgqN4QmMA/onnINAlUovhopjlS8ST27G1A8Z0tyxPzLoXLa+b5JrOpbMPheEMPvdKExTJig==
+  dependencies:
+    "@vue/runtime-core" "3.2.20"
+    "@vue/shared" "3.2.20"
     csstype "^2.6.8"
 
-"@vue/shared@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.19.tgz#111ec3da18337d86274446984c49925b1b2b2dd7"
-  integrity sha512-Knqhx7WieLdVgwCAZgTVrDCXZ50uItuecLh9JdLC8O+a5ayaSyIQYveUK3hCRNC7ws5zalHmZwfdLMGaS8r4Ew==
+"@vue/server-renderer@3.2.20":
+  version "3.2.20"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.20.tgz#705e07ae9425132b2b6227d308a51a13f4d4ec81"
+  integrity sha512-viIbZGep9XabnrRcaxWIi00cOh1x21QYm2upIL5W0zqzTJ54VdTzpI+zi1osNp+VfRQDTHpV2U7H3Kn4ljYJvg==
+  dependencies:
+    "@vue/compiler-ssr" "3.2.20"
+    "@vue/shared" "3.2.20"
+
+"@vue/shared@3.2.20":
+  version "3.2.20"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.20.tgz#53746961f731a8ea666e3316271e944238dc31db"
+  integrity sha512-FbpX+hD5BvXCQerEYO7jtAGHlhAkhTQ4KIV73kmLWNlawWhTiVuQxizgVb0BOkX5oG9cIRZ42EG++d/k/Efp0w==
 
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.5"
@@ -2057,11 +1851,6 @@ ansi-escapes@^4.2.1, ansi-escapes@^4.3.0:
   dependencies:
     type-fest "^0.21.3"
 
-ansi-regex@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
-  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
-
 ansi-regex@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
@@ -2077,11 +1866,6 @@ ansi-regex@^5.0.1:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
-ansi-styles@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
-  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
-
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -2209,120 +1993,6 @@ axios@^0.21.1:
   dependencies:
     follow-redirects "^1.10.0"
 
-babel-code-frame@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
-  integrity sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=
-  dependencies:
-    chalk "^1.1.3"
-    esutils "^2.0.2"
-    js-tokens "^3.0.2"
-
-babel-helper-builder-binary-assignment-operator-visitor@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz#cce4517ada356f4220bcae8a02c2b346f9a56664"
-  integrity sha1-zORReto1b0IgvK6KAsKzRvmlZmQ=
-  dependencies:
-    babel-helper-explode-assignable-expression "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-helper-call-delegate@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz#ece6aacddc76e41c3461f88bfc575bd0daa2df8d"
-  integrity sha1-7Oaqzdx25Bw0YfiL/Fdb0Nqi340=
-  dependencies:
-    babel-helper-hoist-variables "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-
-babel-helper-define-map@^6.24.1:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.26.0.tgz#a5f56dab41a25f97ecb498c7ebaca9819f95be5f"
-  integrity sha1-pfVtq0GiX5fstJjH66ypgZ+Vvl8=
-  dependencies:
-    babel-helper-function-name "^6.24.1"
-    babel-runtime "^6.26.0"
-    babel-types "^6.26.0"
-    lodash "^4.17.4"
-
-babel-helper-explode-assignable-expression@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz#f25b82cf7dc10433c55f70592d5746400ac22caa"
-  integrity sha1-8luCz33BBDPFX3BZLVdGQArCLKo=
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-
-babel-helper-function-name@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz#d3475b8c03ed98242a25b48351ab18399d3580a9"
-  integrity sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=
-  dependencies:
-    babel-helper-get-function-arity "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-
-babel-helper-get-function-arity@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz#8f7782aa93407c41d3aa50908f89b031b1b6853d"
-  integrity sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-helper-hoist-variables@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.24.1.tgz#1ecb27689c9d25513eadbc9914a73f5408be7a76"
-  integrity sha1-HssnaJydJVE+rbyZFKc/VAi+enY=
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-helper-optimise-call-expression@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz#f7a13427ba9f73f8f4fa993c54a97882d1244257"
-  integrity sha1-96E0J7qfc/j0+pk8VKl4gtEkQlc=
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-helper-regex@^6.24.1:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.26.0.tgz#325c59f902f82f24b74faceed0363954f6495e72"
-  integrity sha1-MlxZ+QL4LyS3T6zu0DY5VPZJXnI=
-  dependencies:
-    babel-runtime "^6.26.0"
-    babel-types "^6.26.0"
-    lodash "^4.17.4"
-
-babel-helper-remap-async-to-generator@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.24.1.tgz#5ec581827ad723fecdd381f1c928390676e4551b"
-  integrity sha1-XsWBgnrXI/7N04HxySg5BnbkVRs=
-  dependencies:
-    babel-helper-function-name "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-
-babel-helper-replace-supers@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-helper-replace-supers/-/babel-helper-replace-supers-6.24.1.tgz#bf6dbfe43938d17369a213ca8a8bf74b6a90ab1a"
-  integrity sha1-v22/5Dk40XNpohPKiov3S2qQqxo=
-  dependencies:
-    babel-helper-optimise-call-expression "^6.24.1"
-    babel-messages "^6.23.0"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-
 babel-jest@^27.2.5:
   version "27.2.5"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.2.5.tgz#6bbbc1bb4200fe0bfd1b1fbcbe02fc62ebed16aa"
@@ -2337,20 +2007,6 @@ babel-jest@^27.2.5:
     graceful-fs "^4.2.4"
     slash "^3.0.0"
 
-babel-messages@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
-  integrity sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-check-es2015-constants@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
-  integrity sha1-NRV7EBQm/S/9PaP3XH0ekYNbv4o=
-  dependencies:
-    babel-runtime "^6.22.0"
-
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
@@ -2403,244 +2059,6 @@ babel-plugin-polyfill-regenerator@^0.2.2:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.2.2"
 
-babel-plugin-syntax-async-functions@^6.8.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
-  integrity sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=
-
-babel-plugin-syntax-exponentiation-operator@^6.8.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
-  integrity sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=
-
-babel-plugin-syntax-trailing-function-commas@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
-  integrity sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=
-
-babel-plugin-transform-async-to-generator@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761"
-  integrity sha1-ZTbjeK/2yx1VF6wOQOs+n8jQh2E=
-  dependencies:
-    babel-helper-remap-async-to-generator "^6.24.1"
-    babel-plugin-syntax-async-functions "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-arrow-functions@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
-  integrity sha1-RSaSy3EdX3ncf4XkQM5BufJE0iE=
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-block-scoped-functions@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz#bbc51b49f964d70cb8d8e0b94e820246ce3a6141"
-  integrity sha1-u8UbSflk1wy42OC5ToICRs46YUE=
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-block-scoping@^6.23.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f"
-  integrity sha1-1w9SmcEwjQXBL0Y4E7CgnnOxiV8=
-  dependencies:
-    babel-runtime "^6.26.0"
-    babel-template "^6.26.0"
-    babel-traverse "^6.26.0"
-    babel-types "^6.26.0"
-    lodash "^4.17.4"
-
-babel-plugin-transform-es2015-classes@^6.23.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db"
-  integrity sha1-WkxYpQyclGHlZLSyo7+ryXolhNs=
-  dependencies:
-    babel-helper-define-map "^6.24.1"
-    babel-helper-function-name "^6.24.1"
-    babel-helper-optimise-call-expression "^6.24.1"
-    babel-helper-replace-supers "^6.24.1"
-    babel-messages "^6.23.0"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-computed-properties@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3"
-  integrity sha1-b+Ko0WiV1WNPTNmZttNICjCBWbM=
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
-babel-plugin-transform-es2015-destructuring@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
-  integrity sha1-mXux8auWf2gtKwh2/jWNYOdlxW0=
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-duplicate-keys@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e"
-  integrity sha1-c+s9MQypaePvnskcU3QabxV2Qj4=
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-for-of@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691"
-  integrity sha1-9HyVsrYT3x0+zC/bdXNiPHUkhpE=
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-function-name@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz#834c89853bc36b1af0f3a4c5dbaa94fd8eacaa8b"
-  integrity sha1-g0yJhTvDaxrw86TF26qU/Y6sqos=
-  dependencies:
-    babel-helper-function-name "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-literals@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz#4f54a02d6cd66cf915280019a31d31925377ca2e"
-  integrity sha1-T1SgLWzWbPkVKAAZox0xklN3yi4=
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154"
-  integrity sha1-Oz5UAXI5hC1tGcMBHEvS8AoA0VQ=
-  dependencies:
-    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
-babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
-  version "6.26.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz#58a793863a9e7ca870bdc5a881117ffac27db6f3"
-  integrity sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==
-  dependencies:
-    babel-plugin-transform-strict-mode "^6.24.1"
-    babel-runtime "^6.26.0"
-    babel-template "^6.26.0"
-    babel-types "^6.26.0"
-
-babel-plugin-transform-es2015-modules-systemjs@^6.23.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
-  integrity sha1-/4mhQrkRmpBhlfXxBuzzBdlAfSM=
-  dependencies:
-    babel-helper-hoist-variables "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
-babel-plugin-transform-es2015-modules-umd@^6.23.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468"
-  integrity sha1-rJl+YoXNGO1hdq22B9YCNErThGg=
-  dependencies:
-    babel-plugin-transform-es2015-modules-amd "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
-babel-plugin-transform-es2015-object-super@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d"
-  integrity sha1-JM72muIcuDp/hgPa0CH1cusnj40=
-  dependencies:
-    babel-helper-replace-supers "^6.24.1"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-parameters@^6.23.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b"
-  integrity sha1-V6w1GrScrxSpfNE7CfZv3wpiXys=
-  dependencies:
-    babel-helper-call-delegate "^6.24.1"
-    babel-helper-get-function-arity "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-shorthand-properties@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz#24f875d6721c87661bbd99a4622e51f14de38aa0"
-  integrity sha1-JPh11nIch2YbvZmkYi5R8U3jiqA=
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-spread@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz#d6d68a99f89aedc4536c81a542e8dd9f1746f8d1"
-  integrity sha1-1taKmfia7cRTbIGlQujdnxdG+NE=
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-sticky-regex@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
-  integrity sha1-AMHNsaynERLN8M9hJsLta0V8zbw=
-  dependencies:
-    babel-helper-regex "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-template-literals@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz#a84b3450f7e9f8f1f6839d6d687da84bb1236d8d"
-  integrity sha1-qEs0UPfp+PH2g51taH2oS7EjbY0=
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-typeof-symbol@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
-  integrity sha1-3sCfHN3/lLUqxz1QXITfWdzOs3I=
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-unicode-regex@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9"
-  integrity sha1-04sS9C6nMj9yk4fxinxa4frrNek=
-  dependencies:
-    babel-helper-regex "^6.24.1"
-    babel-runtime "^6.22.0"
-    regexpu-core "^2.0.0"
-
-babel-plugin-transform-exponentiation-operator@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
-  integrity sha1-KrDJx/MJj6SJB3cruBP+QejeOg4=
-  dependencies:
-    babel-helper-builder-binary-assignment-operator-visitor "^6.24.1"
-    babel-plugin-syntax-exponentiation-operator "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-regenerator@^6.22.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
-  integrity sha1-4HA2lvveJ/Cj78rPi03KL3s6jy8=
-  dependencies:
-    regenerator-transform "^0.10.0"
-
-babel-plugin-transform-strict-mode@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
-  integrity sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g=
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
@@ -2659,42 +2077,6 @@ babel-preset-current-node-syntax@^1.0.0:
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
     "@babel/plugin-syntax-top-level-await" "^7.8.3"
 
-babel-preset-env@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.7.0.tgz#dea79fa4ebeb883cd35dab07e260c1c9c04df77a"
-  integrity sha512-9OR2afuKDneX2/q2EurSftUYM0xGu4O2D9adAhVfADDhrYDaxXV0rBbevVYoY9n6nyX1PmQW/0jtpJvUNr9CHg==
-  dependencies:
-    babel-plugin-check-es2015-constants "^6.22.0"
-    babel-plugin-syntax-trailing-function-commas "^6.22.0"
-    babel-plugin-transform-async-to-generator "^6.22.0"
-    babel-plugin-transform-es2015-arrow-functions "^6.22.0"
-    babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
-    babel-plugin-transform-es2015-block-scoping "^6.23.0"
-    babel-plugin-transform-es2015-classes "^6.23.0"
-    babel-plugin-transform-es2015-computed-properties "^6.22.0"
-    babel-plugin-transform-es2015-destructuring "^6.23.0"
-    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
-    babel-plugin-transform-es2015-for-of "^6.23.0"
-    babel-plugin-transform-es2015-function-name "^6.22.0"
-    babel-plugin-transform-es2015-literals "^6.22.0"
-    babel-plugin-transform-es2015-modules-amd "^6.22.0"
-    babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
-    babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
-    babel-plugin-transform-es2015-modules-umd "^6.23.0"
-    babel-plugin-transform-es2015-object-super "^6.22.0"
-    babel-plugin-transform-es2015-parameters "^6.23.0"
-    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
-    babel-plugin-transform-es2015-spread "^6.22.0"
-    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
-    babel-plugin-transform-es2015-template-literals "^6.22.0"
-    babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
-    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
-    babel-plugin-transform-exponentiation-operator "^6.22.0"
-    babel-plugin-transform-regenerator "^6.22.0"
-    browserslist "^3.2.6"
-    invariant "^2.2.2"
-    semver "^5.3.0"
-
 babel-preset-jest@^27.2.0:
   version "27.2.0"
   resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-27.2.0.tgz#556bbbf340608fed5670ab0ea0c8ef2449fba885"
@@ -2703,55 +2085,6 @@ babel-preset-jest@^27.2.0:
     babel-plugin-jest-hoist "^27.2.0"
     babel-preset-current-node-syntax "^1.0.0"
 
-babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
-babel-template@^6.24.1, babel-template@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
-  integrity sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=
-  dependencies:
-    babel-runtime "^6.26.0"
-    babel-traverse "^6.26.0"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-    lodash "^4.17.4"
-
-babel-traverse@^6.24.1, babel-traverse@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
-  integrity sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=
-  dependencies:
-    babel-code-frame "^6.26.0"
-    babel-messages "^6.23.0"
-    babel-runtime "^6.26.0"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-    debug "^2.6.8"
-    globals "^9.18.0"
-    invariant "^2.2.2"
-    lodash "^4.17.4"
-
-babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
-  integrity sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=
-  dependencies:
-    babel-runtime "^6.26.0"
-    esutils "^2.0.2"
-    lodash "^4.17.4"
-    to-fast-properties "^1.0.3"
-
-babylon@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
-  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
-
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -2788,7 +2121,7 @@ blob-util@^2.0.2:
   resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
   integrity sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ==
 
-bluebird@^3.1.1, bluebird@^3.7.2:
+bluebird@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
@@ -2854,14 +2187,6 @@ browserslist@4.17.4, browserslist@^4.17.3:
     node-releases "^2.0.0"
     picocolors "^1.0.0"
 
-browserslist@^3.2.6:
-  version "3.2.8"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.8.tgz#b0005361d6471f0f5952797a76fc985f1f978fc6"
-  integrity sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==
-  dependencies:
-    caniuse-lite "^1.0.30000844"
-    electron-to-chromium "^1.3.47"
-
 browserslist@^4.16.6:
   version "4.16.6"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
@@ -2978,7 +2303,7 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
-caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001264:
+caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001264:
   version "1.0.30001265"
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001265.tgz"
   integrity sha512-YzBnspggWV5hep1m9Z6sZVLOt7vrju8xWooFAgN6BA5qvy98qPAPb7vNUzypFaoh2pb3vlfzbDO8tB57UPGbtw==
@@ -2993,18 +2318,7 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
-chalk@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
-  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
-  dependencies:
-    ansi-styles "^2.2.1"
-    escape-string-regexp "^1.0.2"
-    has-ansi "^2.0.0"
-    strip-ansi "^3.0.0"
-    supports-color "^2.0.0"
-
-chalk@^2.0.0, chalk@^2.4.2:
+chalk@^2.0.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -3170,6 +2484,11 @@ codemirror@^5.61.0:
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.62.2.tgz#bce6d19c9829e6e788f83886d48ecf5c1e106e65"
   integrity sha512-tVFMUa4J3Q8JUd1KL9yQzQB0/BJt7ZYZujZmTPgo/54Lpuq3ez4C8x/ATUY/wv7b7X3AUq8o3Xd+2C5ZrCGWHw==
 
+codemirror@^5.63.3:
+  version "5.63.3"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.63.3.tgz#97042a242027fe0c87c09b36bc01931d37b76527"
+  integrity sha512-1C+LELr+5grgJYqwZKqxrcbPsHFHapVaVAloBsFBASbpLnQqLw1U8yXJ3gT5D+rhxIiSpo+kTqN+hQ+9ialIXw==
+
 collect-v8-coverage@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
@@ -3189,11 +2508,6 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-fns@^0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/color-fns/-/color-fns-0.0.10.tgz#b03f34ab3bb3902ac24e7c86ff32d845fbbaf7bf"
-  integrity sha512-QFKowTE9CXCLp09Gz5cQo8VPUP55hf73iHEI52JC3NyKfMpQG2VoLWmTxYeTKH6ngkEnoMrCdEX//M6J4PVQBA==
-
 color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
@@ -3253,20 +2567,6 @@ configstore@^5.0.1:
     write-file-atomic "^3.0.0"
     xdg-basedir "^4.0.0"
 
-consolidate@^0.15.1:
-  version "0.15.1"
-  resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.15.1.tgz#21ab043235c71a07d45d9aad98593b0dba56bab7"
-  integrity sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==
-  dependencies:
-    bluebird "^3.1.1"
-
-consolidate@^0.16.0:
-  version "0.16.0"
-  resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.16.0.tgz#a11864768930f2f19431660a65906668f5fbdc16"
-  integrity sha512-Nhl1wzCslqXYTJVDyJCu3ODohy9OfBMB5uD2BiBTzd7w+QY0lBzafkR8y8755yMYHAaMD4NuzbAw03/xzfw+eQ==
-  dependencies:
-    bluebird "^3.7.2"
-
 content-disposition@0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
@@ -3311,11 +2611,6 @@ core-js-compat@^3.14.0, core-js-compat@^3.15.0:
     browserslist "^4.16.6"
     semver "7.0.0"
 
-core-js@^2.4.0:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
-  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
-
 core-js@^3.18.1:
   version "3.18.2"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.18.2.tgz#63a551e8a29f305cd4123754846e65896619ba5b"
@@ -3340,11 +2635,6 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-cssesc@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
-  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
-
 cssom@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
@@ -3363,14 +2653,9 @@ cssstyle@^2.3.0:
     cssom "~0.3.6"
 
 csstype@^2.6.8:
-  version "2.6.18"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.18.tgz#980a8b53085f34af313410af064f2bd241784218"
-  integrity sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ==
-
-custom-event-polyfill@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
-  integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
+  version "2.6.17"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.17.tgz#4cf30eb87e1d1a005d8b6510f95292413f6a1c0e"
+  integrity sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==
 
 cypress-file-upload@5.0.8:
   version "5.0.8"
@@ -3451,17 +2736,12 @@ dayjs@^1.10.4:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.6.tgz#288b2aa82f2d8418a6c9d4df5898c0737ad02a63"
   integrity sha512-AztC/IOW4L1Q41A86phW5Thhcrco3xuAA+YX/BLpLWWjRcTj5TOt/QImBLmCKlrF7u7k47arTnOyL6GnbG8Hvw==
 
-de-indent@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
-
 debounce@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
   integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
 
-debug@2.6.9, debug@^2.6.8:
+debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -3622,7 +2902,7 @@ easy-bem@^1.0.2:
   resolved "https://registry.yarnpkg.com/easy-bem/-/easy-bem-1.1.1.tgz#1bfcc10425498090bcfddc0f9c000aba91399e03"
   integrity sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==
 
-easymde@^2.14.0:
+easymde@^2.15.0:
   version "2.15.0"
   resolved "https://registry.yarnpkg.com/easymde/-/easymde-2.15.0.tgz#73667c4879d8687b07651d6259ee652bba5d0b00"
   integrity sha512-9jMRIVvKt1d0UjRN45yotUYECAM4xvw0TTAQw8sYDONP++keWJVnd8Xrn+V+vQEN/v9/X0SWEoo1rFSgCooGpw==
@@ -3651,7 +2931,7 @@ ejs@^2.6.1:
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
-electron-to-chromium@^1.3.47, electron-to-chromium@^1.3.723:
+electron-to-chromium@^1.3.723:
   version "1.3.786"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.786.tgz#1fc572abc77e2f474725f8a61acf7e25ced9fbe2"
   integrity sha512-AmvbLBj3hepRk8v/DHrFF8gINxOFfDbrn6Ts3PcK46/FBdQb5OMmpamSpZQXSkfi77FfBzYtQtAk+00LCLYMVw==
@@ -3661,11 +2941,6 @@ electron-to-chromium@^1.3.867:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.871.tgz#6e87365fd72037a6c898fb46050ad4be3ac9ef62"
   integrity sha512-qcLvDUPf8DSIMWarHT2ptgcqrYg62n3vPA7vhrOF24d8UNzbUBaHu2CySiENR3nEDzYgaN60071t0F6KLYMQ7Q==
 
-element-matches@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/element-matches/-/element-matches-0.1.2.tgz#7345cb71e965bd2b12f725e524591c102198361a"
-  integrity sha512-yWh1otcs3OKUWDvu/IxyI36ZI3WNaRZlI0uG/DK6fu0pap0VYZ0J5pEGTk1zakme+hT0OKHwhlHc0N5TJhY6yQ==
-
 emittery@^0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
@@ -3932,7 +3207,7 @@ escape-html@~1.0.3:
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
 
-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@@ -4110,7 +3385,7 @@ estree-walker@^1.0.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
   integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
 
-estree-walker@^2.0.1:
+estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
@@ -4357,7 +3632,7 @@ flat-cache@^3.0.4:
     flatted "^3.1.0"
     rimraf "^3.0.2"
 
-flatpickr@4.6.9, flatpickr@^4.6.6:
+flatpickr@^4.6.9:
   version "4.6.9"
   resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.9.tgz#9a13383e8a6814bda5d232eae3fcdccb97dc1499"
   integrity sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw==
@@ -4559,11 +3834,6 @@ globals@^13.6.0, globals@^13.9.0:
   dependencies:
     type-fest "^0.20.2"
 
-globals@^9.18.0:
-  version "9.18.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
-  integrity sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==
-
 globby@^11.0.3:
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5"
@@ -4616,13 +3886,6 @@ hard-rejection@^2.1.0:
   resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
   integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
 
-has-ansi@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
-  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
-  dependencies:
-    ansi-regex "^2.0.0"
-
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -4650,21 +3913,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hash-sum@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
-  integrity sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=
-
-hash-sum@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
-  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
-
-he@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
-  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
-
 highlight.js@11.3.0:
   version "11.3.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.3.0.tgz#6990f1a9d42edb4c9b1df955b74aebb877b9f364"
@@ -4687,11 +3935,6 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
-html-tags@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
-  integrity sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=
-
 http-cache-semantics@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
@@ -4865,13 +4108,6 @@ inquirer@^7.3.3:
     strip-ansi "^6.0.0"
     through "^2.3.6"
 
-invariant@^2.2.2:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
-  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
-  dependencies:
-    loose-envify "^1.0.0"
-
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@@ -5551,16 +4787,11 @@ joi@^17.4.0:
     "@sideway/formula" "^3.0.0"
     "@sideway/pinpoint" "^2.0.0"
 
-"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-tokens@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
-  integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
-
 js-yaml@^3.13.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
@@ -5770,16 +5001,16 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
-lodash.kebabcase@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
-  integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=
-
 lodash.memoize@4.x:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -5800,7 +5031,7 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
+lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -5823,13 +5054,6 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
-loose-envify@^1.0.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
-  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
-  dependencies:
-    js-tokens "^3.0.0 || ^4.0.0"
-
 lower-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
@@ -5847,14 +5071,6 @@ lowercase-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
   integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
 
-lru-cache@^4.1.2:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
-  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
-  dependencies:
-    pseudomap "^1.0.2"
-    yallist "^2.1.2"
-
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
@@ -5903,7 +5119,7 @@ marked@3.0.7:
   resolved "https://registry.yarnpkg.com/marked/-/marked-3.0.7.tgz#343aad9e91b96249b495c99c512ea09cfe06de1e"
   integrity sha512-ctKqbnLuNbsHbI26cfMyOlKgXGfl1orOv1AvWWDX7AkgfMOwCWvmuYc+mVLeWhQ9W6hdWVBynOs96VkcscKo0Q==
 
-marked@^2.0.1, marked@^2.0.3:
+marked@^2.0.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/marked/-/marked-2.1.3.tgz#bd017cef6431724fd4b27e0657f5ceb14bff3753"
   integrity sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==
@@ -5935,13 +5151,6 @@ merge-descriptors@1.0.1:
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
   integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
 
-merge-source-map@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/merge-source-map/-/merge-source-map-1.1.0.tgz#2fdde7e6020939f70906a68f2d7ae685e4c8c646"
-  integrity sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==
-  dependencies:
-    source-map "^0.6.1"
-
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -6043,6 +5252,11 @@ mute-stream@0.0.8:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
+nanocolors@^0.1.5:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.1.12.tgz#8577482c58cbd7b5bb1681db4cf48f11a87fd5f6"
+  integrity sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==
+
 nanocolors@^0.2.2:
   version "0.2.12"
   resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.2.12.tgz#4d05932e70116078673ea4cc6699a1c56cc77777"
@@ -6054,9 +5268,9 @@ nanoid@^3.1.22:
   integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
 
 nanoid@^3.1.25:
-  version "3.1.28"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.28.tgz#3c01bac14cb6c5680569014cc65a2f26424c6bd4"
-  integrity sha512-gSu9VZ2HtmoKYe/lmyPFES5nknFrHa+/DT9muUFWFMi6Jh9E1I7bkvlQ8xxf1Kos9pi9o8lBnIOkatMhKX/YUw==
+  version "3.1.25"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152"
+  integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==
 
 nanoid@^3.1.28:
   version "3.1.29"
@@ -6386,14 +5600,6 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-postcss-selector-parser@^6.0.2:
-  version "6.0.6"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea"
-  integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==
-  dependencies:
-    cssesc "^3.0.0"
-    util-deprecate "^1.0.2"
-
 postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
@@ -6408,14 +5614,14 @@ postcss@8.3.9:
     picocolors "^0.2.1"
     source-map-js "^0.6.2"
 
-postcss@^7.0.36:
-  version "7.0.36"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb"
-  integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==
+postcss@^8.1.10:
+  version "8.3.7"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.7.tgz#ec88563588c8da8e58e7226f7633b51ae221eeda"
+  integrity sha512-9SaY7nnyQ63/WittqZYAvkkYPyKxchMKH71UDzeTmWuLSvxTRpeEeABZAzlCi55cuGcoFyoV/amX2BdsafQidQ==
   dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
+    nanocolors "^0.1.5"
+    nanoid "^3.1.25"
+    source-map-js "^0.6.2"
 
 postcss@^8.3.8:
   version "8.3.8"
@@ -6441,16 +5647,6 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
-prettier@^1.18.2:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
-  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
-
-prettier@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
-  integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
-
 pretty-bytes@^5.3.0, pretty-bytes@^5.6.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
@@ -6476,11 +5672,6 @@ pretty-format@^27.2.5:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-private@^0.1.6:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
-  integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
-
 progress@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
@@ -6507,11 +5698,6 @@ proxy-from-env@1.0.0:
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
   integrity sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=
 
-pseudomap@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
-  integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
-
 psl@^1.1.28, psl@^1.1.33:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
@@ -6557,11 +5743,6 @@ querystring@0.2.0:
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
   integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
 
-querystring@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.1.tgz#40d77615bb09d16902a85c3e38aa8b5ed761c2dd"
-  integrity sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==
-
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -6664,30 +5845,16 @@ regenerate-unicode-properties@^8.2.0:
   dependencies:
     regenerate "^1.4.0"
 
-regenerate@^1.2.1, regenerate@^1.4.0:
+regenerate@^1.4.0:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
-  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-
 regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.9:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
-regenerator-transform@^0.10.0:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
-  integrity sha512-PJepbvDbuK1xgIgnau7Y90cwaAmO/LCLMI2mPvaXq2heGMR3aWW5/BQvYrhJ8jgmQjXewXvBjzfqKcVOmhjZ6Q==
-  dependencies:
-    babel-runtime "^6.18.0"
-    babel-types "^6.19.0"
-    private "^0.1.6"
-
 regenerator-transform@^0.14.2:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"
@@ -6700,15 +5867,6 @@ regexpp@^3.1.0, regexpp@^3.2.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
-regexpu-core@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
-  integrity sha1-SdA4g3uNz4v6W5pCE5k45uoq4kA=
-  dependencies:
-    regenerate "^1.2.1"
-    regjsgen "^0.2.0"
-    regjsparser "^0.1.4"
-
 regexpu-core@^4.7.1:
   version "4.7.1"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
@@ -6740,23 +5898,11 @@ registry-url@^5.0.0:
   dependencies:
     rc "^1.2.8"
 
-regjsgen@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
-  integrity sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=
-
 regjsgen@^0.5.1:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
   integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
 
-regjsparser@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
-  integrity sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=
-  dependencies:
-    jsesc "~0.5.0"
-
 regjsparser@^0.6.4:
   version "0.6.9"
   resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.9.tgz#b489eef7c9a2ce43727627011429cf833a7183e6"
@@ -6936,7 +6082,7 @@ semver-diff@^3.1.1:
   dependencies:
     semver "^6.3.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.3.0:
+"semver@2 || 3 || 4 || 5":
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -7075,16 +6221,16 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
 source-map@^0.5.0:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
 source-map@^0.7.3, source-map@~0.7.2:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
@@ -7202,13 +6348,6 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-strip-ansi@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
-  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
-  dependencies:
-    ansi-regex "^2.0.0"
-
 strip-ansi@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
@@ -7255,11 +6394,6 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
-supports-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
-  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
-
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -7267,13 +6401,6 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
-  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
-  dependencies:
-    has-flag "^3.0.0"
-
 supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
@@ -7296,11 +6423,6 @@ supports-hyperlinks@^2.0.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
-svg-tags@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
-  integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
-
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -7396,11 +6518,6 @@ tmpl@1.0.x:
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
   integrity sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=
 
-to-fast-properties@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
-  integrity sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=
-
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -7687,7 +6804,7 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-util-deprecate@^1.0.1, util-deprecate@^1.0.2:
+util-deprecate@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
@@ -7738,13 +6855,6 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-verte@0.0.12:
-  version "0.0.12"
-  resolved "https://registry.yarnpkg.com/verte/-/verte-0.0.12.tgz#f91b3f82cf2d6ea81ac2ccad66bb9aefe7997503"
-  integrity sha512-QEWpKkjAT8SLkNJzeiZxN7tJuUiTTFO51tg9dGIrkDlQhzbaM+bTT0wtDM2c/F+Ur9luE64qhsM4xI0Af3Ut1g==
-  dependencies:
-    color-fns "^0.0.10"
-
 vite-plugin-pwa@0.11.3:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.11.3.tgz#274c6472dfd94860639b8b65359bbe5fb9c2a3e6"
@@ -7758,33 +6868,6 @@ vite-plugin-pwa@0.11.3:
     workbox-build "^6.3.0"
     workbox-window "^6.3.0"
 
-vite-plugin-vue2@1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/vite-plugin-vue2/-/vite-plugin-vue2-1.9.0.tgz#59330699c384d4dbe6c0ded0cfb481f114e46832"
-  integrity sha512-4vmcoiOmOTGjRnA0hk8tHYqk96ZxRpe4AmeCqJJ8jQuNo+SDF1zXPyhxAUIK1tuK354No77WVHHIimVvZQuvIA==
-  dependencies:
-    "@babel/core" "^7.15.8"
-    "@babel/parser" "^7.15.8"
-    "@babel/plugin-proposal-class-properties" "^7.14.5"
-    "@babel/plugin-proposal-decorators" "^7.15.8"
-    "@babel/plugin-transform-typescript" "^7.15.8"
-    "@rollup/pluginutils" "^4.1.1"
-    "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1"
-    "@vue/babel-preset-jsx" "^1.2.4"
-    "@vue/component-compiler-utils" "^3.2.2"
-    babel-preset-env "^1.7.0"
-    consolidate "^0.16.0"
-    debug "^4.3.2"
-    fs-extra "^9.1.0"
-    hash-sum "^2.0.0"
-    magic-string "^0.25.7"
-    prettier "^2.4.1"
-    querystring "^0.2.1"
-    rollup "^2.58.0"
-    slash "^3.0.0"
-    source-map "^0.7.3"
-    vue-template-es2015-compiler "^1.9.1"
-
 vite@2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/vite/-/vite-2.6.7.tgz#e15c1d8327950720b5d7c4ec3fb36a5a58ccf7cb"
@@ -7797,44 +6880,21 @@ vite@2.6.7:
   optionalDependencies:
     fsevents "~2.3.2"
 
-vue-advanced-cropper@1.8.2:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/vue-advanced-cropper/-/vue-advanced-cropper-1.8.2.tgz#c163e54584cd568e9fb2b63bc0fe08a58c060421"
-  integrity sha512-dngjbph+QbqLpk4DWCoCajWcThyy08NorFhMcmrnGFJvdxTFiuJ+XjOtrXhNpDdl7U6E/csrkx6i6E8V+BwmoQ==
+vue-advanced-cropper@^2.6.3:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/vue-advanced-cropper/-/vue-advanced-cropper-2.6.3.tgz#3ec29584a53954f915a86e0f28069b79d7c29719"
+  integrity sha512-EWZ4dXnP7NpTNsCOlgGjUvBYtPtrWX+wMdW0w3PjwOk4UtQfvKz2IPYtIBzZqvxwUq0OIUq1K5y3VnCvs1DBDA==
   dependencies:
     classnames "^2.2.6"
     debounce "^1.2.0"
     easy-bem "^1.0.2"
 
-vue-drag-resize@1.5.4, vue-drag-resize@^1.5.0-rc3:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/vue-drag-resize/-/vue-drag-resize-1.5.4.tgz#f583f40f356e5792aa89109b3d13ba4407c25198"
-  integrity sha512-SR3U7n6TAZEBgP7zw7bR9mjtAlYBjqIoaWTDPz5HXN/nYhOxKSA31aD7p71fmq1jtyt9reAnCx62valNL9ZAcg==
-  dependencies:
-    vue-drag-resize "^1.5.0-rc3"
+vue-drag-resize@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/vue-drag-resize/-/vue-drag-resize-2.0.3.tgz#1faf0813f43304205bb355fbb3dacc548dd9398a"
+  integrity sha512-5q03tZ/LyvQsg1iHRcqs+wI2OKNbNIWl9+7V8rVL6MxJhZLCIYSSgbAUaDE38LhD6dFd5aJhdgNmES61AxjXuw==
 
-vue-easymde@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/vue-easymde/-/vue-easymde-1.4.0.tgz#6483c257e3b86ce40c770a1dbb0d7c5f0332af51"
-  integrity sha512-eVPm4vxndTK05rGA/tZDtqCZzLaaaPqkMLz/AcFnDnfseC7p4fpdfjrrv1djBrQRxnp5o/zCGDW7YGnqSE7yvA==
-  dependencies:
-    easymde "^2.14.0"
-    marked "^2.0.1"
-
-vue-eslint-parser@^7.0.0:
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.9.0.tgz#5eeedc71f22ebc7b18b957d1ab171acf29a41e64"
-  integrity sha512-QBlhZ5LteDRVy2dISfQhNEmmcqph+GTaD4SH41bYzXcVHFPJ9p34zCG6QAqOZVa8PKaVgbomFnoZpGJRZi14vg==
-  dependencies:
-    debug "^4.1.1"
-    eslint-scope "^5.1.1"
-    eslint-visitor-keys "^1.1.0"
-    espree "^6.2.1"
-    esquery "^1.4.0"
-    lodash "^4.17.21"
-    semver "^6.3.0"
-
-vue-eslint-parser@^7.10.0:
+vue-eslint-parser@^7.0.0, vue-eslint-parser@^7.10.0:
   version "7.10.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.10.0.tgz#ea4e4b10fd10aa35c8a79ac783488d8abcd29be8"
   integrity sha512-7tc/ewS9Vq9Bn741pvpg8op2fWJPH3k32aL+jcIcWGCTzh/zXSdh7pZ5FV3W2aJancP9+ftPAv292zY5T5IPCg==
@@ -7847,65 +6907,54 @@ vue-eslint-parser@^7.10.0:
     lodash "^4.17.21"
     semver "^6.3.0"
 
-vue-flatpickr-component@8.1.7:
-  version "8.1.7"
-  resolved "https://registry.yarnpkg.com/vue-flatpickr-component/-/vue-flatpickr-component-8.1.7.tgz#202a8977ee5838b09e6920154c99a69ce17a00e0"
-  integrity sha512-T9aapLERf5XrisKUHw8QVByFpN9UB583Bhu6+HtzvhCcfXqIYBtRc3rQC0ZhFSRk3CNMo7533U+B5Qs4WAbhyA==
+vue-flatpickr-component@9.0.5:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/vue-flatpickr-component/-/vue-flatpickr-component-9.0.5.tgz#350ec73b7f3d7f80b050c170c088234f9c3bd14c"
+  integrity sha512-fKuz/D4ePQKi+jPo4xjYRgBCLTWrTsCoKbx8nam63x4kTDtSqvFOjNwLvy0QgwC0lC+aFpUWa1dNYTH0hgUcCA==
   dependencies:
-    flatpickr "^4.6.6"
+    flatpickr "^4.6.9"
 
-vue-i18n@8.26.5:
-  version "8.26.5"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.26.5.tgz#b61e994e7ae83564c6aebd004543156bbdc7c7e9"
-  integrity sha512-qYqfsFd8v2QFSLDAabqXXXpwjGvkuqJtTWqRpZPXpAFO6PArGH4A9vSplnA0HLmnB8km7OB5ZSdP8lkkX0rLew==
-
-vue-notification@1.3.20:
-  version "1.3.20"
-  resolved "https://registry.yarnpkg.com/vue-notification/-/vue-notification-1.3.20.tgz#d85618127763b46f3e25b8962b857947d5a97cbe"
-  integrity sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ==
-
-vue-router@3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.2.tgz#5f55e3f251970e36c3e8d88a7cd2d67a350ade5c"
-  integrity sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ==
-
-vue-shortkey@3.1.7:
-  version "3.1.7"
-  resolved "https://registry.yarnpkg.com/vue-shortkey/-/vue-shortkey-3.1.7.tgz#31c09a99ed597331a6a49a45eeff894a78a19eef"
-  integrity sha512-Wm/vPXXS+4Wl/LoYpD+cZc0J0HIoVlY8Ep0JLIqqswmAya3XUBtsqKbhzEf9sXo+3rZ5p1YsUyZfXas8XD7YjQ==
+vue-i18n@9.2.0-beta.11:
+  version "9.2.0-beta.11"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.2.0-beta.11.tgz#1992fed8a6a0a741b15ce7c733e4158126ee7b3a"
+  integrity sha512-qJ4ZRSGFGqYiC3gABD1cLhw7s7G1dw0Di3k+XHy6XhJt3+FUHOQiLiQMA41ZkfmgZ0Gb34SF5ij3YF88DXmbyA==
   dependencies:
-    custom-event-polyfill "^1.0.7"
-    element-matches "^0.1.2"
+    "@intlify/core-base" "9.2.0-beta.11"
+    "@intlify/shared" "9.2.0-beta.11"
+    "@intlify/vue-devtools" "9.2.0-beta.11"
+    "@vue/devtools-api" "^6.0.0-beta.13"
 
-vue-template-compiler@2.6.14:
-  version "2.6.14"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz#a2f0e7d985670d42c9c9ee0d044fed7690f4f763"
-  integrity sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==
+vue-router@4.0.12:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.12.tgz#8dc792cddf5bb1abcc3908f9064136de7e13c460"
+  integrity sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==
   dependencies:
-    de-indent "^1.0.2"
-    he "^1.1.0"
+    "@vue/devtools-api" "^6.0.0-beta.18"
 
-vue-template-es2015-compiler@^1.9.0, vue-template-es2015-compiler@^1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
-  integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
+vue@3.2.20:
+  version "3.2.20"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.20.tgz#940f8aa8bf3e3be78243ca582bad41fcd45ae3e6"
+  integrity sha512-81JjEP4OGk9oO8+CU0h2nFPGgJBm9mNa3kdCX2k6FuRdrWrC+CNe+tOnuIeTg8EWwQuI+wwdra5Q7vSzp7p4Iw==
+  dependencies:
+    "@vue/compiler-dom" "3.2.20"
+    "@vue/compiler-sfc" "3.2.20"
+    "@vue/runtime-dom" "3.2.20"
+    "@vue/server-renderer" "3.2.20"
+    "@vue/shared" "3.2.20"
 
-vue@2.6.14:
-  version "2.6.14"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
-  integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
-
-vuedraggable@2.24.3:
-  version "2.24.3"
-  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
-  integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
+vuedraggable@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-4.0.1.tgz#3bcaab0808b7944030b7d9a29f9a63d59dfa12c5"
+  integrity sha512-7qN5jhB1SLfx5P+HCm3JUW+pvgA1bSLgYLSVOeLWBDH9z+zbaEH0OlyZBVMLOxFR+JUHJjwDD0oy7T4r9TEgDA==
   dependencies:
     sortablejs "1.10.2"
 
-vuex@3.6.2:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
-  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
+vuex@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.0.2.tgz#f896dbd5bf2a0e963f00c67e9b610de749ccacc9"
+  integrity sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.11"
 
 w3c-hr-time@^1.0.2:
   version "1.0.2"
@@ -8246,11 +7295,6 @@ y18n@^5.0.5:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
-yallist@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
-  integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
-
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"