VueDraggable multiDrag and selected-class props not work in Nuxt.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.