<draggable
  class="dragArea"
  v-model="sections"
  :options="{ group: { name: 'g1', put: 'g1'}, handle: '.drag-handle'  }"
  v-if="sections && hasWriteAccess">

  <section-component
    v-for="(section, i) in sections"
    :component="section">

    <draggable
      class="dragArea"
      :sections="section.components_under_section"
      slot="component_under_section"
      :options="{ group: { name: 'g2', put: 'g2'}, handle: '.drag-handle'  }">

      <lesson-component
        v-for="(comp, i) in section.components_under_section"
        :component="comp">
      </lesson-component>
    </draggable>

  </section-component>

</draggable>


computed: Object.assign({},
  sections: {
    get(){
      // returns state._array (see below)
      return this.componentsSortable
    },
    set(value){
      // store updated array of components (generated by VueDraggable) to store/state
      this.storeUpdatedComponents(value)
      // update position attribute of every component in store/state, then update postgres
      this.saveComponentPositions(value)
      return
    }
  }
)

[
  {
    "id": 52,
    "type": "section",
    "content": "How to Fly?",
    "position": 1,
    "project_id": 128,
    "section_id": null,
    "components_under_section": [
      {
        "id": 53,
        "type": "component",
        "content": "AAA",
        "section_id": 52
      },
      {
        "id": 54,
        "type": "component",
        "content": "BBB",
        "section_id": 52
      }
  },
  { ... },
  { ... }
]