VueDraggable multiDrag and selected-class props not work in Nuxt.js - vue.js

Question

I currently use vue-draggable to make drag and drop component in my latest Nuxt project.
My package.json is like that (with the latest version of vuedraggable)
"nuxt": "^2.14.12",
"vuedraggable": "^2.24.3",
// I also use those plugins
"#nuxtjs/vuetify": "^1.11.3",
First of all, I tried to make mini-sample referred to this sample.
And I made code like below
I just changed :list to v-model in draggable tag, and use nuxt-property-decorator instead of export default. referred to latest vue-draggable
<template>
<div id="app">
<div class="flex">
<div class="flex-1">
Target Category Items: {{ targetCategoryItems.length }}
<div class="draggable-container">
<draggable
v-model="targetCategoryItems"
draggable=".element"
group="elements"
:multi-drag="true"
class="draggable"
selected-class="selected-item"
>
<div
v-for="element in targetCategoryItems"
:key="element.ItemID"
class="draggable-element"
>
<div class="item-text">
<div>[{{ element.ItemID }}]</div>
<div>{{ element.ItemName }}</div>
</div>
</div>
</draggable>
</div>
</div>
<div class="flex-1">
Source Category Items: {{ sourceCategoryItems.length }}
<div class="draggable-container">
<draggable
v-model="sourceCategoryItems"
draggable=".element"
group="elements"
:multi-drag="true"
class="draggable"
selected-class="selected-item"
#select="selectItems"
>
<div
v-for="element in sourceCategoryItems"
:key="element.ItemID"
class="draggable-element"
>
<div class="item-text">
<div>[{{ element.ItemID }}]</div>
<div>{{ element.ItemName }}</div>
</div>
</div>
</draggable>
</div>
</div>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
components: { draggable },
data() {
return {
sourceCategoryItems: [
{ ItemID: "566GR", ItemName: "Leaf Urn", PhotoName: "" },
{ ItemID: "575GD", ItemName: "Italian Villa Planter", PhotoName: "" },
{ ItemID: "576GR", ItemName: "Palm Topiary Planter", PhotoName: "" },
],
targetCategoryItems: [
{ ItemID: "F238", ItemName: "Cuadrado Side Table", PhotoName: "" },
{ ItemID: "F239", ItemName: "Triangulo Side Table", PhotoName: "" },
{ ItemID: "F285", ItemName: "Kew Occassional Table", PhotoName: "" },
{ ItemID: "F286", ItemName: "Tuileries Coffee Table", PhotoName: "" },
{ ItemID: "F296", ItemName: "Heligan Table", PhotoName: "" },
],
};
},
methods: {
toggle(todo) {
todo.done = !todo.done;
},
selectItems(event) {
console.log(event.items);
},
},
};
</script>
<style scoped>
.flex {
display: flex;
}
.flex-1 {
flex: 1;
}
.draggable-container {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
.draggable-element {
padding: 10px;
margin: 10px;
background-color: lightgrey;
}
.selected-item {
background-color: red;
opacity: 0.5;
}
</style>
The result is like that
It seems that there is no problem, but I clicked the left side table, background-color never changed and I couldn't drag and drop any items.
I also checked the same issues, "SortableJS / Vue.Draggable multi-drag option not working" and "Use with Nuxt? #525". So I tried to make drag.js in src/plugins, but it doesn't work either.
So, how can I correctly use muli-drag and selected-class props in Nuxt?
This is issues Github repository.