Custom sort function not working in vuetify3

I have a v-data-table with headers set, but I can't get the custom sort function to work.

<v-data-table 
   v-else :items-per-page="itemsPerPage" 
   density="compact" 
   :headers="headers" 
   :items="rows" 
   :no-data-text="t('label_no_data')" 
   sticky 
   class="elevation-1 text-caption" 
   :class="{'mobile-table':IsMobile}" 
/>

const headers = ref([
  { 
    key: "PersonID", 
    title: "EDB Person ID", 
    sortable:true 
  }, 
  { 
    key: "FirstName", 
    title: "Name", 
    sortable:true 
  },
  { 
    key: "PersonPersonTimekeeperMaps", 
    title: "Timekeeper ID", 
    sortable:false 
  },
  { 
    key: "Created", 
    title: "Created", 
    sortable:true, 
    sort:(
         d1: string | null | undefined, 
         d2: string | null | undefined) => {
            const date1 = new Date(d1 as string);
            const date2 = new Date(d2 as string);
            if (date1 > date2) return -1;
            if (date1 < date2) return 1;
            return 0;
   } }
]);

It never hits the breakpoint in the function in dev tools. And it is not respecting the logic I set. It seems to just do the default sort on its own.

In Vuetify 3, the sort functions have moved from the header declaration to the :custom-key-sort property, which takes an object mapping column key to sort function.

So in your case, that would be:

const customKeySort = {
  Created: (d1: string | null | undefined, d2: string | null | undefined) => {
    ...
  }
}

and

<v-data-table
  :custom-key-sort="customKeySort"
  ...
/>

Here it is in a snipet:

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  setup(){
    const headers = ref([{key: 'name', title: 'Name'}, {key: 'date', title: 'Date'}])
  
    const items = ref(Array.from({length:10}, (_,i) => ({
      name: `Item ${1 + i}`,
      date: new Date(new Date() - Math.random()*(1e+12)).toString()
    })))

    const customKeySort = {
      date: (d1,d2) => new Date(d1).getTime() - new Date(d2).getTime()
    }

    return {headers, items, customKeySort,}
  }

}
createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify-labs.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-data-table
    :headers="headers"
    :items="items"
    item-title="name"
    item-value="name"
    :custom-key-sort="customKeySort"
  ></v-data-table>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify-labs.js"></script>