Ошибка бесконечного обновления l oop в функции рендеринга компонента в таблице v-данных после установки изображений в ее строках

Question

Holla Developers. Я делаю это приложение из Vue. js и SpringBoot, и у меня небольшая проблема с некоторыми изображениями, уже прикрепленными к моим строкам v-data-table, в соответствии с индексом строки. Несмотря на то, что он работает, ошибка появляется постоянно, когда я go в этом представлении v-data-table:

You may have an infinite update loop in a component render function.

vue.runtime.esm.js?2b0e:619 [Vue warn]: You may have an infinite update loop in a component render function.

found in

---> <VData>
       <VDataTable>
         <VCard>
           <VContent>
             <ScoreComponent> at src/components/ScoreComponent.vue
               <VContent>
                 <ScoreView> at src/views/ScoreView.vue
                   <VApp>
                     <App> at src/App.vue
                       <Root>

Вот что я сделал:

Буквально я просто инициализирую массив изображений, который предоставляет строку v-data-table по индексу к моменту прохождения строки таблицы; также я объявляю счетчик, который имеет функцию просмотра внутри этого массива изображений, правильного в соответствии с его подсчетом к тому времени и его совпадением с позицией изображения внутри массива

 data() {
    return {
      counter: 0,
      imgStatus: [
        require("../assets/1st.gif"),
        require("../assets/2nd.gif"),
        require("../assets/3rd.gif"),
        require("../assets/4th.gif"),
      ],
    };
  },

затем на таблица v-данных я просто развиваю logi c, используя v-show и v-if для отображения изображений или нет;

         <v-data-table id="cardScoreTable" :headers="headers" :items="arrayOfScores">
            <template v-slot:item="row">
              <tr>
                ...some <td's>
                <td>
                  <img v-if=" counter>3" :src="imgStatus[3]" alt="img" />
                  <img v-show="counter<=3" :src="imgStatus[counter++]" alt="img" />
                </td>
              </tr>
            </template>
          </v-data-table>

Буквально демонстрируя, что если счетчик больше 3 к тому времени в строки, я просто должен использовать изображение, установленное в позиции 3 (4th.gif) в этом массиве изображений, инициализированных на данных. Затем, используя v-show, если первое условие не фиксируется, я бы перебрал этот счетчик и использовал его в качестве индекса для первых 3 изображений этого массива (1st.gif, 2nd.gif и 3rd.gif), отображая его в соответствии с этим индексом на самом деле. Это буквально работает, но также появляется ошибка!

and for some reason trying to do the former procedding using v-else instead of v-show

3" :src="imgStatus[3]" alt="img" width="40px" heigth="40px" />

doesn't throw an error but the images got displayed the same, in this case that one of position 3 in the array введите описание изображения здесь

Вся эта ситуация ставит под сомнение счетчик. Есть какие-нибудь советы о том, как я могу исправить эту небольшую проблему? Заранее спасибо !!!