<v-data-table> v-slot issue

[dpes8693]

Q:
Hello, there. I'm trying to customize the column in .
No effect when there are capital letter in the object key, may I know which side I have written wrong?

Version:
[email protected]

Code:
https://codepen.io/dpes8693/pen/XWVyRML

<div id="app">
  <v-app id="inspire">
    <v-data-table :headers="headers" :items="desserts">
      <template v-slot:item.d_name="{ item }">
        <v-chip color="red" dark>
          {{ item.d_name }}
        </v-chip>
      </template>
      <template v-slot:item.calories="{ item }">
        <v-chip color="red" dark>
          {{ item.calories }}
        </v-chip>
      </template>
      <template v-slot:item.theFat="{ item }">
        <v-chip color="red" dark>
          {{ item.theFat }}
        </v-chip>
      </template>
    </v-data-table>
  </v-app>
</div>

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      //testing obj key
      headers: [
        {
          text: "(underline)",
          value: "d_name"
        },
        { text: "lowercase", value: "calories" },
        { text: "Uppercase", value: "theFat" }
      ],
      desserts: [
        {
          d_name: "underline",
          calories: "tolower",
          theFat: "toUpper"
        }
      ]
    };
  }
});

[KaelWD]

See #10002

[dpes8693]

thanks to KaelWD

Keyword:
Prop Casing (camelCase vs kebab-case)

Success:
https://codepen.io/dpes8693/pen/Rwxqgry