[Bug Report][3.5.2] VDataTable sort should use the value of the column

[moltinginstar]

Environment

Vuetify Version: 3.5.2
Vue Version: 3.4.15
Browsers: Chrome 121.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

Click a column to sort by, you will see the value used by sort.

Expected Behavior

sort should use the computed value of a column if value is a function.

Actual Behavior

sort receives item[key] instead, which is either undefined or the wrong value.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

As a workaround I’m forced to extract the value functions into a map,

const values = {
  fullName: (item) => $t("full-name", {
    first: ts(item.name.first),
    middle: ts(item.name.middle),
    last: ts(item.name.last),
    age: item.age,
  }),
  views: (item) => item.stats?.views ?? null,
  ...
} satisfies {
  fullName: (item: Account) => string;
  views: (item: Account) => number | null;
  ...
};

so I can reuse them in my reimplementation of sort (using the newly added sortRaw):

const headers = [
  {
    title: $t("header.full-name"),
    key: "fullName",
    value: (item) => $t("full-name", {
      first: ts(item.name.first),
      middle: ts(item.name.middle),
      last: ts(item.name.last),
      age: item.age,
    }),
    sortRaw: (a, b) => {
      const aValue = values.fullName(a);
      const bValue = values.fullName(b);

      return aValue.localeCompare(bValue);
    },
  },
  ...
];

What I would like to be able to do is define the value of each column once and have the default implementation of sort use that value instead of item[key].

[KaelWD]

Duplicate of #18840