Добавление более 1 поля в v-for вызывает бесконечный цикл

Question

Я пытаюсь добавить форму оплаты для пользователя, чтобы заполнить поле. Type === 'payment'. Однако, когда я добавляю более одного поля для добавления внутри v-for l oop, я получаю «У вас может быть бесконечное обновление l oop в функции рендеринга компонента». ошибка. Что я могу сделать, чтобы избежать этого? Вот фрагмент того, что я пытаюсь сделать

<div v-for="(field, key) in page.fields" :key="key">
 <v-row v-if="field.type === 'payment'">
        <v-col cols="12" sm="8">
            <v-text-field //ADDING THIS FIELD BY ITSELF WORKS FINE
                label="Card Number" 
                prepend-inner-icon="credit_card" 
                v-model="card_number"
            />
        </v-col>
        <v-col cols="12" sm="4">
            <v-text-field //WHEN I TRY TO ADD IN THIS FIELD, THE LOOP ERROR OCCURS
                label="CVV" 
                v-model="cvv"
            />
        </v-col>
    </v-row>
</div>

<script>
  computed: {
    ...mapGetters('formbuilder', ['form'])
  },
  watch: {
    form(newVal) {
      this.page = newVal;
    }
  },
  data() {
    return {
      cvv: '',
      card_number: '',
      page: {}
    }
   }
</script>