Vuetify datatable not show custom cells with v-slot - vue.js

Question

I have an asp .net web forms app with Vue 2.7.14 and Vuetify 2.6.13.
I have a table and I want to implement v-slot:item.fieldName to style certain cells but it doesn't work.
<v-data-table :footer-props="{ 'items-per-page-options': [10, 50, 100, 500, 1000] }" :items-per-page="10" :headers="headers" :items="supplierList" :loading="loadingGrid" :loading-text="$t('gral_loading')" :options.sync="options" :server-items-length="totalItems">
<template v-slot:item.businessName="{item}">
Hola
</template>
</v-data-table
headers: [
{ text: this.$t('supplier_code'), value: 'code' },
{ text: this.$t('supplier_businessName'), value: 'businessName' },
{ text: this.$t('supplier_alias'), value: 'alias' },
{ text: this.$t('supplier_isDirect'), value: 'isDirect' },
{ text: this.$t('supplier_isAppendFile'), value: 'isAppendFile' },
{ text: this.$t('supplier_isSendEDINotification'), value: 'isSendEDINotification' },
{ text: this.$t('supplier_cat_PlantId'), value: 'plantName' },
{ text: this.$t('supplier_cat_AnalystId'), value: 'analystProcess' },
{ text: this.$t('supplier_cat_supplierTypeId'), value: 'supplierTypeName' },
{ text: this.$t('supplier_isActive'), value: 'isActive' },
{
text: this.$t('gral_acciones'),
value: 'action',
sortable: false
},
],
This is the array data items :
supplierList: [{
"supplierTypeId": 1,
"name": "Transportista",
"description": "Transportista",
"isScrap": false,
"isSystem": false,
"isActive": true,
"isDelete": false,
"creationDate": "0001-01-01T00:00:00",
"lastUpdate": "0001-01-01T00:00:00",
"createdBy": 1,
"lastUpdateBy": 0,
"systemId": null,
"sessionData": null,
"item": null,
"page": null,
"size": null,
"sortBy": null,
"ascending": null,
"alertNotification": null
}]

Answer 1

After spending some time and play around with the v-data-table demo, I found that as long as the headers value is in lowercase the issue doesn't appear.
Working Demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [{ text: 'Code', value: 'code' },
{ text: 'Business Name', value: 'businessname' },
{ text: 'Alias', value: 'alias' },
{ text: 'Is Direct', value: 'isDirect' },
{ text: 'Is Append File', value: 'isAppendFile' },
{ text: 'Notification', value: 'isSendEDINotification' },
{ text: 'Plant Name', value: 'plantName' },
{ text: 'Analyst Process', value: 'analystProcess' },
{ text: 'Supplier Type Name', value: 'supplierTypeName' },
{ text: 'Is Active', value: 'isActive' },
{ text: 'Action', value: 'action' }],
supplierList: [{
"supplierTypeId": 1,
"name": "Transportista",
"description": "Transportista",
"isScrap": false,
"isSystem": false,
"isActive": true,
"isDelete": false,
"creationDate": "0001-01-01T00:00:00",
"lastUpdate": "0001-01-01T00:00:00",
"createdBy": 1,
"lastUpdateBy": 0,
"systemId": null,
"sessionData": null,
"item": null,
"page": null,
"size": null,
"sortBy": null,
"ascending": null,
"alertNotification": null
}],
}
}
})
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.14/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.14/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"/>
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="supplierList"
:items-per-page="5">
<template v-slot:item.businessname="{item}">
<span>Hola</span>
</template>
</v-data-table>
</v-app>
</div>