Есть ли способ изменить Vue JS перетаскиваемые элементы в модель для передачи данных

Question

Мое представление содержит две колонки, в которые можно перетаскивать элементы. Есть ли способ передать значение перетаскиваемых элементов в функцию метода или массив возвращаемых данных?

Это мое представление, которое содержит два столбца , куда мы можем перетащить {{element.name}} элементы

<b-col lg="7" style="background-color:#fafafa; overflow: scroll; height: 600px;">
  <div class="bv-example-row">
    <b-row>
     <b-col>
      <p class="btbSideTitle"><b>SIDE A</b></p>

      /** I tried to convert dragged items into input fields, which did not help as well **/

       <form id="signup-form" @submit.prevent="processForm">
                  <b-col  class="border border-info rounded">
                    <b-row class="my-1">
                      <b-col sm="3">
                        <label for="input-small">07:00 PM</label>
                      </b-col>
                      <b-col sm="9">
                        <b-form-input id="input-small" size="sm" name="teamName1" v-model="teamName1" placeholder="TEAM NAME"></b-form-input>
                      </b-col>
                    </b-row>
                   <draggable id="first" data-source="juju" :list="list2" class="list-group" draggable=".item" group="a" style="height: 300px; border-style: outset;">

                      <div class="list-group-item item" v-for="element in list2" :key="element.name">
                        <input v-model="element.name">
                      </div>

                    </draggable>
                    <br />
                    <b-row>
                      <b-col sm="3">
                        <b-button variant="primary" type="submit">Update</b-button>
                      </b-col>
                    </b-row>
                 </b-col>
                </form>
              </b-col>

              <b-col>
                <p class="btbSideTitle"><b>SIDE B</b></p>
                <b-col  class="border border-info rounded">
                  <b-row class="my-1">
                    <b-col sm="3">
                      <label for="input-small">07:00 PM</label>
                    </b-col>
                    <b-col sm="9">
                      <b-form-input id="input-small" size="sm" placeholder="TEAM NAME"></b-form-input>
                    </b-col>
                  </b-row>

                  <draggable id="first" data-source="juju" :list="list" class="list-group" draggable=".item" group="a" style="height: 300px; border-style: outset;">

                 <div class="list-group-item item" v-for="element in list" :key="element.name">
                   {{ element.name }}
                  </div>
               </draggable>
                <br/>
               <b-row>
                  <b-col sm="3">
                  <b-button variant="primary">Update</b-button>
                  </b-col>
               </b-row>
               <br/>
           </b-col>
       </b-col>
   </b-row>
</div>

Просмотр, который содержит два столбца со списком всех {{element.name}}, откуда мы можем назвать клиента

<b-col lg="3"  style="background-color:#f0f0f0; height: 450px; overflow:scroll;">
  <b>RESERVATIONS</b>
     <b-row>
        <b-col>
          <draggable :list="dataList3" class="list-group" draggable=".item" group="a">
            <div class="list-group-item item" v-for="element in dataList3" :key="element.name">
              {{ element.name }}
             </div>

             <div slot="footer" class="btn-group list-group-item" role="group" aria-label="Basic example">
             </div>

              <div class="list-group-item item" v-for="element in dataList1" :key="element.name">
                {{ element.name }}
              </div>
            </draggable>
              <br/>

              <b>Second Group</b>

              <draggable :list="dataList" class="list-group" draggable=".item" group="a">
                <div class="list-group-item item" v-for="element in dataList" :key="element.name">
                  {{ element.name }}
                </div>

                <div slot="footer" class="btn-group list-group-item" role="group" aria-label="Basic example" >
                </div>

                <div class="list-group-item item" v-for="element in dataList1" :key="element.name" > {{ element.name }} </div>
              </draggable>
        </b-col>
     </b-row>
</b-col>

Это мой сценарий

import draggable from "vuedraggable";

export default {
  name: 'App',
  components: {
    draggable
  },

  data() {
      return {
        teamName1: '',
        selected1: [], /** this will be objects of multiple dragged items **/

        dataList3: [
          { name: "David", id: 0 },
          { name: "John", id: 1 },
          { name: "Jay", id: 2 },
          { name: "Sony", id: 3 },
        ],

        dataList1: [
           { name: "Jack", id: 0 },
            { name: "Nick", id: 1 },
            { name: "Ryan", id: 2 }
        ]
      };
    },

 methods:{
 processForm: function() {
    console.log(
      {
        name: this.teamName1,
        selected1: this.selected1 
       /** this part does not print any data , how to print all dragged items of  {{ element.name }} here **/
      /** and pass it to selected1 **/
      }
   );
  }
}