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

Question

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

<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 representation component. When I try to pass tr and td elements to it in Laravel Blade like this:

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

How do I register a component:

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

Everything except rows and data elements will be rendered, and the table will become irregular. This is the table content and elements after rendering in the browser:

Table elements in browser images

I read online articles and searched via Q/As but didn't find anything.

Answer 1

It is mentioned in the official documentation DOM template parsing precautions

For more clarity, see also this issue https://github.com/vuejs/Discussion/issue/204