Unable to translate the Q-table headers

[bambinou]

Hello,

I am not understanding the issue.

The Q table headers are not translating. It is very strange because if I add $t(‘tables.surname’) to the template layout, it works on the fly, I can change the languages without any issues but as soon as I add this.$t(‘tables.surname’) in my columns object, the reactivity is not there. Any idea why, please?
I thought perhaps I needed to add it to a computed property but is it possible to add an object as computed? If yes would you have an example please? Thank you.

<template>
<div>
    <q-table :data="data" :columns="columns" row-key="name" :pagination.sync="pagination">
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="name" :props="props">{{ props.row.name }}</q-td>
          <q-td key="surname" :props="props">{{ props.row.surname }}</q-td>
        </q-tr>
      </template>
    </q-table>
  </div>
</div>
</template>

<style scoped>
</style>

<script>
export default {
  data () {
    return {
      pagination: {
        rowsPerPage: 0,
        page: 1
      },
      selected: [],
      columns: [
      {
        name: 'name',
        align: 'center',
        label: this.$t('tables.name'),
        field: 'name',
        sortable: true
      },
      {
        name: 'surname',
        align: 'center',
        label: this.$t('tables.surname'),
        field: 'surname',
        sortable: true
      }
      ],
      data: [{
        name: 'Name1',
        surname: 'name 1',
      },
     {
      name: 'Name2',
      surname: 'name 2'
      }
      ]
    }
  }
};
</script>

[msfatgraycat]

Have the same issue…