title: Internationalization of Vuetify data table header
body: <p>I'm trying to internationalize my data table header using Vuetify + I18n.</p>
  
  <p>When I translate my normal code, it works correctly, but now I need to translate the header of my data table built with Vuetify.</p>
  
  <p>I've already tried to add the code <code>this.$vuetify.t('$vuetify.activity.username')</code> or <code>this.$t('$vuetify.activity.username')</code> in the header, but nothing happens. The language stays English (en) always.</p>
  
  <p>Does someone know how to fix it?</p>
  
  <p>I send below my code.</p>
  
  <p>Thank you in advance.</p>
  
  <p><strong>Activity.vue</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export default {
    data () {
      return {
        headers: [
          { text: 'ID', value: 'id', width: '1%', align: 'left' },
          { text: this.$vuetify.t('$vuetify.activity.username'), value: 'username', width: '1%' },
          ...
        ]
      }
    },
    ...
  }
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import messages from './assets/lang'
  
  Vue.use(VueI18n)
  
  const i18n = new VueI18n({
    locale: 'en',
    messages
  })
  
  // Vue.use(Vuetify)
  Vue.use(Vuetify, {
    lang: {
      t: (key, ...params) =&gt; i18n.t(key, params)
    }
  })
  </code></pre>
  
  <p><strong>./assets/lang/index.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    en: {
      ...
      $vuetify: {
        dataIterator: {
          rowsPerPageText: 'Items per page:',
          ...
        },
        ...
        activity: {
          username: 'Username'
        }
      }
    },
    pt: {
      ...
      $vuetify: {
        dataIterator: {
          rowsPerPageText: 'Itens por página:',
          ...
        },
        ...
        activity: {
          username: 'Nome do usuário'
        }
      }
    }
  }
  </code></pre>