Vue draggable does not work in production

I am using vue draggable it works in local but not in the server.

I have 4 draggable components that work as group of 2, actives and inactives like this

<draggable
    class="droppable-area"
    v-model="internal.fields" 
    :class="dragAreaClass"
    :group="activeFields"
    @start="start"
    @end="end" >
        <div class="d-inline-block draggable-block" v-for="field in internal.fields" :key="field.key">
             <v-chip class="btn-draggable k-orange-linear">
                 {{ field.label }}
             </v-chip>
        </div>
</draggable>
<draggable
    class="droppable-area"
    v-model="internal.columns" 
    :class="dragAreaClass"
    :group="activeColumns"
    @start="start"
    @end="end" >
         <div class="d-inline-block draggable-block" v-for="field in internal.columns" :key="field.key">
             <v-chip class="btn-draggable k-orange-linear">
                 {{ field.label }}
             </v-chip>
         </div>
</draggable>

The group for each draggable component is an object like

  allColumns: { name: 'allColumns', pull: ['allColumns', 'column'], put: ['allColumns','column'] },
  activeColumns: { name: 'column', pull: ['allColumns', 'column'], put: ['allColumns','column'] },

The code above work normally in local, i can drag and drop elements from one to another without problem as seen below.

but when pushed to production, the drag and drop does not work.

I checked the elements in the chrome console and noticed that in production, the property group of the draggable is being displayed as group="[object Object]".

<div data-v-7bc6f678="" class="flex drag-area xs12">
    <div data-v-7bc6f678="" group="[object Object]" class="droppable-area">
        ...
    </div>
</div>

<div data-v-200f17c0="" class="flex drag-area xs12">
    <div data-v-200f17c0="" group="[object Object]" class="droppable-area">
    </div>
</div>

This does not happens in local, Why does this happen in production? and how can i solve it?