[Vuejs]-How do I pass custom props to dynamic components in Vue 3?

Try this:

App.vue

<script lang="ts">
import { defineComponent } from 'vue';
import QuestionCard from "./components/QuestionCard.vue";

export default defineComponent({
   components: {
      QuestionCard
   },
   data() {
      return {
         questionArray: [
            {
               id: "123",
               question: "Which of these is a colour in the rainbow?",
               options: [
                  'red', 'black', 'brown'
               ],
            },
            {
               id: "456",
               question: "How many continents does Earth have?",
               options: [
                  1, 7, 6, 9
               ],
            },
            {
               id: "789",
               question: "Which of these is a prime number?",
               options: [
                  7, 4, 44, 35
               ],
            },
         ],
         currentQuestionIndex: 0
   },
   methods: {
      nextQuestion() {
         if (this.currentQuestionIndex < this.questionArray.length - 1) {
            this.currentQuestionIndex++;
         }
      }
   }
})
</script>

<template>
   <div>
      <div id="top_bar">
         <button @click="nextQuestion">Next Question</button>
      </div>

      <div id="question_section">
         <QuestionCard 
            :question="questionArray[currentQuestionIndex].question"
            :answer_options="questionArray[currentQuestionIndex].options"
         ></QuestionCard>
      </div>
   </div>
</template>