Vue JS - <tr> , <td> elements not getting rendered when passed to table component

Question

I have registered a single file table component using vue.js as:

   <template>
        <div>
            <table class="table border">
                <thead>
                    <tr>
                        <td>header 1</td>
                        <td>header 2</td>
                    </tr>
                </thead>
                <tbody>
                    <slot></slot>
                </tbody>
            </table>
        </div>
    </template>
    
    <script>
    export default {};
    </script>
    <style></style>

I want to use it as a representational component. When I try to pass tr and td elements to it in Laravel blade like:

<table-component>
                <tr>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                </tr>
</table-component>

how I registered the component:

Vue.component(
    "table-component",
    require("./components/admin/TableComponent.vue").default
);

everything get rendered except row and data elements and the table gets out of form. here`s table content and elements after getting rendered in browser:

table elements in browser picture

I have read online articles and searched through Q/As but couldn`t find anything.

Answer 1

It's mentioned in the official docs DOM Template Parsing Caveats

Also refer this issue for more clarity https://github.com/vuejs/Discussion/issues/204