Vue.js 动态呈现来自相同插槽名称的组件

所以我在做一个简单的步进器。我的结构是这样的：

<stepper :steps="steps">
    <template slot="stepper:step">
        <div class="">
            {{ first }}
        </div>
    </template>
    <template slot="stepper:step">
        <div class="">
            {{ second }}
        </div>
    </template>
</stepper>

export default {
    data: () => ({
        steps: [
            { name: 'First step' },
            { name: 'second step' },
        ],
        first: 'First content',
        second 'second content',
    })
}

{{first}}
{{second}}
导出默认值{
数据：（）=>({
步骤：[
{name:'第一步'}，
{name:'第二步'}，
],
第一:"第一内容",，
第二个“第二个内容”，
})
}

我的步进机是这样的：

我的步骤是这样的：

现在，我在呈现内容时遇到错误：

vue.runtime.esm.js？2b0e:1888类型错误：将循环结构转换为JSON -->从构造函数为“object”的对象开始 ---属性'\u renderProxy'关闭圆 在JSON.stringify（）上

我已经尝试过了，但这只呈现了我的几个div/输入。那么，从我的代码来看，我该如何解决这个问题呢