(Shopware 6) Integrating a custom npm package into administration

I want to try to integrate the functionality of the vuedraggable package https://www.npmjs.com/package/vue-draggable into the administration of Shopware 6 (Version 6.6.10.0).

I’ve followed this guide
https://developer.shopware.com/docs/guides/plugins/plugins/plugin-fundamentals/using-npm-dependencies.html , nevertheless I still seem to be getting some errors.

My current files:

Resource/app/administration/build/webpack.config.js:

const { join, resolve } = require('path');

module.exports = () => {
    return {
        resolve: {
            alias: {
                '@chartjs': resolve(
                    join(__dirname, '..', 'node_modules', 'vuedraggable')
                ),
            }
        }
    };
}

I’ve also tried the following example as well:

module.exports = (params) => {
    return { 
        resolve: { 
            modules: [
                `${params.basePath}/Resources/app/storefront/node_modules`,
            ],
       } 
   }; 
}

The administration component I’m trying to override (index.js)

import template from './sw-product-detail.html.twig';
import './sw-product-detail.scss';
import Draggable from "vuedraggable";


const { Criteria } = Shopware.Data
const { Mixin } = Shopware;

Shopware.Component.override('sw-product-detail-base', {
    template,
    components: {
        Draggable
    },

    data() {
        return {
            items: [
                { id: 1, name: "Item 1" },
                { id: 2, name: "Item 2" },
                { id: 3, name: "Item 3" }
            ]
        };
    }
});

The administration component I’m trying to override (twig template)

{% block sw_product_detail_base_media %}
    {% parent() %}
    {% block media_list %}
        <sw-card>
         <h2>Draggable List</h2>
          <Draggable v-model="items" item-key="id">
           <template #item="{ element }">
            <div class="draggable-item">
              {{ element.name }}
            </div>
           </template>
          </Draggable>
        </sw-card>
    {% endblock %}
{% endblock %}

Right now, I’m just trying to reproduce a very simple draggable list. The code above works fine in a standard vue project and produces the following result.

Code example from my custom vue project:

<script>
import Draggable from "vuedraggable";


export default {
  components: {
    Draggable
  },
  data() {
    return {
      items: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" },
      ],
    };
  },
};
</script>

<template>
  <div>
    <h2>Draggable List</h2>
    <Draggable v-model="items" item-key="id">
      <template #item="{ element }">
        <div class="draggable-item">
          {{ element.name }}
        </div>
      </template>
    </Draggable>
  </div>
</template>

<style>
.draggable-item {
  padding: 10px;
  margin: 5px;
  background-color: lightgray;
  cursor: grab;
}
</style>

Shopware however, seems to struggle with loading the component itself, as I end up having this error message when trying to render the list:

I think my general approach is correct, as I’ve tried it with some other packages, that didnt involve custom vue components and it worked just fine.

Rendering components from other packages however, seems to produce this issue.

Any help would be greatly appreciated!

Thank you in advance.