diff --git a/frontend/components/Item/PlaylistItems.vue b/frontend/components/Item/PlaylistItems.vue
index 5f353d636d7..47033aa4a2f 100644
--- a/frontend/components/Item/PlaylistItems.vue
+++ b/frontend/components/Item/PlaylistItems.vue
@@ -8,11 +8,11 @@
     <v-list v-if="!!children" color="transparent" two-line>
       <v-list-item-group class="list-group">
         <draggable
-          class="list-draggable"
-          v-bind="dragOptions"
           v-if="children.length > 0"
+          v-bind="dragOptions"
           v-model="children"
           :move="checkMove"
+          class="list-draggable"
         >
           <v-hover
             v-for="(item, index) in children"
@@ -80,44 +80,16 @@
 import { BaseItemDto } from '@jellyfin/client-axios';
 import Vue from 'vue';
 import { mapStores } from 'pinia';
+import { MoveEvent } from 'vuedraggable';
 import { itemsStore, playbackManagerStore } from '~/store';
 
 export default Vue.extend({
   props: {
-    item: {
+    playlist: {
       type: Object as () => BaseItemDto,
       required: true
     }
   },
-  methods: {
-    checkMove(evt: any) {
-      console.log(evt.draggedContext);
-      this.newIndex = evt.draggedContext.futureIndex;
-      this.oldIndex = evt.draggedContext.index;
-    },
-    getArtists(item: BaseItemDto): string | null {
-      if (item.Artists) {
-        return item.Artists.join(', ');
-      } else {
-        return null;
-      }
-    },
-    isPlaying(item: BaseItemDto): boolean {
-      if (this.playbackManager.getCurrentItem == undefined) {
-        return false;
-      }
-      return item.Id == (this.playbackManager.getCurrentItem as BaseItemDto).Id;
-    },
-    playQueueFrom(playFromIndex: number): void {
-      this.playbackManager
-        .play({
-          item: this.item,
-          startFromIndex: playFromIndex,
-          initiator: this.item
-        })
-        .then(() => this.items.fetchAndAddPlaylist(this.item.Id as string));
-    }
-  },
   data() {
     return {
       currentTab: 0,
@@ -138,13 +110,13 @@ export default Vue.extend({
     children: {
       get(): BaseItemDto[] {
         return this.items.getChildrenOfParentPlaylist(
-          this.item.Id
+          this.playlist.Id
         ) as BaseItemDto[];
       },
-      set(newValue: BaseItemDto[]): void {
+      set(_: BaseItemDto[]): void {
         if (this.oldIndex != null && this.newIndex != null) {
           this.items.movePlaylistItem(
-            this.item,
+            this.playlist,
             this.children[this.oldIndex],
             this.newIndex
           );
@@ -163,6 +135,36 @@ export default Vue.extend({
         }
       }
     }
+  },
+  methods: {
+    checkMove(evt: MoveEvent<BaseItemDto>) {
+      this.newIndex = evt.draggedContext.futureIndex;
+      this.oldIndex = evt.draggedContext.index;
+    },
+    getArtists(item: BaseItemDto): string | null {
+      if (item.Artists) {
+        return item.Artists.join(', ');
+      } else {
+        return null;
+      }
+    },
+    isPlaying(item: BaseItemDto): boolean {
+      if (this.playbackManager.getCurrentItem === undefined) {
+        return false;
+      }
+
+      return (
+        item.Id === (this.playbackManager.getCurrentItem as BaseItemDto).Id
+      );
+    },
+    async playQueueFrom(playFromIndex: number): Promise<void> {
+      await this.playbackManager.play({
+        item: this.playlist,
+        startFromIndex: playFromIndex,
+        initiator: this.playlist
+      });
+      await this.items.fetchAndAddPlaylist(this.playlist.Id as string);
+    }
   }
 });
 </script>
diff --git a/frontend/pages/item/_itemId/index.vue b/frontend/pages/item/_itemId/index.vue
index 4ad0a45c4ed..de64919a9cc 100644
--- a/frontend/pages/item/_itemId/index.vue
+++ b/frontend/pages/item/_itemId/index.vue
@@ -245,7 +245,7 @@
           <collection-tabs :item="item" />
         </v-col>
         <v-col v-if="item.Type === 'Playlist'" cols="12">
-          <playlist-items :item="item" />
+          <playlist-items :playlist="item" />
         </v-col>
         <v-col cols="12">
           <related-items :id="$route.params.itemId" :item="item" />
diff --git a/frontend/store/items.ts b/frontend/store/items.ts
index 90fc0c6c062..5d7cb0b693b 100644
--- a/frontend/store/items.ts
+++ b/frontend/store/items.ts
@@ -65,11 +65,12 @@ export const itemsStore = defineStore('items', {
       }
     },
     /**
-     * Associate an item that has children with its children
+     * Moves a playlist item to another index.
      *
-     * @param parent
-     * @param children
-     * @returns - The children of the item
+     * @param parent The playlist containing the item to be moved.
+     * @param localChild The item in the playlist to be moved.
+     * @param index The new index of the item after being moved
+     * @returns A promise representing the resulting playlist after the item is moved.
      */
     async movePlaylistItem(
       parent: BaseItemDto,
@@ -101,16 +102,26 @@ export const itemsStore = defineStore('items', {
           ImageType.Thumb
         ]
       });
+
       const child = children.data.Items?.find(
-        (i) => i.Id == localChild.Id
+        (i) => i.Id === localChild.Id
       ) as BaseItemDto;
+
       await this.$nuxt.$api.playlists.moveItem({
         playlistId: parent.Id as string,
         itemId: child.PlaylistItemId as string,
         newIndex: index
       });
+
       return await this.fetchAndAddPlaylist(parent.Id as string);
     },
+    /**
+     * Adds a playlist and it's items to the local store.
+     *
+     * @param parent The playlist containing the children items.
+     * @param children The items in the playlist
+     * @returns The items in the playlist
+     */
     addPlaylist(parent: BaseItemDto, children: BaseItemDto[]): BaseItemDto[] {
       if (!parent.Id) {
         throw new Error("Parent item doesn't have an Id");
@@ -132,6 +143,12 @@ export const itemsStore = defineStore('items', {
 
       return this.getChildrenOfParentPlaylist(parent.Id) as BaseItemDto[];
     },
+    /**
+     * Fetches the items in a playlist and stores them locally.
+     *
+     * @param parentId The Item ID of the playlist
+     * @returns The items in the playlist.
+     */
     async fetchAndAddPlaylist(
       parentId: string | undefined
     ): Promise<BaseItemDto[]> {
@@ -167,15 +184,22 @@ export const itemsStore = defineStore('items', {
         })
       ).data;
 
-      if (childItems.Items) {
-        const parent = this.getItemById(parentId);
+      const parent = this.getItemById(parentId);
 
+      if (childItems.Items) {
         return this.addPlaylist(parent as BaseItemDto, childItems.Items);
       } else {
         // I think this just means it's an empty playlist...?
         return this.addPlaylist(parent as BaseItemDto, []);
       }
     },
+    /**
+     * Associate an item that has children with its children
+     *
+     * @param parent
+     * @param children
+     * @returns - The children of the item
+     */
     addCollection(parent: BaseItemDto, children: BaseItemDto[]): BaseItemDto[] {
       if (!parent.Id) {
         throw new Error("Parent item doesn't have an Id");