vue-i18n output using as quasar data-table title value

Question

Two ways to combine vue-i18n with quasar-framework in vue

I need to know, how to put the $t('message.hello') function, what is actually in a v-html or in double bracets {{ $t('message.hello') in a variable. I tried to return the function in the computed:-, and mounted() instances, I also tried to put it in a window.var.

The other variant

And the other way round, I need to put in vue rendered variables into the $t('message.hello', {scope: 'world'}) method like that way: $t('message.hello', {scope: 'returned.fromDataOrSomewhere'})

Why do I need this

1. I have to inject some data from promise in the vue-i18n to translate dynamic values.

2. I need to put the translated values in a Quasar <q-datatable> which columns are configured as below:

   {
     label: 'ID', //here I need a variable instead of string
     field: 'id',
     filter: true,
     sort: true,
     type: 'number',
     width: '10%'
   },
   {
     label: 'Username', //here too - and so on...
     field: 'username',
     filter: true,
     sort: true,
     type: 'date',
     width: '20%'
   },
   

   
   
   

EDIT:

Second case is solved.

Answer 1

If you like a true reactivity, you need pass to q-table component a v-bind:columns using a computed property. If you use a data is not reactivity.

<q-table
  ...
  :columns="columnsI18n"
  ... 

<script>
. . .
computed: {
    columnsI18n () {
      let columns = [
        {
          name: 'username',
          required: true,
          label: this.$t('mailboxes.label'),  // Translation
          align: 'left',
          field: row => row.domain,
          format: val => `${val}`,
          sortable: true
        },
        {
          name: 'active',
          align: 'center',
          label: this.$t('domains.active'), // Translation
          field: row => row.active,
          format: val => String(!!val),
          sortable: true
        }
      ]
      return columns
    },