Опираетесь на существующий пакет Vue для упрощения интерфейса?

Question

Существует пакет Vue Draggable (построенный на Sortable JS), который обеспечивает функциональность перетаскивания для компонентов Vue.У него такой синтаксис:

<div class="outer-element">
    <draggable v-model="myArray" :options="{group:'people'}">
        <transition-group>
            <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
        </transition-group>
    </draggable>
</div>

Можно ли использовать директиву, скажем v-draggable, для достижения того же?Например, что-то вроде этого:

<div class="outer-element" v-draggable v-model="myArray" :options="{group:'people'}">
    <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</div>

Или даже разрешить статический контент, используя HTML 5 draggable:

<div class="outer-element" v-draggable>
    <div draggable="true">X</div>
    <div draggable="true">Y</div>
    <div draggable="true">Z</div>
</div>

Где код будет вставлять соответствующие прослушиватели событий для всех тех детей, где draggable верно?

В идеале не нужно ограничивать верхний уровень div, может быть table, ul, ol и т. Д.