Vue可拖动在生产中不起作用

Question

我正在使用vue draggable，它可以在本地运行，但不能在服务器上运行。

我有4个可拖动组件，它们像这样由2个活动对象和非活动成员组成

<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>

每个可拖动组件的组是一个类似

的对象

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

上面的代码在本地正常工作，我可以将元素从一个拖放到另一个，如下所示。

但是当推送到生产环境时，拖放操作无效。

我检查了chrome控制台中的元素，发现在生产中，可拖动对象的属性group显示为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>

这不是在本地发生，为什么在生产中会发生？以及我该如何解决？