используя vuedraggable со списком в другом списке в нем

Я пытаюсь использовать vuedraggable для следующего кода:

import draggable from "vuedraggable";

export default {
    components: {
        draggable
    },
    data() {
        return {
          selectedOrganization: {
            groups: [
              {
                name: 'group_1', 
                spaces: [{name: 'space_1'}, {name: 'space_5'}]
              },
              {
                name: 'group_2', 
                spaces: [{name: 'space_2'}]
              },
              {
                name: 'group_3', 
                spaces: [{name: 'space_3'}]
              },
              {
                name: 'group_4', 
                spaces: [{name: 'space_4'}]
              },
            ],
          }
        };
    },
  }
<b-row
      class="mt-5 mb-5"
      v-for="(item, index) in selectedOrganization.groups"
      :key="item.id"
  >
      <b-col cols="12">
          <div class="linear-create lighter-font">
              <div
                  class="main-space-divider"
              >
                <span
                    class="font-weight-700 font-size-1-1"
                    @click="toggleInput(index)"
                    v-else
                >
                    {{ item.name }}
                </span>
              </div>
          </div>

          <div v-for="space in item.spaces">
            {{space.name}}
          </div>
      </b-col>
  </b-row>

Мне нужны перетаскиваемые пространства, которые можно перетаскивать между группами. Я имею в виду, что каждая группа должна быть взаимозаменяемой между каждой группой. Есть ли способ сделать это с помощью vue draggable или есть другой способ сделать это?


person Niaz Estefaie    schedule 30.01.2021    source источник