Vue.draggable: Drag/sort multiple components

[TheAustinG]

Is it possible to use Draggable to sort multiple components?

For example:

<div v-for="step in trainingSteps">
    <draggable :list="step.Content">
        <text-component v-for="content in step.Content" :key="content.Id" :content="content" :step="step" v-if="content.Type == 'Text'"></text-component>
    </draggable>
    <draggable :list="step.Content">
        <question-component v-for="content in step.Content" :key="content.Id" :content="content" :step="step" v-if="content.Type == 'Question'"></question-component>
    </draggable>
</div>

Or:

<div v-for="step in trainingSteps">
    <draggable :list="step.Content">
        <text-component v-for="content in step.Content" :key="content.Id" :content="content" :step="step" v-if="content.Type == 'Text'"></text-component>
        <question-component v-for="content in step.Content" :key="content.Id" :content="content" :step="step" v-if="content.Type == 'Question'"></question-component>
    </draggable>
</div>

I would like to be able to use different components depending on the type of content from the same list so that they can use different templates. I'm still new to Vue though so maybe I'm going about this wrong... but is this possible with Vue.Draggable? I want to be able to drag the 'question-component' above the 'text-component' for example.

[David-Desmaisons]

The list value should be the same as the v-for of the inner element. So none of your mark-up will work.
Create an intermediate component will work thougth:

paragraph-component:
````html
````

<draggable :list="step.Content">
    <paragraph-component :content="content"  :key="content.Id" />
</draggable>