Почему этот пользовательский компонент размещается за пределами <tr>?

таблица.vue

...
        <tbody class = "table-body">
            <slot></slot>
        </tbody>
...

TableCellRow.vue

<template>
    <td class = "table-row-cell" :class = "this.class">
        <slot></slot>
    </td>
</template>

как я пытался его использовать:

<my-table>
                <template #default>
                    <tr>
                        <td>i am inside the tr</td> <----- this is inside the <tr>
                            <table-row-cell> <-------- this is outside of the <tr>
                                    i am outside the tr
                            </table-row-cell>
                    </tr>
                </template>
            </my-table>

а вот так:

            <my-table>
                <tr>
                    <td>i am inside the tr</td>
                    <table-row-cell>
                        i am outside the tr
                    </table-row-cell>
                </tr>
            </my-table>

в этом последнем случае я получаю вот что:

<tbody class = "table-body"> i am inside the tr <td class = "table-row-cell"> i am outside the tr </td></tbody>

и в первом случае я получаю это:

<tbody class = "table-body"><tr><td>i am inside the tr</td></tr><td class = "table-row-cell"> i am outside the tr </td></tbody>

Я также пробовал только это:

            <my-table><template #default>
                <tr>
                    <table-row-cell>
                        i am outside the tr
                    </table-row-cell>
                </tr>
            </template>
</my-table>

но я просто понимаю это:

<tbody class = "table-body"><tr></tr><td class = "table-row-cell"> i am outside the tr </td></tbody>

так что там такого? Я не могу использовать компонент внутри тега, в котором есть только тег? или типа в чем проблема? Если я помещаю свой компонент внутри тега, почему он либо выбрасывает и отображает только , либо либо отображает и помещает все остальное под ним? Как что? Почему Vue должен быть ТАКИМ сложным, без всякой причины?

Я просто хочу вставить элемент в слот своей пользовательской таблицы и поместить в него собственный компонент — почему это должно быть так сложно? Я спотыкаюсь или что-то в этом роде? У меня не пропущено ни одного закрывающего тега, с моими компонентами все в порядке, так почему же это происходит?

Самый простой пример, который я могу привести, чтобы воспроизвести проблему локально:

<table class = "i-am-the-example-table">
            <tbody>
                <tr class = "i-am-the-tr-hello">
                    <table-row-cell>
                        i am outside of the TABLE itself, but idk why
                    </table-row-cell>
                </tr>
            </tbody>
        </table>

компонент tableRowCell:

<template>
    <td>
        <slot></slot>
    </td>
</template>

компонент зарегистрирован глобально:

import TableRowCell from "./components/custom/Tables/TableRowCell.vue";
app.component("TableRowCell", TableRowCell);

как это выглядит с моей стороны:

🤔 А знаете ли вы, что...
С помощью JavaScript можно валидировать данные на стороне клиента, что улучшает пользовательский опыт.