I am using Vuedraggable (Sortable JS) to try and accomplish grouping of items. The items themselves shouldn't have children (as the demos for Sortable JS use), but instead should be grouped in a parent "group" type object. I'm having issues stopping groups from being dragged inside of other groups, as at the first level, both the Group Objects and Form Objects are in the same "sortable group".

1. There are Form Objects and Group Objects at the same 1st level Form
2. Objects and Group Objects should be sortable at the first level Form
3. Objects should be draggable into and out of groups
4. Groups should NOT be able to be dragged inside of other groups

#4 is the current issue. Its currently possible to drag one group inside another group. Its not easy to do... if you first drag an object from one group into another group, this seems to make it easier to subsequently grab the fist group and drag it into the 2nd group.

Here is a codesandbox illustrating the issue: https://codesandbox.io/s/vuedraggable-nested-simplified-wc-tr6mx?file=/src/components/NestedDraggable.vue