Cannot drag & drop when using a custom slot inside the #item slot

[VasilisNikiforidis]

Before I explain my confusion, I want to say that I have read the issue at #24 , but what I don't understand is why does it still happen when I only render a single item inside that slot?
With some debugging, I noticed that the defaultNodes in the code below are some text elements whose direct children (they only have 1 child) are the components I actually want to be draggable.

Here is my code:

DraggableWrapper.vue

<template>
    <draggable
        class="paletteGroup"
        :group="{ name: groupName, pull: 'clone', put: false }"
        :sort="false"
        :empty-insert-threshold="0"
        :clone="onClone"
        :model-value="elements"
        :item-key="itemKey"
        @start="onStart"
        @end="onEnd"
    >
        <template #item="dragOpts">
            <slot name="item" v-bind="dragOpts" />
        </template>
    </draggable>
</template>

PaletteComponents.vue

<template>
      <draggable-wrapper
            :group-name="category.key"
            :elements="category.items"
      >
            <template #item="{ element }">
                <palette-item
                    :item="element"
                    :group-key="category.key"
                    class="paletteItem"
                />
            </template>
      </draggable-wrapper>
</template>

PaletteItem.vue

<template>
    <div>
        <q-btn
            :id="`${item.key}--component`"
            class="fdp-block"
            size="sm"
            padding="0"
            stack
            unelevated
            flat
            no-caps
        >
            <q-img
                :src="item.icon"
                fit="contain"
            />
        </q-btn>
        <label class="component-label">{{ item.label }} </label>
    </div>
</template>

Any insight or potential fix is welcome. Wrapping the slot with a div solves the issue but creates a lot of other issues with my layout.

[hasancuneytozer]

"These problems occur in named slots. if you use it anonymously. Components will work properly in the slot." Working in vue 3.0.0.beta version but it doesn't work in 3.2.37.

change DraggableWrapper.vue

<template>
    <draggable
        class="paletteGroup"
        :group="{ name: groupName, pull: 'clone', put: false }"
        :sort="false"
        :empty-insert-threshold="0"
        :clone="onClone"
        :model-value="elements"
        :item-key="itemKey"
        @start="onStart"
        @end="onEnd"
    >
        <template #item="dragOpts">
            <slot  v-bind="dragOpts" />
        </template>
    </draggable>
</template>

PaletteComponents.vue

<template>
      <draggable-wrapper
            :group-name="category.key"
            :elements="category.items"
      >
            <template v-slot="{ element }">
                <palette-item
                    :item="element"
                    :group-key="category.key"
                    class="paletteItem"
                />
            </template>
      </draggable-wrapper>
</template>