Tengo la siguiente vista:

 <template> <div class="home"> <Quiz :quizID="this.$route.params.id"/> <p>{{this.$route.params.id}}</p> </div> </template>

El valor de this.$route.params.id se muestra correctamente entre las etiquetas <p> . Pero el componente anterior no obtiene este valor como parámetro. Si lo fuerzo escribiendo <Quiz :quizID="3"/> , funciona y se muestra el componente Quiz con el ID correspondiente.

Pero en cuanto pongo una variable ya nada funciona.

Editar: como se sugiere, aquí está el componente Quiz

 <div> <div class="container flex justify-center mx-auto"> <div class="flex flex-col"> <div class="w-full"> <div class="border-b border-gray-200 shadow"> <table> <tbody class="bg-white"> <tr class="whitespace-nowrap" v-for="player in players" :key="player.quizID"> <td class="px-6 py-4 text-sm text-gray-500" v-if="player.quizID === quizID"> {{player.quizID}} </td> <td class="px-6 py-4" v-if="player.quizID === quizID"> {{player.name}} </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </template> <script> export default { name: 'Quiz', data(){ return { quizzes: [], players: [] } }, props: [ 'quizID' ], methods: { async fetchQuizzes() { const res = await fetch(`http://127.0.0.1:8000/api/quizs`) const data = await res.json() return data.data }, async fetchPlayers() { const res = await fetch(`http://127.0.0.1:8000/api/players`) const data = await res.json() return data.data } }, async created(){ this.quizzes = await this.fetchQuizzes(); this.players = await this.fetchPlayers(); }, } </script>

¿Qué ocurre?