Trouble with Vue3 and vuedraggable: Unable to Drag Elements Between Outermost Layers

Question

I want to drag an element between the outermost elements, but I can't seem to do it successfully. There's only one specific and small spot where I accidentally discovered I can drag it successfully.

Code sandbox playground

Core code fragment

<template>
  <draggable
    :list="data.children || []"
    :group="{ name: 'nested' }"
    :tag="handleTag(data.type)"
    itemKey="id"
    ghostClass="ghost"
    :swapThreshold="0.1"
    :fallbackOnBody="true"
    :animation="150"
    direction="vertical"
    :emptyInsertThreshold="10"
  >
    <template #item="{ element }">
      <button v-if="element.type === 'button'">button</button>
      <div v-else-if="element.type === 'text'">some text</div>
      <NestedDraggable v-else :data="element" />
    </template>
  </draggable>
</template>
<script lang="ts" setup>
import draggable from "vuedraggable";

interface Props {
  data: { id: string; type: string; group: string; children: any[] };
}

const props = withDefaults(defineProps<Props>(), {});

const handleTag = (type: string | undefined) => {
  if (!type) return "div";

  switch (type) {
    case "section": {
      return "Section";
    }
    case "row": {
      return "Row";
    }
    case "column": {
      return "Column";
    }
    default: {
      return type;
    }
  }
};
</script>

I expect it to be dragged to the target position correctly.

I've researched and tried modifying vuedraggable parameters (swapThreshold, invertSwap, emptyInsertThreshold), and also adjusted the spacing between elements, but haven't been able to achieve the desired result.

I have a complex nesting requirement, and I've been struggling with a strange issue for two days. I hope someone can provide a solution. Thank you!