title: Drag an element but drop an array of other elements
body: <p>I'm using the <a href="https://github.com/SortableJS/Vue.Draggable" rel="nofollow noreferrer">Vue.Draggable</a> library that is based on the <a href="https://github.com/SortableJS/Sortable" rel="nofollow noreferrer">SortableJS</a> library.</p>
  <p>In my code I have 2 draggable lists but I have a third one that is not incorporated with simple elements.</p>
  <p>The third list has an array of object with an endpoint entry in each one, and when I drop my element I want to do a function that get an array of objects from the endpoint and merge it with the targgeted list.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var vm = new Vue({
    el: "#main",
    data: {
      list: [{
        name: "John"
      }, {
        name: "Joao"
      }, {
        name: "Jean"
      }],
      list2: [{
        name: "Juan"
      }, {
        name: "Edgard"
      }, {
        name: "Johnson"
      }],
      list3: [{
        name: "First",
        endpoint: 'http://api.com/first'
      }, {
        name: "Second",
        endpoint: 'http://api.com/second'
      }, {
        name: "Third",
        endpoint: 'http://api.com/third'
      }]
    },
    methods: {
      getAllTheFirstNames (evt) {
          // i want to do something like this
        axios.get(evt.elementDragged.endpoint)
          .then(res =&gt; {
              evt.dropList.add(res.data /* res.data is an array of names */)
          })
      },
    
      add: function() {
        this.list.push({
          name: 'Juan'
        });
      },
      replace: function() {
        this.list = [{
          name: 'Edgard'
        }]
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.normal {
    background-color: grey;
  }
  
  .drag {
    background-color: green;
  }
  
  .dragArea {
    min-height: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"&gt;&lt;/script&gt;
  &lt;div id="main"&gt;
    &lt;h1&gt;Vue Draggable&lt;/h1&gt;           
    &lt;div class="drag"&gt;
      &lt;h2&gt;List 1 Draggable&lt;/h2&gt;
      &lt;draggable v-model="list" class="dragArea" :options="{group:'people'}"&gt;
        &lt;div v-for="element in list"&gt;{{element.name}}&lt;/div&gt;
      &lt;/draggable&gt;
  
      &lt;h2&gt;List 2 Draggable&lt;/h2&gt;
      &lt;draggable v-model="list2" class="dragArea" :options="{group:'people'}"&gt;
        &lt;div v-for="element in list2"&gt;{{element.name}}&lt;/div&gt;
      &lt;/draggable&gt;
  
      &lt;h2&gt;List 3 Draggable&lt;/h2&gt;
      &lt;draggable v-model="list3" class="dragArea" :options="{group:'people'}" @end="getAllTheFirstNames"&gt;
        &lt;div v-for="element in list3"&gt;{{element.name}}&lt;/div&gt;
      &lt;/draggable&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here's the <a href="https://jsfiddle.net/arwmy0bq/" rel="nofollow noreferrer">fiddle</a></p>