Javascript 非常简单的vue.js组件生成超过最大调用堆栈大小

我有一个非常简单的vue.js组件，它显示数据2对象和2个字段的列表

组件vue.js代码：

但当我显示此组件时，我有一个错误：

[Vue warn]：nextTick中的错误：RangeError:最大调用堆栈大小 超过

我不明白为什么我的循环会抛出处理我的少量数据的错误。 我有另一个组件，在挂载时通过SQL promise检索数据，我不会生成此错误。此外，我有更多关于这个组件的数据，但没有调用堆栈错误。这对我来说很奇怪

---

我忘记了什么细节？

问题如下：

您定义了一个名为：genre的组件流派 b-card中的tag=genre尝试将genre组件用作卡 结果是您正在递归地加载自己的组件，该组件将通过相同的循环再次加载您的组件。直到达到最大堆栈大小

下面的沙盒显示，如果重命名组件，Vue将抱怨它试图加载的类型元素不存在。否则会出现最大调用堆栈错误

---

问题如下：

您定义了一个名为：genre的组件流派 b-card中的tag=genre尝试将genre组件用作卡 结果是您正在递归地加载自己的组件，该组件将通过相同的循环再次加载您的组件。直到达到最大堆栈大小

下面的沙盒显示，如果重命名组件，Vue将抱怨它试图加载的类型元素不存在。否则会出现最大调用堆栈错误

---

组件名称成为其模板的关键字…好的，我将此信息记在心里。组件名称成为其模板的关键字…好的，我将此信息记在心里。

    <template>

    <div>

        <h1>Genre</h1>

        <b-container>
            <b-row>
                <b-col v-for="data in genre" v-bind:key="data.id" v-bind:title="data.name">
                    <b-card title="fefefe"
                            tag="genre"
                            style="max-width: 20rem;"
                            class="mb-2">
                    </b-card>
                </b-col>
            </b-row>
        </b-container>

    </div>

</template>

<script>

    export default
    {
        name: 'genre',

        data: function ()
        {
            return {
                genre: [
                    {id:1, name:'toto'},
                    {id:2, name:'tata'},
                ]
            }
        },
    }
</script>

<style scoped>

</style>