Vue.js: Как создать перетаскиваемые элементы списка, поддерживающие несколько целевых списков, используя материал Vue.

Question

Я довольно новичок в Vue.js и компоненте vue-draggable, и я действительно могу использовать некоторую помощь по созданию компонента, подобного Trello.Итак, я пытаюсь создать компонент, в котором люди могут перетащить свой личный навык из первого списка и перетащить его в один из четырех других списков.Каждый из этих четырех списков обозначает другой уровень знаний (базовый, продвинутый, профессиональный, экспертный).Кроме того, я использую материал vue, который может быть проблемой в сочетании с vue draggable.

Я уже рассматривал эту проблему Vue Draggable - несколько списков , но мне кажется, что главное отличие заключается в том, что я использую вложенную структуру для списка доступных навыков.Кроме того, я использую не просто простые элементы HTML, а полезный материал, чтобы получить красивый список с разделами для обозначения конкретной темы.Где я пропускаю главное, чтобы заставить его работать?Нужно ли мне реализовывать всю обработку изменений для всех списков самостоятельно или это покрывается простым использованием v-модели?

<template>
    <div>

        <md-card class="md-layout-item">
            <md-card-header>
                <div class="md-title">Fähigkeiten</div>
            </md-card-header>

            <md-card-content>
                <div class="md-layout">
                    <div class="md-layout-item md-size-35 column" name="available-skills" id="available-skills">
                        <md-subheader>Fähigkeiten</md-subheader>

                        <md-list md-expand v-for="(section, index) in availableSkills">
                                <md-list-item md-expand>
                                    <span class="md-list-item-text">{{section.sectionName}}</span>

                                    <md-list slot="md-expand">
                                        <draggable v-model="section.skills" id="availableSkills" class="dragArea" :options="{group: 'skills'}">
                                            <md-list-item v-for="(skill, index) in section.skills" :key="skill.id" :index="index"
                                                          @start="drag=true" @end="drag=false">
                                                            {{skill.name}}
                                            </md-list-item>
                                        </draggable>
                                    </md-list>

                                </md-list-item>
                        </md-list>

                    </div>
                    <div class="md-layout-item md-size-15 column" name="basic-skills" id="basic-skills">
                        <md-list>
                            <md-subheader>●○○○</md-subheader>
                            <draggable v-model="basicSkills" id="basicSkills" class="dragArea" :options="{group: 'skills'}">
                                <md-list-item v-for="(skill, index) in basicSkills">{{skill.name}}</md-list-item>
                            </draggable>
                        </md-list>
                    </div>
                    <div class="md-layout-item md-size-15 column" name="advanced-skills" id="advanced-skills">
                        <md-list>
                            <md-subheader>●●○○</md-subheader>
                        </md-list>
                    </div>
                    <!-- ... other similar lists -->
                </div>

            </md-card-content>

        </md-card>

    </div>
</template>

<script>
    import draggable from 'vuedraggable';

    export default {
        name: 'Skills',
        components: {draggable},
        mixins: [],
        data: () => ({
            skillsSaved: false,
            sending: false,
            basicSkills: [],
            advancedSkills: [],
            professionalSkills: [],
            expertSkills: [],
            availableSkills: [{
                sectionName: 'Methodik',
                skills: [
                    {
                        name: 'Scrum',
                        id: 0,
                    },
                    {
                        name: 'Wasserfall',
                        id: 1,
                    },
                    {
                        name: 'Kanban',
                        id: 2,
                    }
                ]
            },
                {
                    sectionName: 'Programmiersprachen',
                    skills: [
                        {
                            name: 'Kuba',
                            id: 10,
                        },
                        {
                            name: 'C Stumpf',
                            id: 11,
                        },
                        {
                            name: 'C--',
                            id: 12,
                        }
                    ]
                }],
        }),
        methods: {
        },
    };
</script>

<style lang="scss" scoped>
    .column {
        border: lightgrey solid 1px;
    }

    .dragArea {
        background-color: lightblue;
    }

</style>

В настоящее время я могу перетаскивать элемент из первого списка.Но как только я попадаю во второй список (базовые знания), ничего не происходит.Я бы ожидал, что элемент будет удален из списка доступных навыков и добавлен в соответствующий другой список.Также было бы здорово подавить ручное упорядочение с помощью перетаскивания внутри списков.

Любая подсказка действительно приветствуется.Заранее спасибо.