Estoy usando Vuedraggable (Sortable JS) para intentar agrupar elementos. Los elementos en sí mismos no deben tener elementos secundarios (como las demostraciones para el uso de Sortable JS), sino que deben agruparse en un objeto principal de tipo "grupo". Tengo problemas para evitar que los grupos se arrastren dentro de otros grupos, ya que en el primer nivel, tanto los objetos de grupo como los objetos de formulario están en el mismo "grupo ordenable".

1. Hay objetos de formulario y objetos de grupo en el mismo formulario de primer nivel
2. Los objetos y los objetos de grupo deben poder ordenarse en el formulario de primer nivel
3. Los objetos deben poder arrastrarse dentro y fuera de los grupos.
4. Los grupos NO deben poder arrastrarse dentro de otros grupos

#4 es el problema actual. Actualmente es posible arrastrar un grupo dentro de otro grupo. No es fácil de hacer... si primero arrastra un objeto de un grupo a otro grupo, esto parece hacer que sea más fácil agarrar el primer grupo y arrastrarlo al segundo grupo.

Aquí hay un codesandbox que ilustra el problema: https://codesandbox.io/s/vuedraggable-nested-simplified-wc-tr6mx?file=/src/components/NestedDraggable.vue