Vue shows same ride - html

Question

I've a table with rides like this:
<tr>
<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">Verwijder</a>
</td>
<td><show-ride-modal :ride="ride"></show-ride-modal></td>
</tr>
So the last td makes sure there will pop-up a modal if you click on show. In that modal more details of the selected ride are visible.
The problem is that every always the same ride is being passed to the modal. Why is that?
EDIT
<table class="table" v-if="rides">
<thead>
<tr>
<th>Door</th>
<th>Van</th>
<th>Naar</th>
<th>Type</th>
<th>Datum</th>
</tr>
</thead>
<tbody v-for="ride in rides" is="ride" :ride="ride"></tbody>
</table>

Answer 1

Edit: After posting this I learned that Vue.js requires special behavior in the case of tables. See: http://vuejs.org/guide/components.html#Template-Parsing.
It is hard to answer the question if we have to guess what the rest of your code looks like. However, I see some strange things in your code, so maybe if you look at those the issue can be fixed.
Look at this:
<tbody v-for="ride in rides" is="ride" :ride="ride"></tbody>
The 'is="ride"' attribute and ':ride="ride"' parts don't seem to do anything. 'is=' is used in the dynamic component element to assign the component type, and ':ride' could be used to pass props to a component. But you don't appear to have component.
My suggestion would be change the code to this:
<table class="table" v-if="rides">
<thead>
<tr>
<th>Door</th>
<th>Van</th>
<th>Naar</th>
<th>Type</th>
<th>Datum</th>
<th>Acties</th>
</tr>
</thead>
<tbody v-for="ride in rides" >
<tr>
<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>
<show-ride-modal :ride="ride"></show-ride-modal>
<a v-link="{ name: 'ritten' }" class="btn-edit">Bewerk</a>
<a v-link="{ name: 'ritten' }" class="btn-delete">Verwijder</a>
</td>
</tr>
</tbody>
</table>