Vue.js table component not working
<p>I've made a table and every <code>tbody</code> item is a component like this:</p>

<pre><code>&lt;div class="panel"&gt;
    &lt;table class="table"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Door&lt;/th&gt;
            &lt;th&gt;Van&lt;/th&gt;
            &lt;th&gt;Naar&lt;/th&gt;
            &lt;th&gt;Type&lt;/th&gt;
            &lt;th&gt;Datum&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
       &lt;ride v-for="ride in rides" :ride="ride"&gt;&lt;/ride&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p><strong>ride:</strong></p>

<pre><code>&lt;template&gt;
&lt;show-ride-modal :ride="ride"&gt;&lt;/show-ride-modal&gt;
&lt;tr&gt;
    &lt;td&gt;{{ ride.user.name }}&lt;/td&gt;
    &lt;td&gt;{{ ride.location.from }}&lt;/td&gt;
    &lt;td&gt;{{ ride.location.to }}&lt;/td&gt;
    &lt;td&gt;{{ ride.type.name }}&lt;/td&gt;
    &lt;td&gt;{{ ride.date }}&lt;/td&gt;
    &lt;td&gt;
        &lt;a @click="show" class="btn-show"&gt;Bekijk&lt;/a&gt;
        &lt;a v-link="{ name: 'ritten' }" class="btn-edit"&gt;Bewerk&lt;/a&gt;
        &lt;a v-link="{ name: 'ritten' }" class="btn-delete"&gt;Verwijder&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;                   
&lt;/template&gt;
</code></pre>

<p>So I would expect it to look like this:</p>

<p><a href="https://i.stack.imgur.com/PzSn4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PzSn4.png" alt="enter image description here"></a></p>

<p>But it looks like this:</p>

<p><a href="https://i.stack.imgur.com/2rWnb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2rWnb.png" alt="enter image description here"></a></p>

<p>How can I fix this?</p>