Vue.js component does not receive prop - html

Question

I would like to pass a ride to the show-ride-modal. When somebody clicks on the button show a modal will pop-up with the ride information.
<table class="table">
<thead>
<tr>
<th>Door</th>
<th>Van</th>
<th>Naar</th>
<th>Type</th>
<th>Datum</th>
</tr>
</thead>
<tbody>
<tr v-for="ride in rides">
<show-ride-modal :ride="ride"></show-ride-modal>
<td>{{ ride.user.name }}</td>
<td>{{ ride.location.from }}</td>
<td>{{ ride.location.to }}</td>
<td>{{ ride.type.name }}</td>
<td>{{ ride.date }}</td>
<td>
<a #click="show" class="btn-show">show</a>
<a v-link="{ name: 'ritten' }" class="btn-edit">Bewerk</a>
<a v-link="{ name: 'ritten' }" class="btn-delete">Remove</a>
</td>
</tr>
</tbody>
</table>
My show ride modal component:
<template>
<modal title="Bekijk rit">
<form class="Modal__form" #submit.prevent="createTopic">
<p>test</p>
<p>{{ ride.user.name }}</p>
</form>
</modal>
</template>
<script>
import Modal from './Modal.vue'
export default {
components: { Modal },
props: ['ride'],
data () {
return {
showLoader: false
}
}
}
</script>
The problem is that the ride is not being passed to the <show-ride-modal>. What could be wrong?