Имя изображения Vue-i18n из файла json не отображается в карусели Vuetify (через v-for и: src перевода)

У меня проблема с загрузкой имен изображений для карусели Vuetify из vue-i18n. Карусель работала нормально до внедрения vue-i18n, но ее пришлось использовать для локализационных переводов. В карусели есть v-for для объекта "items", который имеет "src", "title", "text" и "to", заголовок, текст и to для карточек, генерируемых для каждого изображения карусели, поэтому перевод был необходим. чтобы изменить их.

Но, по сути, извлечение этого объекта "items" из данных страницы в en-US.json vue-i18n приводит к тому, что источник не соединяется с импортированными изображениями страницы, и поэтому он не показывает изображения. Тексты, заголовки и т. Д. Работают как раньше, и в консоли не отображается никаких ошибок.

Изображения находятся в папке с ресурсами и импортируются на страницу в начале скрипта как
import img1 from '@/assets/img/img1.jpg'
Один из способов решить эту проблему - сохранить изображения в облаке и иметь только ссылки, но это приведет к повторной загрузке изображений с каждой новой навигацией от пользователя, которая не нужна.
Другое решение, о котором я подумал, могло бы быть, если бы я мог каким-то образом иметь два разных v-for, один для изображений (чтобы держать их внутри данных страницы, поскольку он работает таким образом) и один для заголовка, текста и для, имея их в en-US.json для перевода vue-i18n, но я не знаю, можно ли это сделать в той же карусели.

Промежуточное ПО vue-i18n, плагин, vuex и т. д. реализуется как в документации nuxt.js для vue-i18n https://nuxtjs.org/examples/i18n/

Я показываю больше кода
index.vue (домашняя страница внутри default.vue макет)

<template>
  <div>
    <v-layout id="maincontent">
      <v-carousel style="height:95%" hide-delimiters interval="4000">
        <v-carousel-item transition="fade" reverse-transition="fade" v-for=" 
            (item, i) in $t('default.index.items')" :src="item.src" :key="i">
          <v-flex sm10 xs8>
            <v-card nuxt :to="item.to" class="elevation-10" color="grey 
                darken-3 
                white--text" style="opacity:0.8">
              <v-card-title>
                <h3 class="headline">{{item.title}}</h3>
              </v-card-title>
              <v-card-text>
                <p class="subheading">{{item.text}}</p>
              </v-card-text>
            </v-card>
          </v-flex>
        </v-carousel-item>
      </v-carousel>
    </v-layout>
  </div>
</template>

Скрипт страницы index.vue с импортированными изображениями:

<script>
  import img1 from '@/assets/img/img1.jpg'
  import img2 from '@/assets/img/img2.jpg'
  import img3 from '@/assets/img/img3.jpg'
  import img4 from '@/assets/img/img4.jpg'
  import img5 from '@/assets/img/img5.jpg'
  import img6 from '@/assets/img/img6.jpg'
  import img7 from '@/assets/img/img7.jpg'
  export default {
    data () {
      return {

Как это работало без изменения vue-i18n (вместо этого использовался v-for для объекта "items"):

data () {
  return {
    items: [
      {
        src: img1,
        title: 'Warehouse',
        text: '...',
        to: '/warehouse'
      },
      {
        src: img2,
        title: 'Office',
        text: '...',
        to: '/about'
      },

Как это происходит с изменением vue-i18n (наличие объекта в файле en-US.json с использованием v-for для объекта $ t ('default.index.items'))

{
   "default": {
       "index": {
           "items": [
               {
                 "src": "img1",
                 "title": "Warehouse",
                 "text": "...",
                 "to": "/warehouse"
               },
               {
                 "src": "img2",
                 "title": "Office",
                 "text": "...",
                 "to": "/about"
               },
            ]
        }
    }
}

Если потребуется дополнительная информация, пожалуйста, сообщите мне, чтобы я ее предоставил. Любая помощь или идеи приветствуются.