i18n translation TanstackTable Vue

Question

i created this table with TanstackTable Vue3.

<table class="table">
   <thead>
      <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
         <th v-for="header in headerGroup.headers" :key="header.id" scope="col" class="col"
            @click="header.column.getToggleSortingHandler()?.($event)"
            >
            <div class="flex align-items-center">
               <FlexRender :render="$i18n.t(header.column.columnDef.header)" :props="header.getContext()" />
               <VueFeather v-if="header.column.getCanSort()" size="20"
                  :type="header.column.getIsSorted() !== 'asc' ? 'chevron-down' : 'chevron-up'" />
            </div>
         </th>
      </tr>
   </thead>
   <tbody class="tbody">
      <tr v-for="row in table.getRowModel().rows" :key="row.id">
         <td v-for="cell in row.getVisibleCells()" :key="cell.id">
            <div class="flex py-1">
               <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
            </div>
         </td>
      </tr>
   </tbody>
</table>

With i18n i can traslate the headers, but not the cells. Any solutions?

This is the .js file with the columns

[
 {
   "accessorKey":"identifier",
   "header":"folder-identifier",
   "enableSorting":true
 },
 {
   "accessorKey":"folderName",
   "header":"folder-name",
   "enableSorting":true
 },
]

if i try to translate the cell as the header...

Uncaught (in promise) SyntaxError: Invalid argument
    at createCompileError (message-compiler.esm-browser.js:99:19)
    at createI18nError (vue-i18n.mjs:101:12)```