Vue Draggable clone into another list via custom component

I'm working in a Nuxt JS 2.x project that has Vue Draggable 2.24.3

I have a page where I have two draggable lists as part of a custom component called DraggableList

My DraggableList component is the one that contains the draggable component from Vue Draggable and I've created some options to pass to it.

I can drag my items fine in one list, but cannot seem to drag items into another, what could I be missing?

Here's my markup for the page containing my elements:

<b-row class="mt-2">
  <b-col cols="12" lg="6">
    <b-card class="shadow" bg-variant="light">
      <b-card-title class="mb-1">Assigned tiers</b-card-title>
      <b-card-sub-title>The buyer tiers</b-card-sub-title>

      <article class="mt-2 p-3 border bg-light rounded">
        <DraggableList
          :draggable-group-options="{ name: 'tiers', pull: 'clone', revertClone: true, put: false }"
          :items="form.tiers" />
      </article>
    </b-card>
  </b-col>
  <b-col cols="12" lg="6">
    <b-card bg-variant="light">
      <b-card-title class="mb-1">Available tiers</b-card-title>
      <b-card-sub-title>Assigned tiers</b-card-sub-title>

      <section v-if="isLoading" class="bg-white p-3 mt-2">
        <AppLoader
          loader-title="Getting buyer tiers"
          :is-loading="isLoading" />
      </section>
      <section v-else class="rounded-sm border p-3 mt-2">
        <EmptyData
          v-if="!buyers"
          class="p-3"
          state-title="No tiers for buyer"
          state-subtitle="Get started by creating a tier">
          <template #actions>
            <b-button variant="primary" to="/buyers/" class="shadow mt-2">
              Go to buyers
            </b-button>
          </template>
        </EmptyData>
        <article v-else class="mt-2 bg-light rounded">
          <DraggableList
            :draggable-group-options="{ name: 'tiers' }"
            :items="buyers" />
        </article>
      </section>
    </b-card>
  </b-col>
</b-row>

and my DraggableList component:

<template>
  <draggable
    :list="items"
    :group="draggableGroupOptions"
    handle=".handle"
    @change="onChange"
  >
    <article v-for="(item, index) in items" :key="item.id" class="draggable-group">
      <section class="d-flex mb-2">
        <div class="draggable-item w-100 rounded border-transparent">
          <div class="d-flex align-items-center justify-content-between p-2">
            <div class="ml-1">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="16" stroke-width="2" stroke="currentColor" class="handle cursor-move" :class="{ 'mr-1': !item.icon_markup }">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 7.5L7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5" />
              </svg>
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
        <div class="d-flex align-items-start ml-1 mute">
          <b-dropdown variant="link" toggle-class="text-decoration-none p-0 text-dark mt-2" menu-class="shadow-lg" right no-caret>
            <template #button-content>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
              </svg>
            </template>
            <b-dropdown-header>
              Options
            </b-dropdown-header>
            <b-dropdown-item-button>
              <div class="d-flex align-items-center w-100">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="16" class="text-primary flex-shrink-0 rotate-180 mr-1">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
                </svg>
                Toggle children
              </div>
            </b-dropdown-item-button>
          </b-dropdown>
        </div>
      </section>
    </article>
  </draggable>
</template>

<script>
export default {
  props: {
    items: {
      default: [],
      type: Array
    },
    draggableGroupOptions: {
      default: () => ({ }),
      type: Object
    },
    itemId: {
      type: [String, Number],
      default: '',
    },
  },
  methods: {

    /*
    ** On change of a draggable item
    */
    onChange (evt) {
      console.log(evt)
    },
    /*
    ** Send the trashed item id to root
    */
    sendTrashedItemToRoot (value) {
      this.$emit('onDeleteItem', value)
    }

  }
}
</script>

The UI looks like:

I'm trying to drag from the right list, to the left.