Реквизиты, переданные дочерним компонентам, возвращаются как неопределенные в Nuxt

Question

У меня есть дочерний компонент внутри формы, который принимает объект как опору от родительского компонента. Этот объект используется для хранения данных, введенных пользователем посредством ввода, и отправляется всякий раз, когда пользователь вводит. Теперь я буду честен, я не уверен на 100%, что излучение работает. Это связано с тем, что, когда я присоединяю свойства объекта к v-модели внутри элемента ввода, Nuxt показывает ошибку, говорящую

Cannot read property 'insert property here' of undefined

Меня удивляет тот факт, что если я загляну внутрь Vue инструментов разработчика, то ясно покажу, что реквизит получен. Я могу просмотреть все его свойства, когда щелкаю дочерний компонент, но при попытке ссылки на него выдается ошибка.

Вот как я передаю данные дочернему компоненту из родительского файла.

<NewProjectIterations
  v-for="i in itterations"
  :key="i"
  :index="i"
  v-model="itterationsData[i]"
/>

Вот javascript

export default {
  name: 'NewProject',
  components: {
    NewProjectIterations
  },
  data() {
    return {
      itterations: 2,
      payoutAmount: null,
      projectName: null,
      emailAssigned: null,
      itterationsData: []
    }
  },
  computed: {
    // Computed property that keeps all the form data inside of one object
    formData() {
      return {
        user: this.$store.auth.user._id,
        projectName: this.projectName,
        payoutAmount: this.payoutAmount,
        payoutDividedInto: this.itterations,
        emailAssigned: this.emailAssigned,
        itteration: this.itterationsData
      }
    }
  },
  mounted() {
    // Initialize the child components data object on mount inorder to store user submit data
    const object = {
      name: '',
      title: '',
      startDate: null,
      endDate: null,
      payoutAmount: this.payoutAmount / this.itterations,
      filesAttachhed: null,
      index: null
    }

    for (let i = 0; i < this.itterations; i++) {
      object.index = i + 1
      this.itterationsData.push(object)
    }
  },
  methods: {
    increaseItteration() {
      if (this.itterations > 5) {
        alert('Itterations cannot be more than 5, nice try')
        return
      }

      const object = {
        name: '',
        title: '',
        startDate: null,
        endDate: null,
        payoutAmount: this.payoutAmount / this.itterations,
        filesAttachhed: null,
        index: this.itterations + 1
      }

      this.itterationsData.push(object)
      this.itterations = this.itterations++
    },
    removeItteration() {
      if (this.itterations > 1) {
        alert('Itterations must be more than 1, nice try')
        return
      }
      this.itterations = this.itterations--
      this.itterationsData.pop()
    },
    removeItterationByIndex(index) {
      this.itterations = this.itterations--
      this.itterationsData.splice(index)
      this.itterationsData.forEach(({ index }, i) => {
        index = i + 1
      })
    },
    async submitProject() {
      // Submit the data and make a request to the backends API through Vuex & store the data 
      // inside of a database
      await this.$store.dispatch('projects/createNewProject', this.formData)
    }
  }

Наконец, вот <NewProjectItteration /> компонент одного файла.

<template>
  <div :id="index" class="New-Project-Iteration">
    <div class="New-Iteration-Upper-Half">
      <div class="New-Iteration-Index">
        <p>{{ index + 1 }}</p>
      </div>
      <div class="New-Interation-Header">
        <input
          id="title"
          v-model="value.name"
          type="text"
          placeholder="Enter Title"
          name="title"
          style="display: block"
        />
        <input
          id="date"
          v-model="value.startDate"
          placeholder="Start"
          class="textbox-n"
          type="text"
          onfocus="(this.type='date')"
          onblur="(this.type='text')"
        />
        -
        <input
          id="date"
          v-model="value.endDate"
          placeholder="Deadline"
          class="textbox-n"
          type="text"
          onfocus="(this.type='date')"
          onblur="(this.type='text')"
        />
      </div>
    </div>
    <div class="New-Iteration-Lower-Half">
      <p class="New-Iteration-Files">
        No Files Attached
      </p>
      <p class="New-Iteration-Money">
        $<input
          id="money"
          v-model="value.payoutAmount"
          type="number"
          placeholder="00.00"
          step="0.01"
          min="0"
          name="money"
        />
      </p>
    </div>
  </div>
</template>

и его javascript

export default {
  name: 'NewProjectIteration',
  props: ['index', 'value'],
  watch: {
    value() {
      this.$emit('input', this.value)
    }
  }
}

Часть меня чувствует, что это связано с хуками образа жизни Vue, и я Я использую их неправильно. Несмотря на это, я хотел задать этот вопрос на тот случай, если кто-нибудь еще столкнется с той же проблемой, что и я, и хотел бы прочитать подробный ответ.