Here is a link to the code sandbox: Nested Draggable Code Sandbox
The nesting in this code is controlled through directives, specifically using v-if:
<template>
<draggable class="dragArea" tag="ul" :list="tasks" :group="{ name: 'g1' }">
<li v-for="el in tasks" :key="el.name">
<generic-item :taskItem="el"> </generic-item>
<p>{{ el.name }}</p>
<div v-if="el.type === 'inventoryCategory'">
<nested-draggable :tasks="el.tasks" />
</div>
</li>
</draggable>
</template>
This structure creates recursion that stops at the category level where each section includes a category and a category includes none or more items.
The problem arises when sections can be dragged into one another. The desired behavior is for a section to only contain items. How can this conflict be resolved?
The current approach infers the type by checking a field ("type": "inventoryCategory") against possible values and rendering tags accordingly.