diff --git a/frontend/js/components/BrowserField.vue b/frontend/js/components/BrowserField.vue
index 95222ea92..7c168b075 100755
--- a/frontend/js/components/BrowserField.vue
+++ b/frontend/js/components/BrowserField.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { mapGetters,mapState } from 'vuex'
 
   import draggableMixin from '@/mixins/draggable'
@@ -49,7 +49,7 @@
     name: 'A17BrowserField',
     components: {
       'a17-browseritem': Browseritem,
-      draggable
+      draggable: VueDraggableNext
     },
     mixins: [draggableMixin],
     props: {
diff --git a/frontend/js/components/Repeater.vue b/frontend/js/components/Repeater.vue
index e7ca2b6de..a1e23d4df 100755
--- a/frontend/js/components/Repeater.vue
+++ b/frontend/js/components/Repeater.vue
@@ -71,7 +71,7 @@
 </template>
 
 <script>
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { mapState } from 'vuex'
 
   import BlockEditorItem from '@/components/blocks/BlockEditorItem.vue'
@@ -85,7 +85,7 @@
     components: {
       A17StandaloneBrowser,
       'a17-blockeditor-item': BlockEditorItem,
-      draggable
+      draggable: VueDraggableNext
     },
     mixins: [draggableMixin],
     props: {
diff --git a/frontend/js/components/Slideshow.vue b/frontend/js/components/Slideshow.vue
index 451732fc1..2caefdac5 100755
--- a/frontend/js/components/Slideshow.vue
+++ b/frontend/js/components/Slideshow.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { mapState } from 'vuex'
 
   import draggableMixin from '@/mixins/draggable'
@@ -47,7 +47,7 @@
   export default {
     name: 'A17Slideshow',
     components: {
-      draggable
+      draggable: VueDraggableNext
     },
     mixins: [draggableMixin, mediaLibrayMixin, mediaFieldMixin],
     props: {
diff --git a/frontend/js/components/blocks/Blocks.vue b/frontend/js/components/blocks/Blocks.vue
index bbeca20db..8746d38ac 100755
--- a/frontend/js/components/blocks/Blocks.vue
+++ b/frontend/js/components/blocks/Blocks.vue
@@ -140,7 +140,7 @@
 </template>
 
 <script>
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { mapGetters,mapState } from 'vuex'
 
   import BlockEditorItem from '@/components/blocks/BlockEditorItem.vue'
@@ -154,7 +154,7 @@
       'a17-blockeditor-item': BlockEditorItem,
       'a17-blockeditor-model': BlockEditorModel,
       'a17-blocks-list': BlocksList,
-      draggable
+      draggable: VueDraggableNext
     },
     mixins: [DraggableMixin, EditorMixin],
     props: {
diff --git a/frontend/js/components/buckets/Bucket.vue b/frontend/js/components/buckets/Bucket.vue
index 7b7dd9ec6..cfc31c1cf 100644
--- a/frontend/js/components/buckets/Bucket.vue
+++ b/frontend/js/components/buckets/Bucket.vue
@@ -79,7 +79,7 @@
 </template>
 
 <script>
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { mapGetters,mapState } from 'vuex'
 
   import Fieldset from '@/components/Fieldset.vue'
@@ -132,7 +132,7 @@
       'a17-paginate': Paginate,
       'a17-filter': Filter,
       'a17-vselect': VSelect,
-      draggable
+      draggable: VueDraggableNext
     },
     data: function () {
       return {
diff --git a/frontend/js/components/editor/EditorPreview.vue b/frontend/js/components/editor/EditorPreview.vue
index 7c37259da..468ace1ff 100755
--- a/frontend/js/components/editor/EditorPreview.vue
+++ b/frontend/js/components/editor/EditorPreview.vue
@@ -47,7 +47,7 @@
 <script>
   import debounce from 'lodash/debounce'
   import tinyColor from 'tinycolor2'
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
 
   import A17BlockEditorModel from '@/components/blocks/BlockEditorModel'
   import A17EditorBlockPreview from '@/components/editor/EditorPreviewBlockItem'
@@ -72,7 +72,7 @@
     },
     mixins: [DraggableMixin, BlockEditorMixin],
     components: {
-      draggable,
+      draggable: VueDraggableNext,
       'a17-editor-block-preview': A17EditorBlockPreview,
       'a17-blockeditor-model': A17BlockEditorModel,
       'a17-spinner': A17Spinner
diff --git a/frontend/js/components/editor/EditorSidebarBlockList.vue b/frontend/js/components/editor/EditorSidebarBlockList.vue
index e1cd80bf9..9ba147364 100644
--- a/frontend/js/components/editor/EditorSidebarBlockList.vue
+++ b/frontend/js/components/editor/EditorSidebarBlockList.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
 
   import { DraggableMixin } from '@/mixins'
 
@@ -48,7 +48,7 @@
     },
     mixins: [DraggableMixin],
     components: {
-      draggable
+      draggable: VueDraggableNext
     },
     computed: {
       editorSidebarClasses () {
diff --git a/frontend/js/components/files/FileField.vue b/frontend/js/components/files/FileField.vue
index 152a82b5e..4db681afb 100644
--- a/frontend/js/components/files/FileField.vue
+++ b/frontend/js/components/files/FileField.vue
@@ -20,7 +20,7 @@
   </a17-inputframe>
 </template>
 <script>
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { mapGetters,mapState } from 'vuex'
 
   import draggableMixin from '@/mixins/draggable'
@@ -35,7 +35,7 @@
     name: 'A17FileField',
     components: {
       'a17-fileitem': fileItem,
-      draggable
+      draggable: VueDraggableNext
     },
     mixins: [draggableMixin, mediaLibraryMixin, localeMixin, inputframeMixin],
     props: {
diff --git a/frontend/js/components/table/Datatable.vue b/frontend/js/components/table/Datatable.vue
index c7a43b50b..d2ba2a897 100755
--- a/frontend/js/components/table/Datatable.vue
+++ b/frontend/js/components/table/Datatable.vue
@@ -73,7 +73,7 @@
 
 <script>
   import debounce from 'lodash/debounce'
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { mapState } from 'vuex'
 
   import a17Spinner from '@/components/Spinner.vue'
@@ -94,7 +94,7 @@
       'a17-tablerow': a17Tablerow,
       'a17-paginate': a17Paginate,
       'a17-spinner': a17Spinner,
-      draggable
+      draggable: VueDraggableNext
     },
     mixins: [DatatableMixin, DraggableMixin],
     data: function () {
diff --git a/frontend/js/components/table/nested/NestedList.vue b/frontend/js/components/table/nested/NestedList.vue
index ca35dc511..e147b90e1 100644
--- a/frontend/js/components/table/nested/NestedList.vue
+++ b/frontend/js/components/table/nested/NestedList.vue
@@ -24,8 +24,7 @@
 </template>
 
 <script>
-  import draggable from 'vuedraggable'
-
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { DatatableMixin, DraggableMixin, NestedDraggableMixin } from '@/mixins/index'
   import { DATATABLE } from '@/store/mutations'
 
@@ -35,7 +34,7 @@
     name: 'a17-nested-list',
     components: {
       'a17-nested-item': NestedItem,
-      draggable
+      draggable: VueDraggableNext
     },
     mixins: [DatatableMixin, DraggableMixin, NestedDraggableMixin],
     props: {
diff --git a/package-lock.json b/package-lock.json
index e5ba720f4..0670cd350 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,10 +37,10 @@
         "tinycolor2": "1.6.0",
         "truncate-utf8-bytes": "1.0.2",
         "vue": "^3.4.21",
+        "vue-draggable-next": "^2.2.1",
         "vue-select": "^4.0.0-beta.6",
         "vue-timeago3": "^2.3.2",
         "vue3trend": "^1.0.0",
-        "vuedraggable": "2.24.3",
         "vuex": "^4.0.0"
       },
       "devDependencies": {
@@ -11891,8 +11891,10 @@
       }
     },
     "node_modules/sortablejs": {
-      "version": "1.10.2",
-      "license": "MIT"
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
+      "peer": true
     },
     "node_modules/source-map": {
       "version": "0.6.1",
@@ -12984,6 +12986,15 @@
         }
       }
     },
+    "node_modules/vue-draggable-next": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vue-draggable-next/-/vue-draggable-next-2.2.1.tgz",
+      "integrity": "sha512-EAMS1IRHF0kZO0o5PMOinsQsXIqsrKT1hKmbICxG3UEtn7zLFkLxlAtajcCcUTisNvQ6TtCB5COjD9a1raNADw==",
+      "peerDependencies": {
+        "sortablejs": "^1.14.0",
+        "vue": "^3.2.2"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.4.2",
       "dev": true,
@@ -13245,13 +13256,6 @@
         "csstype": "^3.1.0"
       }
     },
-    "node_modules/vuedraggable": {
-      "version": "2.24.3",
-      "license": "MIT",
-      "dependencies": {
-        "sortablejs": "1.10.2"
-      }
-    },
     "node_modules/vuex": {
       "version": "4.1.0",
       "license": "MIT",
diff --git a/package.json b/package.json
index 6201dfd49..12c9a75c0 100644
--- a/package.json
+++ b/package.json
@@ -43,10 +43,10 @@
     "tinycolor2": "1.6.0",
     "truncate-utf8-bytes": "1.0.2",
     "vue": "^3.4.21",
+    "vue-draggable-next": "^2.2.1",
     "vue-select": "^4.0.0-beta.6",
     "vue-timeago3": "^2.3.2",
     "vue3trend": "^1.0.0",
-    "vuedraggable": "2.24.3",
     "vuex": "^4.0.0"
   },
   "devDependencies": {
diff --git a/vue.config.js b/vue.config.js
index 495574e6c..c8f2df3af 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -139,21 +139,12 @@ const config = {
     plugins
   },
   chainWebpack: (config) => {
-    config.resolve.alias.set('vue', '@vue/compat')
-
-    config.module
-      .rule('vue')
-      .use('vue-loader')
-      .tap((options) => {
-        return {
-          ...options,
-          compilerOptions: {
-            compatConfig: {
-              MODE: 3
-            }
-          }
-        }
+    config.plugin('define').tap((definitions) => {
+      Object.assign(definitions[0], {
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
       })
+      return definitions
+    })
   }
 }