Vue Draggable

NestedBoards.vue

<template>
    <draggable :list="children" v-if="children" :options="{ group: { name: parentId },
                chosenClass: 'draggable--dragging',
                handle: '.draggable__handle',
                dataIdAttr: 'data-id',
            }" @update="onUpdate" class="collapse" :id="'toggle-'+parentId">
        <ul v-for="child in children" :data-id="child.id" class="draggable">
            <li class="db-forum-board">
                <span class="draggable__handle"><i class="fa fa-bars"></i></span>
                <div class="db-forum-board__title">
                    {{ child.title }}
                    <span class="db-forum-board__title-sub">{{ child.description  }}</span>
                </div>
                <div class="db-forum-board__expand" data-toggle="collapse" :data-target="'#toggle-'+child.id" v-if="child.children.length > 0">
                    <i class="fa fa-caret-down"></i>
                </div>
                <a :href="editUrl(child.id)" class="db-forum-board__edit"><i class="fa fa-edit"></i></a>
            </li>
            <nested-boards v-if="child.children" :children="child.children" :parent-id="child.id"></nested-boards>
            <!-- NOTE: THIS IS THIS SAME COMPONENT REUSED WITHIN ITSELF -->
        </ul>
    </draggable>
</template>
<script>
    import draggable from 'vuedraggable';
    export default {
        props: ['children', 'parentId'],
        components: {
            draggable,
        },
        mounted: function() {
        },
        data: function() {
            return{
            }
        },
        methods:{
            editUrl: function(id) {
                // yes i know, computed :P
                return '/dashboard/forums/'+id+'/edit'
            },
            onUpdate: function(id) {
                EventBus.fire('sorting::change');
                // On the listen event, I send the entire list of boards to the backend for sorting
                // Since Vue Sortable works like Vue usually does, when you update the order, the changes are reflected in the data
            }
        }
    }
</script>