Where to place headers in Vuetify v-data-table?

I’m making v-data-table on Vuetify 2.2 and wondering where to put headers prop.

  1. In Vuetify documentation headers prop is placed in the data like this:
data () {
    return {
      headers: [
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
  1. But when I use the Vue internationalization i18n, I’m using my headers prop in computed, to change the header text depending on the desired language:
computed:{
      headers(){ 
        return [
          { text: $t('Calories'), value: 'calories' },
          { text: $t('Fat (g)'), value: 'fat' },
          { text: $t('Carbs (g)'), value: 'carbs' },
          { text: $t('Protein (g)'), value: 'protein' },
          { text: $t('Iron (%)'), value: 'iron' },
      ]
    }
  1. Or headers can be used in template too like this:
<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="[
         { text: $t('Calories'), value: 'calories' },
         { text: $t('Fat (g)'), value: 'fat' },
         { text: $t('Carbs (g)'), value: 'carbs' },
         { text: $t('Protein (g)'), value: 'protein' },
         { text: $t('Iron (%)'), value: 'iron' },
      ]"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
    ></v-data-table>
  </v-app>
</div>

I think that headers must be placed in the data (or in computed when it’s i18n case), because everywhere in the Vuetify documentation headers is in data and not in template. That’s Vuetify convention.

What I’m looking for are more opinions.

  1. Where to place headers props at all, in data, computed or in the template?
  2. Where to place headers props when I’m using Vue i18n? In computed or in the template?
    And why?