vuedraggable custom component setup in Nuxt3

I'm having a hard time getting vuedraggable (https://github.com/SortableJS/vue.draggable.next) to work in Nuxt 3. Here is the steps I followed so far.

npm install vuedraggable@next

Then created this file in /plugins/vue-draggable.client.js

import draggable from 'vuedraggable'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('draggable', draggable);
})

Then in the template I did this

<template>
  <draggable v-model="items" handle=".handle">
    <div class="item" v-for="item in items">
      <div class="title">{{item.title}}</div>
      <div class="handle">Sort</div>
    </div>
  </draggable>
</template>

<script setup>
let items = $ref([
  {
    title: 'Item 1'
  },
  {
    title: 'Item 2'
  },
  {
    title: 'Item 3'
  }
]);
</script>

In the console I'm getting this error:

[Vue warn]: Failed to resolve component: draggable
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

When the template renders it looks like this:

I'm not sure what step i'm missing?

So turns out I was reading the documentation way wrong, there is a new syntax for the Vue3 version of VueDraggable:

<draggable v-model="items" handle=".handle">
 <template #item="{element: item}">
  <div class="item">
    <div class="title">{{item.title}}</div>
    <div class="handle">Sort</div>
  </div>
 </template>
</draggable>

That's the correct syntax.

One issue I ran into was the template can only have one root element, now it's working great.