Vue-draggable, nesting, and groups

Hey guys I need some assistance with vue draggable used in a nested context with groups. Some back story; I'm building a landing page creator, that said my layout follows standard bootstrap layout

• section
  • container
    • row
      • col
      • col

That said I have a toolbox with 2 types of modules: Component modules and Layout Modules.

Layout modules look like the following:

  layoutToolbox: [
    {
      name: "2 column layout",
      icon: "font",
      tagName: "div",
      attributes: {
        id: Math.random().toString(36).substring(7),
        class: "row",
        style: {},
      },
      textNode: null,
      children: [
        {
          tagName: "div",
          attributes: {
            id: Math.random().toString(36).substring(7),
            class: "col",
            style: {},
          },
          textNode: null,
          children: [],
        },
        {
          tagName: "div",
          attributes: {
            id: Math.random().toString(36).substring(7),
            class: "col",
            style: {},
          },
          textNode: null,
          children: [],
        },
      ],
    },
  ],

And then component modules:

     toolbox: [
            {
              name: "paragraph",
              icon: "font",
              tagName: "div",
              attributes: {
                id: "toolbox-p",
                class: "p",
                style: {},
              },
              textNode: "This is my paragraph from the toolbox",
              children: [],
            },
]

That said I need layout to only be draggable to the top parent level, and then components I need draggable inside the column drag groups only!

Using just groups I can't get this behavior to work, my top level in recursion has the group of section:

<draggable
  v-model="elements"
  :group="{ name: 'section', put: true }"
  handle=".editor-ui-drag-handle"
>

Then all my children inside of this are rendered using the group row:

  <draggable
    v-bind="dragOptions"
    :list="list"
    :value="value"
    tag="div"
    :group="{ name: 'row', put: !child }"
    handle=".editor-ui-drag-handle"
    @input="emitter"
    @change="onChange"
  >

That said I have what I think is a solution but I want to know why groups aren't working. When I have a group set to section on 2 draggable groups(toolbar, and parent) why can I drag it into its children? And why can I drag components with the group of row into the parent with the group of section?

My idea to solve this right now is using the drag start call backs and set the store to a variable that says if its a parent type or child type and then enable / disable put in the sections accordingly but I want to know if there's a better way.

Thanks!