Uncaught TypeError: $ props.currentQuestion не определен Vue

Я следую этому руководству. https://thewikihow.com/video_4deVCNJq3qc

ниже мой код для QuestionBox.vue

<template>

    
      <div>
       {{ currentQuestion.question}}
      </div>
    

</template>


<script>

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

Ниже приведен код для App.vue

<template>
  <div>
    <Header />
    <QuestionBox 
    
    :currentQuestion = "questions[index]"

    />
  </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
    }
  },
  mounted: function(){
    
    fetch('https://opentdb.com/api.php?amount=4&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>

когда я компилирую код, это удалось, но я не получаю ожидаемого результата, который является вопросом индекса 0, вместо этого, когда я проверяю, я получаю ошибку Uncaught TypeError: $ props.currentQuestion is undefined. Я застрял там 2 дня, что я делаю не так? Пожалуйста помоги. Заранее спасибо.