Vue JS - Les éléments <tr>, <td> ne s'affichent pas lorsqu'ils sont transmis au composant table

Question

J'ai enregistré un composant de table de fichiers en utilisant 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>

Je souhaite l'utiliser comme composant de représentation. Quand j'essaie de lui transmettre des éléments tr et td dans Laravel Blade comme ceci :

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

Comment enregistrer un composant :

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

Tout sauf les lignes et les éléments de données sera rendu et le tableau deviendra irrégulier. Voici le contenu du tableau et les éléments après rendu dans le navigateur :

Éléments de tableau dans les images du navigateur

J'ai lu des articles en ligne et effectué des recherches via les questions/réponses, mais je n'ai rien trouvé.

Answer 1

La documentation officielle mentionne Précautions d'analyse du modèle DOM

Pour plus de clarté, veuillez également consulter ce numéro https://github.com/vuejs/Discussion/issue/204