Vue.jsのDraggableの使い方

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.23.2/vuedraggable.umd.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <div id="app">
        <draggable @end="onEnd" tag="ul" v-model="list_items" v-bind="dragOptions" class="list-group mb-3 py-3 border-radius border" >
          <li  v-for="part in list_items" :key="part.name"  class="list-group-item d-flex justify-content-between lh-sm " >
            {{ part.name }}
          </li>
        </draggable>

        <!-- 複数の領域をまたがってドラッグアンドドロップしたい場合は v-bindやoptionを合わせておく -->
        <draggable @end="onEnd" tag="ul" v-model="picked_list_items" v-bind="dragOptions" class="list-group mb-3 py-3 border-radius border" >
          <li  v-for="part in picked_list_items" :key="part.name"  class="list-group-item d-flex justify-content-between lh-sm " >
            {{ part.name }}
          </li>
        </draggable>
    </div>

  const MainApp = new Vue( {
    el: '#app',
    data: {
         list_items:[{"name":"item1"},{"name":"item2"},{"name":"item3"}], // D&Dしたいリストの初期データ
         picked_list_items: []
    },
    computed: {
      dragOptions() { // D&D中のエフェクトなどはここで指定
        return {
          animation: 200,
          group: "list_items_group", // 同じグループ間でドラッグアンドドロップできる
          disabled: false,
          ghostClass: "border-5" // D&Dに枠線を太くする draggableのタグにghost-class="border-5"と書いてもよい
        };
      }
    },
    methods: {
      onEnd(e){
        // D&Dし終わった時の処理を書く
        let txt = 'picked item(s): ';
        for(const idx in this.picked_list_items){
          txt += this.picked_list_items[idx].name + ' ';
        }
        console.log(txt);// picked item(s): item1 item3 
      },
    }
 });