end event do not excute when container key set random!!

[wan766405890]

valid code

<div v-for="(item, listIndex) in leftComponents" :key="listIndex">
    <div class="components-title">
      <!-- <svg-icon icon-class="component" /> -->
      {{ item.title }}
    </div>
    <draggable class="components-draggable" :list="item.list" :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent" draggable=".components-item" :sort="false" @end="onEnd">
      <div v-for="(element, index) in item.list" :key="index" class="components-item" @click="addComponent(element)">
        <div class="components-body">
          <svg-icon :icon-class="element.__config__.tagIcon" />
          {{ element.__config__.label }}
        </div>
      </div>
    </draggable>
  </div>

invalid code

<div v-for="(item, listIndex) in leftComponents" :key="Math.random()">
    <div class="components-title">
      <!-- <svg-icon icon-class="component" /> -->
      {{ item.title }}
    </div>
    <draggable class="components-draggable" :list="item.list" :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent" draggable=".components-item" :sort="false" @end="onEnd">
      <div v-for="(element, index) in item.list" :key="Math.random()" class="components-item" @click="addComponent(element)">
        <div class="components-body">
          <svg-icon :icon-class="element.__config__.tagIcon" />
          {{ element.__config__.label }}
        </div>
      </div>
    </draggable>
  </div>

onEnd function do not executed