diff --git a/app/package.json b/app/package.json
index b24acf2748..89dd9e1ed2 100644
--- a/app/package.json
+++ b/app/package.json
@@ -82,10 +82,10 @@
 		"sass": "^1.34.1",
 		"tinymce": "^5.7.1",
 		"typescript": "^4.2.4",
-		"vite": "^2.1.5",
+		"vite": "^2.3.7",
 		"vue": "^3.0.5",
 		"vue-i18n": "^9.1.6",
 		"vue-router": "^4.0.6",
-		"vuedraggable": "^4.0.1"
+		"vuedraggable": "^4.0.3"
 	}
 }
diff --git a/app/src/components/v-field-select/v-field-select.vue b/app/src/components/v-field-select/v-field-select.vue
index 9cb069602f..3131ab4cdc 100644
--- a/app/src/components/v-field-select/v-field-select.vue
+++ b/app/src/components/v-field-select/v-field-select.vue
@@ -46,7 +46,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, toRefs, ref, PropType, computed } from 'vue';
 import FieldListItem from '../v-field-template/field-list-item.vue';
 import { Field, Collection, Relation } from '@/types';
-import Draggable from 'vuedraggable/src/vuedraggable.js';
+import Draggable from 'vuedraggable';
 import useFieldTree from '@/composables/use-field-tree';
 import useCollection from '@/composables/use-collection';
 import { FieldTree } from '../v-field-template/types';
diff --git a/app/src/components/v-table/v-table.vue b/app/src/components/v-table/v-table.vue
index 3774ad800a..1ba4309cab 100644
--- a/app/src/components/v-table/v-table.vue
+++ b/app/src/components/v-table/v-table.vue
@@ -92,7 +92,7 @@ import TableRow from './table-row/';
 import { sortBy, clone, forEach, pick } from 'lodash';
 import { i18n } from '@/lang/';
 // @TODO Use module import once vuedraggable exports an esm build or vite fixes umd imports
-import Draggable from 'vuedraggable/src/vuedraggable.js';
+import Draggable from 'vuedraggable';
 import hideDragImage from '@/utils/hide-drag-image';
 
 const HeaderDefaults: Header = {
diff --git a/app/src/interfaces/list-m2a/list-m2a.vue b/app/src/interfaces/list-m2a/list-m2a.vue
index 25f5b846c0..482cf139af 100644
--- a/app/src/interfaces/list-m2a/list-m2a.vue
+++ b/app/src/interfaces/list-m2a/list-m2a.vue
@@ -149,7 +149,7 @@ import { getFieldsFromTemplate } from '@/utils/get-fields-from-template';
 import { isPlainObject, cloneDeep } from 'lodash';
 import { getEndpoint } from '@/utils/get-endpoint';
 import { hideDragImage } from '@/utils/hide-drag-image';
-import Draggable from 'vuedraggable/src/vuedraggable.js';
+import Draggable from 'vuedraggable';
 
 export default defineComponent({
 	emits: ['input'],
diff --git a/app/src/interfaces/list-m2m/list-m2m.vue b/app/src/interfaces/list-m2m/list-m2m.vue
index 3ab835a580..5008e4444d 100644
--- a/app/src/interfaces/list-m2m/list-m2m.vue
+++ b/app/src/interfaces/list-m2m/list-m2m.vue
@@ -93,7 +93,7 @@ import { defineComponent, computed, PropType, toRefs, ref } from 'vue';
 import DrawerItem from '@/views/private/components/drawer-item';
 import DrawerCollection from '@/views/private/components/drawer-collection';
 import { get } from 'lodash';
-import Draggable from 'vuedraggable/src/vuedraggable.js';
+import Draggable from 'vuedraggable';
 
 import useActions from './use-actions';
 import useRelation from './use-relation';
diff --git a/app/src/interfaces/list-o2m-tree-view/nested-draggable.vue b/app/src/interfaces/list-o2m-tree-view/nested-draggable.vue
index 9aeecef50e..f30e0df37d 100644
--- a/app/src/interfaces/list-o2m-tree-view/nested-draggable.vue
+++ b/app/src/interfaces/list-o2m-tree-view/nested-draggable.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script lang="ts">
-import Draggable from 'vuedraggable/src/vuedraggable.js';
+import Draggable from 'vuedraggable';
 import { defineComponent, ref, PropType } from 'vue';
 import hideDragImage from '@/utils/hide-drag-image';
 import ItemPreview from './item-preview.vue';
diff --git a/app/src/interfaces/list-o2m/list-o2m.vue b/app/src/interfaces/list-o2m/list-o2m.vue
index d03f33228d..572c4fe9da 100644
--- a/app/src/interfaces/list-o2m/list-o2m.vue
+++ b/app/src/interfaces/list-o2m/list-o2m.vue
@@ -92,7 +92,7 @@ import { get } from 'lodash';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { getFieldsFromTemplate } from '@/utils/get-fields-from-template';
 import { addRelatedPrimaryKeyToFields } from '@/utils/add-related-primary-key-to-fields';
-import Draggable from 'vuedraggable/src/vuedraggable.js';
+import Draggable from 'vuedraggable';
 import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
 
 export default defineComponent({
diff --git a/app/src/interfaces/list/list.vue b/app/src/interfaces/list/list.vue
index 69647bafe0..09eeac9892 100644
--- a/app/src/interfaces/list/list.vue
+++ b/app/src/interfaces/list/list.vue
@@ -56,7 +56,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed, ref, toRefs } from 'vue';
 import { Field } from '@/types';
-import Draggable from 'vuedraggable/src/vuedraggable.js';
+import Draggable from 'vuedraggable';
 import { i18n } from '@/lang';
 import { renderStringTemplate } from '@/utils/render-string-template';
 import hideDragImage from '@/utils/hide-drag-image';
diff --git a/app/src/layouts/tabular/options.vue b/app/src/layouts/tabular/options.vue
index f7a773182f..6ff699de4d 100644
--- a/app/src/layouts/tabular/options.vue
+++ b/app/src/layouts/tabular/options.vue
@@ -53,7 +53,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, toRefs } from 'vue';
 
-import Draggable from 'vuedraggable/src/vuedraggable.js';
+import Draggable from 'vuedraggable';
 import { useLayoutState } from '@/composables/use-layout';
 
 export default defineComponent({
diff --git a/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue b/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
index 1b7af30d74..56a1d1467f 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
@@ -57,7 +57,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, toRefs } from 'vue';
 import useCollection from '@/composables/use-collection/';
-import Draggable from 'vuedraggable/src/vuedraggable.js';
+import Draggable from 'vuedraggable';
 import { Field } from '@/types';
 import { useFieldsStore } from '@/stores/';
 import FieldSelect from './field-select.vue';
diff --git a/package-lock.json b/package-lock.json
index 2e38200d3b..9a76512522 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -502,11 +502,11 @@
 				"sass": "^1.34.1",
 				"tinymce": "^5.7.1",
 				"typescript": "^4.2.4",
-				"vite": "^2.1.5",
+				"vite": "^2.3.7",
 				"vue": "^3.0.5",
 				"vue-i18n": "^9.1.6",
 				"vue-router": "^4.0.6",
-				"vuedraggable": "^4.0.1"
+				"vuedraggable": "^4.0.3"
 			}
 		},
 		"docs": {
@@ -47793,9 +47793,9 @@
 			"dev": true
 		},
 		"node_modules/vuedraggable": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.0.1.tgz",
-			"integrity": "sha512-7qN5jhB1SLfx5P+HCm3JUW+pvgA1bSLgYLSVOeLWBDH9z+zbaEH0OlyZBVMLOxFR+JUHJjwDD0oy7T4r9TEgDA==",
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.0.3.tgz",
+			"integrity": "sha512-NkJYk+UyxgEoSQcgvVZtqY6dYpdXkBHS8aq6CqoJAfXVM9ZRYT0WPdlBbTttG4nCwllU2M5JGGgo9Drt/L0a7w==",
 			"dev": true,
 			"dependencies": {
 				"sortablejs": "1.10.2"
@@ -57239,11 +57239,11 @@
 				"sass": "^1.34.1",
 				"tinymce": "^5.7.1",
 				"typescript": "^4.2.4",
-				"vite": "^2.1.5",
+				"vite": "^2.3.7",
 				"vue": "^3.0.5",
 				"vue-i18n": "^9.1.6",
 				"vue-router": "^4.0.6",
-				"vuedraggable": "^4.0.1"
+				"vuedraggable": "^4.0.3"
 			}
 		},
 		"@directus/cli": {
@@ -64050,6 +64050,7 @@
 			"resolved": "https://registry.npmjs.org/@oclif/command/-/command-1.8.0.tgz",
 			"integrity": "sha512-5vwpq6kbvwkQwKqAoOU3L72GZ3Ta8RRrewKj9OJRolx28KLJJ8Dg9Rf7obRwt5jQA9bkYd8gqzMTrI7H3xLfaw==",
 			"requires": {
+				"@oclif/config": "^1.15.1",
 				"@oclif/errors": "^1.3.3",
 				"@oclif/parser": "^3.8.3",
 				"@oclif/plugin-help": "^3",
@@ -65989,6 +65990,7 @@
 			"integrity": "sha512-pM7CR3yXB6L8Gfn6EmX7FLNE3+V/15I3o33GkSNsWvgsMp6HVGXKkXgojrcfUUauyL1LZOdvTmu4enU2RePGHw==",
 			"dev": true,
 			"requires": {
+				"@babel/core": "^7.11.0",
 				"@babel/helper-compilation-targets": "^7.9.6",
 				"@babel/helper-module-imports": "^7.8.3",
 				"@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -66001,6 +66003,7 @@
 				"@vue/babel-plugin-jsx": "^1.0.3",
 				"@vue/babel-preset-jsx": "^1.2.4",
 				"babel-plugin-dynamic-import-node": "^2.3.3",
+				"core-js": "^3.6.5",
 				"core-js-compat": "^3.6.5",
 				"semver": "^6.1.0"
 			},
@@ -97307,9 +97310,9 @@
 			"dev": true
 		},
 		"vuedraggable": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.0.1.tgz",
-			"integrity": "sha512-7qN5jhB1SLfx5P+HCm3JUW+pvgA1bSLgYLSVOeLWBDH9z+zbaEH0OlyZBVMLOxFR+JUHJjwDD0oy7T4r9TEgDA==",
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.0.3.tgz",
+			"integrity": "sha512-NkJYk+UyxgEoSQcgvVZtqY6dYpdXkBHS8aq6CqoJAfXVM9ZRYT0WPdlBbTttG4nCwllU2M5JGGgo9Drt/L0a7w==",
 			"dev": true,
 			"requires": {
 				"sortablejs": "1.10.2"