diff --git a/front/package.json b/front/package.json
index 34231d27b..a72bf7678 100644
--- a/front/package.json
+++ b/front/package.json
@@ -43,7 +43,7 @@
     "vue-upload-component": "2.8.22",
     "vue3-gettext": "2.2.0-alpha.1",
     "vue3-lazyload": "0.2.5-beta",
-    "vuedraggable": "2.24.3",
+    "vuedraggable": "4.1.0",
     "vuex": "4.0.2",
     "vuex-persistedstate": "4.1.0",
     "vuex-router-sync": "5.0.0"
diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 9f1e32a54..7f5d39563 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -156,7 +156,7 @@
                     :title="labels.previousTrack"
                     :aria-label="labels.previousTrack"
                     class="control"
-                    :disabled="emptyQueue"
+                    :disabled="emptyQueue ? true : null"
                     @click.prevent.stop="$store.dispatch('queue/previous')"
                   >
                     <i :class="['ui', 'backward step', {'disabled': emptyQueue}, 'icon']" />
@@ -187,7 +187,7 @@
                     :title="labels.next"
                     :aria-label="labels.next"
                     class="control"
-                    :disabled="!hasNext"
+                    :disabled="hasNext ? true : null"
                     @click.prevent.stop="$store.dispatch('queue/next')"
                   >
                     <i :class="['ui', {'disabled': !hasNext}, 'forward step', 'icon']" />
@@ -237,76 +237,78 @@
             </div>
             <table class="ui compact very basic fixed single line selectable unstackable table">
               <draggable
-                v-model="tracks"
+                v-model:list="tracks"
                 tag="tbody"
                 handle=".handle"
                 @update="reorder"
+                item-key="id"
               >
-                <tr
-                  v-for="(track, index) in tracks"
-                  :key="index"
-                  :class="['queue-item', {'active': index === queue.currentIndex}]"
-                >
-                  <td class="handle">
-                    <i class="grip lines icon" />
-                  </td>
-                  <td
-                    class="image-cell"
-                    @click="$store.dispatch('queue/currentIndex', index)"
+                <template #item="{ element: track, index }">
+                  <tr
+                    :key="track.id"
+                    :class="['queue-item', {'active': index === queue.currentIndex}]"
                   >
-                    <img
-                      v-if="track.cover && track.cover.urls.original"
-                      class="ui mini image"
-                      alt=""
-                      :src="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
+                    <td class="handle">
+                      <i class="grip lines icon" />
+                    </td>
+                    <td
+                      class="image-cell"
+                      @click="$store.dispatch('queue/currentIndex', index)"
                     >
-                    <img
-                      v-else-if="track.album && track.album.cover && track.album.cover.urls.original"
-                      class="ui mini image"
-                      alt=""
-                      :src="$store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
+                      <img
+                        v-if="track.cover && track.cover.urls.original"
+                        class="ui mini image"
+                        alt=""
+                        :src="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
+                      >
+                      <img
+                        v-else-if="track.album && track.album.cover && track.album.cover.urls.original"
+                        class="ui mini image"
+                        alt=""
+                        :src="$store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
+                      >
+                      <img
+                        v-else
+                        class="ui mini image"
+                        alt=""
+                        src="../assets/audio/default-cover.png"
+                      >
+                    </td>
+                    <td
+                      colspan="3"
+                      @click="$store.dispatch('queue/currentIndex', index)"
                     >
-                    <img
-                      v-else
-                      class="ui mini image"
-                      alt=""
-                      src="../assets/audio/default-cover.png"
-                    >
-                  </td>
-                  <td
-                    colspan="3"
-                    @click="$store.dispatch('queue/currentIndex', index)"
-                  >
-                    <button
-                      class="title reset ellipsis"
-                      :title="track.title"
-                      :aria-label="labels.selectTrack"
-                    >
-                      <strong>{{ track.title }}</strong><br>
-                      <span>
+                      <button
+                        class="title reset ellipsis"
+                        :title="track.title"
+                        :aria-label="labels.selectTrack"
+                      >
+                        <strong>{{ track.title }}</strong><br>
+                        <span>
                         {{ track.artist.name }}
                       </span>
-                    </button>
-                  </td>
-                  <td class="duration-cell">
-                    <template v-if="track.uploads.length > 0">
-                      {{ time.durationFormatted(track.uploads[0].duration) }}
-                    </template>
-                  </td>
-                  <td class="controls">
-                    <template v-if="$store.getters['favorites/isFavorite'](track.id)">
-                      <i class="pink heart icon" />
-                    </template>
-                    <button
-                      :aria-label="labels.removeFromQueue"
-                      :title="labels.removeFromQueue"
-                      :class="['ui', 'really', 'tiny', 'basic', 'circular', 'icon', 'button']"
-                      @click.stop="cleanTrack(index)"
-                    >
-                      <i class="x icon" />
-                    </button>
-                  </td>
-                </tr>
+                      </button>
+                    </td>
+                    <td class="duration-cell">
+                      <template v-if="track.uploads.length > 0">
+                        {{ time.durationFormatted(track.uploads[0].duration) }}
+                      </template>
+                    </td>
+                    <td class="controls">
+                      <template v-if="$store.getters['favorites/isFavorite'](track.id)">
+                        <i class="pink heart icon" />
+                      </template>
+                      <button
+                        :aria-label="labels.removeFromQueue"
+                        :title="labels.removeFromQueue"
+                        :class="['ui', 'really', 'tiny', 'basic', 'circular', 'icon', 'button']"
+                        @click.stop="cleanTrack(index)"
+                      >
+                        <i class="x icon" />
+                      </button>
+                    </td>
+                  </tr>
+                </template>
               </draggable>
             </table>
 
@@ -450,7 +452,8 @@ export default {
           this.$store.commit('ui/queueFocused', null)
         }
       },
-      immediate: true
+      immediate: true,
+      deep: true
     },
     '$route.fullPath' () {
       this.$store.commit('ui/queueFocused', null)
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index 22c16db51..57de531df 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -163,7 +163,6 @@ import axios from 'axios'
 import TrackRow from '~/components/audio/track/Row.vue'
 import TrackMobileRow from '~/components/audio/track/MobileRow.vue'
 import Pagination from '~/components/Pagination.vue'
-import { unique } from '~/utils/filters'
 
 export default {
   components: {
diff --git a/front/src/components/playlists/Editor.vue b/front/src/components/playlists/Editor.vue
index aa3a1546d..824d3a555 100644
--- a/front/src/components/playlists/Editor.vue
+++ b/front/src/components/playlists/Editor.vue
@@ -127,46 +127,46 @@
         <div class="table-wrapper">
           <table class="ui compact very basic unstackable table">
             <draggable
-              v-model="plts"
+              v-model:list="plts"
               tag="tbody"
               @update="reorder"
+              item-key="_id"
             >
-              <tr
-                v-for="(plt, index) in plts"
-                :key="`${index}-${plt.track.id}`"
-              >
-                <td class="left aligned">
-                  {{ plt.index + 1 }}
-                </td>
-                <td class="center aligned">
-                  <img
-                    v-if="plt.track.album && plt.track.album.cover && plt.track.album.cover.urls.original"
-                    v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.urls.medium_square_crop)"
-                    alt=""
-                    class="ui mini image"
-                  >
-                  <img
-                    v-else
-                    alt=""
-                    class="ui mini image"
-                    src="../../assets/audio/default-cover.png"
-                  >
-                </td>
-                <td colspan="4">
-                  <strong>{{ plt.track.title }}</strong><br>
-                  {{ plt.track.artist.name }}
-                </td>
-                <td class="right aligned">
-                  <button
-                    class="ui circular danger basic icon button"
-                    @click.stop="removePlt(index)"
-                  >
-                    <i
-                      class="trash icon"
-                    />
-                  </button>
-                </td>
-              </tr>
+              <template #item="{ element: plt, index }">
+                <tr>
+                  <td class="left aligned">
+                    {{ plt.index + 1 }}
+                  </td>
+                  <td class="center aligned">
+                    <img
+                      v-if="plt.track.album && plt.track.album.cover && plt.track.album.cover.urls.original"
+                      v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.urls.medium_square_crop)"
+                      alt=""
+                      class="ui mini image"
+                    >
+                    <img
+                      v-else
+                      alt=""
+                      class="ui mini image"
+                      src="../../assets/audio/default-cover.png"
+                    >
+                  </td>
+                  <td colspan="4">
+                    <strong>{{ plt.track.title }}</strong><br>
+                    {{ plt.track.artist.name }}
+                  </td>
+                  <td class="right aligned">
+                    <button
+                      class="ui circular danger basic icon button"
+                      @click.stop="removePlt(index)"
+                    >
+                      <i
+                        class="trash icon"
+                      />
+                    </button>
+                  </td>
+                </tr>
+              </template>
             </draggable>
           </table>
         </div>
@@ -177,6 +177,7 @@
 
 <script>
 import { mapState } from 'vuex'
+import { computed } from 'vue'
 import axios from 'axios'
 import PlaylistForm from '~/components/playlists/Form.vue'
 
@@ -191,9 +192,15 @@ export default {
     playlist: { type: Object, required: true },
     playlistTracks: { type: Array, required: true }
   },
+  setup (props) {
+    const plts = computed(() => {
+      return props.playlistTracks.map((plt, index) => ({ ...plt, _id: `${index}-${plt.track.id}` }))
+    })
+
+    return { plts }
+  },
   data () {
     return {
-      plts: this.playlistTracks,
       isLoading: false,
       errors: [],
       duplicateTrackAddInfo: {},
diff --git a/front/yarn.lock b/front/yarn.lock
index 9acf70eb8..2b8f31cc3 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -6119,10 +6119,10 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-sortablejs@1.10.2:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
-  integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
+sortablejs@1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
+  integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==
 
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
@@ -6809,12 +6809,12 @@ vue@^2.6.12:
     "@vue/compiler-sfc" "2.7.10"
     csstype "^3.1.0"
 
-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.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
+  integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==
   dependencies:
-    sortablejs "1.10.2"
+    sortablejs "1.14.0"
 
 vuex-persistedstate@4.1.0:
   version "4.1.0"