I have a very simple example, taken from the first page of Vue guide - https://vuejs.org/v2/guide/ I have modified their example, it seems that their original example works for displaying <ol> <li> elements, I have modified it to display <div> elements and that works fine, but no matter what I try, it does not want to render <tr><td> data. In code below, app1 works fine, while app-7 does not work - I already tried modifying it several ways, simplifying it even up to the point where I wanted to get a single <td> to render, but nothing seem to work. Why is that? My code:

html:

<table id="app-7">
    <thead>
        <tr>
            <td>
                id
            </td>
        </tr>
    </thead>
    <tbody>
        <todo-item v-for="item in groceryList"
           v-bind:todo="item"
           v-bind:key="item.id"></todo-item>
        
    </tbody>
</table>

<div id="app1"><test-item v-for="item in groceryList"
                   v-bind:todo="item"
                   v-bind:key="item.id"></test-item></div>

js:

Vue.component('todo-item', {
    props: ['todo'],
    template: '<tr><td>{{ todo.text }}</td></tr>'
});
Vue.component('test-item', {
    props: ['todo'],
    template: '<div><div>{{ todo.text }}</div><div>{{ todo.text }}</div></div>'
});
window.addEventListener('load', function () {
    var app7 = new Vue({
        el: '#app-7',
        data: {
            groceryList: [
                { id: 0, text: 'Vegetables' },
                { id: 1, text: 'Cheese' },
                { id: 2, text: 'Whatever else humans are supposed to eat' }
            ]
        }
    });
    var app1 = new Vue({
        el: '#app1',
        data: {
            groceryList: [
                { id: 0, text: 'Vegetables' },
                { id: 1, text: 'Cheese' },
                { id: 2, text: 'Whatever else humans are supposed to eat' }
            ]
        }
    });
})