Vue.js places component above parent element

I have a Vue (v2.5.16) component which uses a <tbody> with a repeating <tr> element in the template. The component data is empty initially, and when I add data, Vue is placing the <tbody> and table rows above and outside the table, just after the #clines div. Why?

Here is the html in question. The component is srvaudit-table-rows, under the <tbody> tag. The component template also uses a <tbody> as the parent element, which I've read is allowed (please correct me if this is wrong).

<div id="app" class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div id="clines" class="table-responsive ctable">
                <table class="table table-sm nowrapp">
                    <thead>
                        <tr>
                            <th>Command</th>
                            <th>Directory</th>
                            <th>Return</th>
                            <th>Pipes</th>
                            <th>When</th>
                            <th>Duration</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>time date</td>
                            <td>/root</td>
                            <td>42</td>
                            <td>2</td>
                            <td>Feb 2</td>
                            <td>44s</td>
                        </tr>
                    </tbody>
                    <srvaudit-command-list></srvaudit-command-list>  // Desired placement of component template and data.
                </table>
            </div>
        </div>
    </div>
</div>

Here is the component.

Vue.component('srvaudit-command-list', {
    template: `
        <tbody>
            <tr v-for="(command, index) in commands" :key="index">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    `,
    props: ['command'],
    data() {
        return {
            commands: []
        };
    },
    mounted: function() {
        Echo.private(`session.${sid}.commands`)
            .listen('CommandReceived', (data) => {
                this.commands.push(data.command);  // Here is where it renders the component after pushing some data.
            });
    },
});

This is how it renders the html after pushing the new command to the commands array.

<div id="app" class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div id="clines" class="table-responsive ctable">
                <tbody>                       // incorrect placement
                    <tr>                      // incorrect placement
                        <td>time date</td>    // incorrect placement
                        <td>/root</td>        // incorrect placement
                        <td>42</td>           // incorrect placement
                        <td>2</td>            // incorrect placement
                        <td>Feb 2</td>        // incorrect placement
                        <td>44s</td>          // incorrect placement
                    </tr>                     // incorrect placement
                </tbody>                      // incorrect placement
                <table class="table table-sm nowrapp">
                    <thead>
                        <tr>
                            <th>Command</th>
                            <th>Directory</th>
                            <th>Return</th>
                            <th>Pipes</th>
                            <th>When</th>
                            <th>Duration</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>time date</td>
                            <td>/root</td>
                            <td>42</td>
                            <td>2</td>
                            <td>Feb 2</td>
                            <td>44s</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Any help is much appreciated! I've been struggling with this for a couple days now and tried it every which way I can find on SO and in the Vue docs.

via Chebli Mohamed