Duplicate key in Element table VueJS

I have the following code:

      <el-table
        :data="getFormattedLocationTableData"
        style="width: 100%"
        :fit="true"
        rowKey="treeId"
      >
        <el-table-column
          prop="customerName"
          label="Клиент"
          width="400px"
        >
          <template slot-scope="scope">
            <img
              v-if="showDropdownArrow(scope.row.type)"
              :src="require(`@Svg/${scope.row.type}.svg`)"
              :alt="scope.row.type"
              class="icon"
            />
            <span class="item">
              {{ getRowName(scope.row) }}
            </span>
          </template>
        </el-table-column>
    </el-table>

When I am trying to run it I get the following error. Could you help, please?

 [Vue warn]: Duplicate keys detected: '1411'. This may cause an update
 error.
 
 found in
 
 ---> <ElTableBody>
        <ElTable> at packages/table/src/table.vue
          <LocationsTable> at src/components/tables/LocationsTable.vue
            <ControlLocationsPage> at src/pages/Control/ControlLocationsPage.vue
              <Layout> at src/layouts/layout.vue
                <Nuxt>
                  <DefaultLayout> at src/layouts/default.vue
                    <Root>

Solution

Same key for different elements in the loop is causing this warning. You can avoid this using different key for different v-for loops. In your case, row-key="treeId" is getting duplicate values for "treeId". Make sure to pass unique values to row-key.

`https://codepen.io/shwetas7/pen/PoJXZwN`