title: I want to use vue-i18n for vuetify navigation bar with v-for ... (help)
body: <p>My Code be like</p>
  
  <pre><code>&lt;v-navigation-drawer v-model="drawer" clipped app&gt;
          &lt;v-list dense&gt;
              &lt;span v-for="navitem in navitems" :key="navitem.subtitle"&gt;
                  &lt;v-subheader v-if="navitem.subtitle"&gt;{{ navitem.subtitle }}&lt;/v-subheader&gt;
                  &lt;span v-if="navitem.subitem"&gt;
                      &lt;v-list-group :prepend-icon="navitem.icon" v-model="navitem.active"&gt;
                          &lt;template v-slot:activator&gt;
                              &lt;v-list-item-title&gt;{{ navitem.title }}&lt;/v-list-item-title&gt;
                          &lt;/template&gt;
                          &lt;span v-for="subitem in navitem.subitems" :key="subitem"&gt;
                              &lt;span v-if="subitem.miniitems"&gt;
                                  &lt;v-list-group sub-group&gt;
                                      &lt;template v-slot:activator&gt;
                                          &lt;v-list-item-content&gt;
                                              &lt;v-list-item-title style="margin-left:10px"&gt;{{ this.$i18n.$t('subitem.title') }}
                                              &lt;/v-list-item-title&gt;
                                          &lt;/v-list-item-content&gt;
                                      &lt;/template&gt;
  
  
                                      &lt;span v-if="subitem.mini"&gt;
                                          &lt;span v-for="mini in subitem.miniitems" :key="mini"&gt;
                                              &lt;v-list-item router link :to="mini.routes"&gt;
                                                  &lt;!-- don't remove this --&gt;
                                                  &lt;v-list-item-icon&gt;
                                                      &lt;!-- &lt;v-icon&gt;{{ mini.name }}&lt;/v-icon&gt; --&gt;
                                                  &lt;/v-list-item-icon&gt;
                                                  &lt;v-list-item-title v-text="mini.title"&gt;&lt;/v-list-item-title&gt;
                                              &lt;/v-list-item&gt;
                                          &lt;/span&gt;
                                      &lt;/span&gt;
                                  &lt;/v-list-group&gt;
                              &lt;/span&gt;
                              &lt;span v-else&gt;
                                  &lt;v-list-item sub-group router link :to="subitem.routes"&gt;
                                      &lt;v-list-item-content&gt;
                                          &lt;v-list-item-title v-text="subitem.title" style="margin-left: 57px;"&gt;
                                          &lt;/v-list-item-title&gt;
                                      &lt;/v-list-item-content&gt;
                                  &lt;/v-list-item&gt;
                              &lt;/span&gt;
                          &lt;/span&gt;
                      &lt;/v-list-group&gt;
                  &lt;/span&gt;
                  &lt;span v-else&gt;
                      &lt;v-list-item router link :to="navitem.routes"&gt;
                          &lt;v-list-item-icon&gt;
                              &lt;v-icon&gt;{{ navitem.icon }}&lt;/v-icon&gt;
                          &lt;/v-list-item-icon&gt;
                          &lt;v-list-item-title&gt;{{ navitem.title }}&lt;/v-list-item-title&gt;
                      &lt;/v-list-item&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
          &lt;/v-list&gt;
          &lt;v-divider&gt;&lt;/v-divider&gt;
      &lt;/v-navigation-drawer&gt;
  </code></pre>
  
  <p>with following data....</p>
  
  <pre><code>navitems: [{
                      icon: 'dashboard',
                      title: 'Dashboard',
                      subtitle: 'Pages',
                      active: false,
                      subitem: true,
                      routes: '',
                      subitems: [{
                          title: 'Default',
                          active: true,
                          mini: true,
                          routes: '/',
                      }, {
                          title: 'Analytics',
                          active: true,
                          routes: '/dashboardanalytics',
                      }, {
                          title: 'Ecommerce',
                          active: true,
                          routes: '/dashboardecommerce',
                      }, {
                          title: 'Social',
                          active: true,
                          routes: '/dashboardsocial',
                      }, {
                          title: 'Crypto',
                          active: true,
                          routes: '/dashboardcrypto',
                      }]
                  }, {
                      icon: 'library_books',
                      title: 'Pages',
                      active: false,
                      subitem: true,
                      subitems: [{
                          title: 'Profile',
                          routes: '/profile'
                      }, {
                          title: 'Settings',
                          routes: '/settings'
                      }, {
                          title: 'Clients',
                          routes: '/clients'
                      }, {
                          title: 'Projects',
                          active: true,
                          routes: '',
                          mini: true,
                          miniitems: [{
                              title: 'List',
                              routes: '/list'
                          }, {
                              title: 'Detail',
                              routes: '/detail'
                          }]
  
                      }, {
                          title: 'Invoice',
                          active: true,
                          routes: '/invoice'
                      }, {
                          title: 'Pricing',
                          active: true,
                          routes: '/pricing'
                      }, {
                          title: 'Tasks',
                          active: true,
                          routes: '/tasks'
                      }, {
                          title: 'Chat',
                          active: true,
                          routes: '/chat'
                      }, {
                          title: 'Blank Page',
                          active: true,
                          routes: '/blank-page'
                      }]
                  }, {
                      icon: 'group',
                      title: 'Auth',
                      active: false,
                      subitem: true,
                      routes: '',
                      subitems: [{
                              title: 'Sign In',
                              routes: '/signin',
                              active: true
                          },
                          {
                              title: 'Sign Up',
                              routes: '/signup',
                              active: true
                          },
                          {
                              title: 'Reset Password',
                              routes: '/reset-password',
                              active: true
                          },
                          {
                              title: '404 Page',
                              routes: '/404',
                              active: true
                          },
                          {
                              title: '500 Page',
                              routes: '/500',
                              active: true
                          },
                      ],
                  }, {
                      icon: 'import_contacts',
                      title: 'Documentation',
                      active: false,
                      subitem: true,
                      subitems: [{
                              title: 'Introduction',
                              routes: '/introduction',
                          },
                          {
                              title: 'Getting Started',
                              routes: '/getting-started',
                          }, {
                              title: 'Plugins',
                              routes: '/plugins'
                          }, {
                              title: 'Changelog',
                              routes: '/changelog'
                          }
                      ],
                  }, {
                      icon: 'layers',
                      title: 'UI Elements',
                      subtitle: 'Tool &amp; Components',
                      subitem: true,
                      active: false,
                      subitems: [{
                          title: 'Alerts',
                          routes: '/alerts'
                      }, {
                          title: 'Buttons',
                          routes: '/buttons'
                      }, {
                          title: 'Cards',
                          routes: '/cards'
                      }, {
                          title: 'Carousel',
                          routes: '/carousel'
                      }, {
                          title: 'Embed Video',
                          routes: '/embed-video'
                      }, {
                          title: 'General',
                          routes: '/general'
                      }, {
                          title: 'Grid',
                          routes: '/grid'
                      }, {
                          title: 'Modals',
                          routes: '/modals'
                      }, {
                          title: 'Tabs',
                          routes: '/tabs'
                      }, {
                          title: 'Typography',
                          routes: '/typography'
                      }]
                  }, {
                      icon: 'favorite',
                      title: 'Icons',
                      subitem: true,
                      active: false,
                      subitems: [{
                          title: 'Matrial Design Icon',
                          routes: '/mtd'
                      }, {
                          title: 'Font Awesome 5',
                          routes: '/FA5'
                      }]
                  }, {
                      icon: 'done',
                      title: 'Forms',
                      subitem: true,
                      active: false,
                      subitems: [{
                          title: 'Layouts',
                          routes: '/layouts'
                      }, {
                          title: 'Basic Inputs',
                          routes: '/basic-inputs'
                      }, {
                          title: 'Input Groups',
                          routes: '/input-groups'
                      }]
                  }, {
                      icon: 'table_chart',
                      title: 'Tables',
                      routes: '/table'
                  }, {
                      icon: 'check_box',
                      title: 'Form Plugins',
                      subtitle: 'Plugin &amp; Addons',
                      subitem: true,
                      active: false,
                      subitems: [{
                          title: 'Advanced Inputs',
                          routes: '/advanced-inputs'
                      }, {
                          title: 'Editors',
                          routes: '/editors'
                      }, {
                          title: 'Validation',
                          routes: '/validation'
                      }, {
                          title: 'Wizard',
                          routes: '/wizard'
                      }]
                  }]
  </code></pre>
  
  <p>I want to use i18n for showing the visible text(title, text) to be internationalized....but I'm currently unable so any help....I am using i18n.js </p>
  
  <pre><code>const messages = {
      'us': {
          dashboard: 'Dashboard',
          profile: 'Profile',
          analytics: 'Analytics',
          settings: 'Settings',
          help: 'Help',
          signout: 'Sign Out',
      },
      'np': {
          dashboard: 'ड्यासबोर्ड',
          profile: 'प्रोफाइल',
          analytics: 'विश्लेषण',
          settings: 'सेटिंग्स',
          help: 'मद्दत',
          signout: 'साइन आउट गर्नुहोस्',
      }
  };
  
  const i18n = new VueI18n({
      locale: 'us', // set locale
      fallbackLocale: 'np', // set fallback locale
      messages, // set locale messages
  });
  
  export default i18n;
  </code></pre>
  
  <p>I know their is only dashboard from data here for now but I'm lost on what i can do to translate the title and texts...I tried {{ $t('navitem.subtitle') }} but DON'T THINK that'll work... I have tried other ways but won't work....</p>