Vue3のCDNでDraggableを使用したい。

前提・実現したいこと

Vue3を使用してタスク管理ツールを作成しようとしています。
訳あってCLI環境での開発が行えずCDNでライブラリを読み込んで作成しています。
そこで、CDNのvue-Draggable-nextを使用したいのですがうまく動いてくれません。
デベロッパーツールでコンソールを確認しながら作業を行っていますがエラー出ていないので原因が特定できません。
初歩的な質問で申し訳ございませんがご教授いただければ幸いです。

[環境]
Widnows 10
Chromeのみでの動作（CLI未使用）
Vue3

[index.html]
<html>
<body>
  <div class="flex m-10">
    <draggable id="app" class="dragArea list-group w-full" :list="list" @change="log">
      <div
        class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center"
        v-for="element in list"
        :key="element.name"
      >
        {{ element.name }}
      </div>
    </draggable>
  </div>
</body>

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-draggable-next@2.0.1/dist/vue-draggable-next.global.js"></script>
<script>
  Vue.createApp({
    data() {
      return {
        enabled: true,
        list: [
          { name: 'John', id: 1 },
          { name: 'Joao', id: 2 },
          { name: 'Jean', id: 3 },
          { name: 'Gerard', id: 4 },
        ],
        dragging: false,
      }
    }
   })
    .component('draggable', {
       VueDraggableNext,
       methods: {
         log(event) {
           console.log(event)
         },
       },
  }).mount('app')
</script>
</html>

試したこと

importなどで読み込もうとしましたが、CLI環境でなければ使用できないみたいでエラー読み込めませんでした。
console.log(VueDraggableNext)の出力ではライブラリは正常に読み込まれているように見えます。
下記のURLのソースを参考にしていて、CLI環境では動くことは確認できました。
ですので、CDN用に変更した箇所が間違っているのではないかと考えていますが、手詰まりとなってしまっています。

https://github.com/anish2690/vue-draggable-next

分かりづらい点などございましたら随時追記していきますので、何卒よろしくお願いいたします。