How can I drag items from list in component to list inside another component using Vue draggable?

Question

I am trying to move items from one list to another using vue draggable, but the lists are inside of a component and I can't get it to work. The items are able to move inside a list but not from a list to another.

I have got a Board component containing all the lists and a List component containing the draggable items.

This is the board component:

<template>
  <div class="board">
    <BoardMenu :users="this.users" :name="this.name"> </BoardMenu>
    <div class="boardContent">
      <Backlog></Backlog>
      <div class="lists">
        <List
          class="list"
          v-for="list in lists"
          :key="list.id"
          :id="list.id"
          :items="list.items"
          
        ></List>
      </div>
    </div>
  </div>
</template>

<script>
import BoardMenu from "./BoardMenu";
import Backlog from "./Backlog";
import List from "./List";
export default {
  name: "UserIcon",
  props: {
    id: Number
  },
  components: {
    BoardMenu,
    Backlog,
    List
  },
  data() {
    return {
      name: "BOARDNAME",
      users: [{ name: "Bram Coenders" }, { name: "Jasper van der Zwaan" }],
      lists: [
        {
          id: 1,
          items: [
            {
              type: "story",
              id: 1,
              listId: 1
            },
            {
              id: 2,
              listId: 1
            },
          ]
        },
        { id: 2, items: [] }
      ],
      backlog: { id: 2 }
    };
  },
};
</script>

And this is the List component:

<template>
  <div class="list">
    <div class="list-header">
      <h2 id="list-name">{{ name }}</h2>
      <p id="list-description">{{ description }}</p>
    </div>
    <draggable
      v-model="items"
      :list="this.id"
      class="list-list"
    >
      <div :id="item.id" class="list-item" v-for="item in items" :key="item.id">
        <div v-if="item.type == 'story'">
          <Story class="story" :id="item.id"></Story>
        </div>
        <div v-else>
          <Task class="task" :id="item.id"></Task>
        </div>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import Story from "./Story.vue";
import Task from "./Task.vue";
export default {
  name: "List",
  components: {
    Story,
    Task,
    draggable
  },
  props: {
    items: []
  },
  data() {
    return {
      name: "To do",
      description: "this sprint."
    };
  },
  methods :{
    newItem: function(){
      console.log("test")

    }
  }
};
</script>

Answer 1

Add :options='{group: "items"}' to your draggable component or you can just try to add the attribute group="items" (if you're using Vue 2.2+)