Vue-i18n not translating inside component script tags

Question

Building a language switcher, all works fine but when I use the $t() inside the data object it will not be dynamic when I switch between a language.

Component.vue

<template>
   // loop menu here
  <div v-for="item in menu">
     {{ item.label }}
   </div>
</template>

<script>

const mainMenu = [
{
    label: $t('dashboard'),
},
{
    label: $t('users'),
},
{
    label: $t('settings'),
},
}
export default {
    data () {
        return {
           menu = MainMenu
        }
    }
}
</script>

i18n.js

// https://vue-i18n.intlify.dev/

import { createI18n } from 'vue-i18n'

export function loadLocalMessages () {
    const locales = require.context('../locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
    const messages = {}
    locales.keys().forEach(key => {
        const matched = key.match(/([A-Za-z0-9-_]+)\./i)
        if (matched && matched.length > 1) {
            const locale = matched[1]
            messages[locale] = locales(key)
        }
    })
    return messages;
}

const i18n = createI18n({
    locale: 'en',// .env not working
    fallbackLocale: 'en',// .env not working
    messages: loadLocalMessages(),
});
  
export default i18n

Answer 1

<template>
  <div v-for="item in menu">
     {{ item.label }}
   </div>
</template>

<script>

export default {
  computed: {
    menu() {
      return [{
         label: this.$t('dashboard'),
       }, {
         label: this.$t('users'),
       }, {
         label: this.$t('settings'),
       }]
    }
  }
}
</script>