FreeCodeCamp/JavascriptChallenges

Good day campers. I am running into an error while building the quiz app in VueJS. Here is my error:

[Vue warn]: Property or method "answers" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <QuestionBox> at src/components/QuestionBox.vue
       <App> at src/App.vue
         <Root>

Here is my App.vue file:

<template>
  <div id="app">
    <Header/>
    <b-container class="bv-example-row">
      <b-row>
        <b-col sm="6" offset="3">
          <QuestionBox
            v-if="questions.length"
            :currentQuestion="questions[index]"
            :next="next"
          />
        </b-col>

      </b-row>
    </b-container>

  </div>
</template>

<script>
import Header from './components/Header.vue'
import QuestionBox from './components/QuestionBox.vue'


export default {
  name: 'App',
  components: {
    Header,
    QuestionBox
  },
  data() {
    return {
      questions: [],
      index: 0
    }
  },
  methods: {
    next(){
      this.index++
    }
  },
  computed: {
    answers() {
      let answers = [...this.currentQuestion.incorrect_answers]
      answers.push(this.currentQuestion.correct_answer)
      return answers
    }
  },
  mounted: function(){

    fetch('https://opentdb.com/api.php?amount=10&type=multiple',{

      method: 'get'
    })
    .then((response) => {
      return response.json();
    })
    .then((jsonData) => {
        this.questions = jsonData.results

    });
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

...and here is my QuestionBox file:

<template>
    <div class="question-box-container">
        <b-jumbotron>
            <template v-slot:lead>
                {{currentQuestion.question}}
            </template>

            <hr class="my-4">

            <p v-for="(answer, index) in answers" :key="index">

                {{ answer }}
            </p>

            <b-button variant="primary" href="#">Submit Button</b-button>
            <b-button @click="next" href="#">
                Next Question
            </b-button>

        </b-jumbotron>
    </div>
</template>

<script>
export default {
    props: {
        currentQuestion: Object,
        next: Function
    }
}
</script>

Aside from the error my issue is my answers are not showing on the UI even though I am passing {{answer}} into my paragraph tag. I have read through the page at https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties but it is a bit greek to me as this is my first go with VueJS. Can someone help? Please excuse any markdown errors. I will try to clean them up to make this more reader friendly.