v-data-table checkboxes select all checkboxes

I have a v-data-table implemented, but the show-select checkboxes have a problem. If I click on any one of them, they all select:

This is the result:

Also note, the box that should be in the header is missing. Only one box should select when clicked.

Here's the data table:

<v-data-table
    v-model="selected_available_units"
    show-select
    select-strategy="single"
    :headers="new_unit_table_headers"
    :items="unitsStore.available_units_flattened"
    item-key="unit_id"
  >
  <template #item.unit_width="{ item }">
    <div>{{ get_unit_size(item) }}</div>
  </template>
  <template #item.unit_basis_price="{ item }">
    <div>{{ fmt.currency(item.unit_basis_price, item.unit_currency as CURRENCY) }}</div>
  </template>
</v-data-table>

unitsStore.available_units_flattened looks like this:

export type UnitFlattened = {
  unit_id: string,
  unit_name: string,
  unit_width: number,
  unit_depth: number,
  unit_height: number,
  unit_basis_price: number,
  unit_uom: string,
  unit_currency: string,
  unit_is_available: boolean,
  building_name: string,
  location_name: string,
  building_id: string,
  location_id: string,
  company_id: string
}

Headers here:

const new_unit_table_headers : ReadonlyHeaders = [
  {title: 'Location', align: 'start', key: 'location_name'},
  {title: 'Building', align: 'start', key: 'building_name'},
  {title: 'Name', align: 'start', key: 'unit_name'},
  {title: 'Size', align: 'end', key: 'unit_width'},
  {title: 'Basis', align: 'end', key: 'unit_basis_price'}
  // {title: '', align: '', key: ''},
]

Looks like a problem with props:

• In Vuetify 3, the VDataTable prop to check if two items are the same is item-value, not item-key (that's v2).

• If you set select-strategy="single", only one item can be selected at a time. Use page or all for multiple select.