我有一个奇怪的行为下面的数据表：

<DataTable
    :scrollable="true"
    :value="shipments"
    :totalRecords="shipments.length"
    :reorderableColumns="true"
    :alwaysShowPaginator="false"
    :paginator="true"
    :rows="10"
    :resizableColumns="true"
    columnResizeMode="fit"
    sortMode="multiple"
    :stripedRows="true"
    removableSort
    dataKey="reference"
    responsiveLayout="scroll">
    <template #empty> No records found </template>
    <Column field="reference" header="Shipment Number" :sortable="true" frozen />
    <Column header="Shipper" style="text-transform: capitalize">
        <template #body="slotProps">
            {{ slotProps.data.shipper.name.toLocaleLowerCase() }}
        </template>
    </Column>
</DataTable>

如果我尝试重新排序（拖动）列，我会得到下面的错误。每次我尝试重新排序，reference列被添加到表中。
[Vue警告]：更新期间发现重复的键："reference"确保密钥是唯一的。
如果删除Shipper列的这一部分：

<template #body="slotProps">
     {{ slotProps.data.shipper.name.toLocaleLowerCase() }}
</template>

并且只需使用field="shipper.name"引用托运人名称，它就能正常工作，没有任何错误。
我哪里做错了？