I am trying to create a card builder using Vue draggable. I have a row full of cardElements and these can be dragged to the card builder. The card builder is a rectangle made up of individual "buckets" of lists. Here is what it looks like:

Card builder Layout

Here is the script to generate the elements list:

import draggable from 'vuedraggable'

export default {
    name: "clone",
    display: "Clone",
    order: 2,
    components: {
        draggable
    },

    data() {
        return {
            cardElements: [
                { name: "Logo", id: 1 },
                { name: "Stamp", id: 2 }
            ],
            arrA: []
        };
    },
    methods: {
        log: function(evt) {
            window.console.log(evt);
        }
    }
};

You can see that the cardElements are correctly rendered from script and this is how they are rendered in the HTML:

<draggable class="dragArea list-group" :list="cardElements" :group="{ name: 'people', pull: 'clone', put: false }" @change="log">
    <div class="list-group-item" v-for="element in cardElements" :key="element.name">
        {{ element.name }}
    </div>
</draggable>

These are draggable and I can change their order like so:

Changed Order of items

Each "bucket" on the card is declared as an array like so (this is only for the top left space on the card builder, each square is a different number):

data() {
    return {
        cardElements: [
            { name: "Logo", id: 1 },
            { name: "Stamp", id: 2 }
        ],
        arrA: []
    };
}

<draggable class="dragArea list-group" :list="arrA" group="cardItem" @change="log">
    <div class="lvl1-1 bucket empty" v-for="element in arrA" :key="element.name">
        {{ element.name }}
    </div>
</draggable>

But when I drag an element from the cardElements list to the arrA list, it doesn't move and I'm not sure why. I can get it working in the example code supplied here, but not when I change it to my own code.