diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index 838841399..e043db6f4 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -393,7 +393,7 @@ $vikunja-nav-selected-width: 0.4rem;
 				padding: 0 .25rem;
 			}
 
-			::v-deep.dropdown-trigger {
+			:deep(.dropdown-trigger) {
 				padding: .5rem;
 				cursor: pointer;
 			}
@@ -433,19 +433,19 @@ $vikunja-nav-selected-width: 0.4rem;
 				display: flex;
 				align-items: center;
 
-				::v-deep.dropdown-trigger {
+				&:hover {
+					background: $white;
+				}
+
+				:deep(.dropdown-trigger) {
 					opacity: 0;
 					padding: .5rem;
 					cursor: pointer;
 					transition: $transition;
 				}
 
-				&:hover {
-					background: $white;
-
-					::v-deep.dropdown-trigger {
-						opacity: 1;
-					}
+				&:hover :deep(.dropdown-trigger) {
+					opacity: 1;
 				}
 
 				&.loader-container.is-loading:after {
diff --git a/src/components/home/topNavigation.vue b/src/components/home/topNavigation.vue
index 859615326..063152574 100644
--- a/src/components/home/topNavigation.vue
+++ b/src/components/home/topNavigation.vue
@@ -206,7 +206,7 @@ $vikunja-nav-logo-full-width: 164px;
 			display: flex;
 			align-items: center;
 
-			::v-deep.dropdown-trigger {
+			:deep(.dropdown-trigger) {
 				line-height: 1;
 
 				.button {
@@ -228,7 +228,7 @@ $vikunja-nav-logo-full-width: 164px;
 
 .navbar {
 	// FIXME: notifications should provide a slot for the icon instead, so that we can style it as we want
-	::v-deep {
+	:deep() {
 		.trigger-button {
 			cursor: pointer;
 			color: $grey-400;
@@ -256,7 +256,7 @@ $vikunja-nav-logo-full-width: 164px;
 			height: 40px;
 		}
 
-		::v-deep .dropdown-trigger .button {
+		:deep(.dropdown-trigger .button) {
 			background: none;
 
 			&:focus:not(:active), &:active {
@@ -289,7 +289,7 @@ $vikunja-nav-logo-full-width: 164px;
     margin: 0;
   }
 
-  ::v-deep.dropdown-trigger {
+  :deep(.dropdown-trigger) {
     color: $grey-400;
     margin-left: 1rem;
     height: 1rem;
diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index 8fb7678cb..aae78e2fc 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -312,7 +312,7 @@ export default {
 			width: calc(100% - 2rem);
 		}
 
-		::v-deep .flatpickr-calendar {
+		:deep(.flatpickr-calendar) {
 			margin: 0 auto 8px;
 			box-shadow: none;
 		}
diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue
index 34a55d427..8db04b3a6 100644
--- a/src/components/misc/card.vue
+++ b/src/components/misc/card.vue
@@ -71,7 +71,7 @@ export default {
 }
 
 // FIXME: should maybe be merged somehow with modal
-::v-deep.modal-card-foot {
+:deep(.modal-card-foot) {
   background-color: $grey-50;
   border-top: 0;
 }
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 78ce84edb..0f05b2190 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -181,7 +181,7 @@ export default {
 .hint-modal {
 	z-index: 4600;
 
-	::v-deep.card-content {
+	:deep(.card-content) {
 		text-align: left;
 
 		.info {
diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 1696a19cd..93388d86b 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -463,7 +463,7 @@ export default {
 <style lang="scss" scoped>
 .quick-actions {
 	// FIXME: changed position should be an option of the modal
-	::v-deep.modal-content {
+	:deep(.modal-content) {
 		top: 3rem;
 		transform: translate(-50%, 0);
 	}
@@ -531,7 +531,7 @@ export default {
 
 // HACK:
 // FIXME:
-.modal-container-smaller ::v-deep.hint-modal .modal-container {
+.modal-container-smaller :deep(.hint-modal .modal-container) {
 	height: calc(100vh - 5rem);
 }
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue
index 128f26d1d..874977dc7 100644
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@@ -618,7 +618,7 @@ $gantt-vertical-border-color: $grey-100;
 		z-index: 5;
 
 		// FIXME: should be an option of the card, e.g. overflow
-		::v-deep.card-content {
+		:deep(.card-content) {
 			max-height: 60vh;
 			overflow-y: auto;
 		}
diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue
index c36a49d47..6cfc126e9 100644
--- a/src/components/tasks/partials/defer-task.vue
+++ b/src/components/tasks/partials/defer-task.vue
@@ -164,7 +164,7 @@ $defer-task-max-width: 350px + 100px;
 	margin: .5rem 0;
 }
 
-::v-deep {
+:deep() {
 	input.input {
 		display: none;
 	}
diff --git a/src/components/tasks/partials/editAssignees.vue b/src/components/tasks/partials/editAssignees.vue
index c67b8767e..4eb354263 100644
--- a/src/components/tasks/partials/editAssignees.vue
+++ b/src/components/tasks/partials/editAssignees.vue
@@ -126,7 +126,7 @@ export default {
 		margin-left: -1.5rem;
 	}
 
-	::v-deep.user img {
+	:deep(.user img) {
 		border: 2px solid $white;
 		margin-right: 0;
 	}
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index 81c871d7a..1367063e6 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -173,7 +173,7 @@ $task-background: $white;
 		flex-wrap: wrap;
 		align-items: center;
 
-		::v-deep.tag,
+		:deep(.tag),
 		.assignees,
 		.icon,
 		.priority-label {
@@ -195,7 +195,7 @@ $task-background: $white;
 		}
 
 		// FIXME: should be in labels.vue
-		::v-deep.tag {
+		:deep(.tag) {
 			margin-left: 0;
 		}
 
diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index aed0bb241..9d2a629ff 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -111,7 +111,7 @@ export default {
     display: flex;
     align-items: center;
 
-    &.overdue ::v-deep.datepicker a.show {
+    &.overdue :deep(.datepicker a.show) {
       color: $red;
     }
 
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 60fd2ca4e..62a4db3fb 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -313,7 +313,7 @@ export default {
 		opacity: 1;
 	}
 
-	::v-deep.fancycheckbox {
+	:deep(.fancycheckbox) {
 		height: 18px;
 		padding-top: 0;
 		padding-right: .5rem;
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index eca78c30c..bf2b786a8 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -730,7 +730,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 		}
 	}
 
-	::v-deep.dropdown-trigger {
+	:deep(.dropdown-trigger) {
 		cursor: pointer;
 		padding: .5rem;
 	}
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index 3ef59fde5..9da80d15b 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -265,7 +265,7 @@ export default {
 			margin-top: 3rem;
 		}
 
-		.input {
+		:deep(.input) {
 			width: 190px;
 			vertical-align: middle;
 			margin: .5rem 0;
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index e28193bb7..b27f3ef67 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -723,7 +723,7 @@ $flash-background-duration: 750ms;
     color: $grey-400;
   }
 
-  ::v-deep.heading {
+  :deep(.heading) {
     display: flex;
     justify-content: space-between;
     text-transform: none;
@@ -766,7 +766,7 @@ $flash-background-duration: 750ms;
     }
   }
 
-  ::v-deep.datepicker {
+  :deep(.datepicker) {
     width: 100%;
 
     a.show {
@@ -809,7 +809,7 @@ $flash-background-duration: 750ms;
 
     &.labels-list,
 	.assignees {
-      ::v-deep.multiselect {
+      :deep(.multiselect) {
         .input-wrapper {
           &:not(:focus-within):not(:hover) {
             background: transparent !important;
@@ -820,8 +820,8 @@ $flash-background-duration: 750ms;
     }
   }
 
-  ::v-deep.details,
-  ::v-deep.heading {
+  :deep(.details),
+  :deep(.heading) {
     .input:not(.has-defaults),
     .textarea,
     .select:not(.has-defaults) select {