Dynamically rendering components from the same slot name

Question

So I am making a simple stepper. I have my structure like so:

<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',
    })
}

My stepper is like so: https://gist.github.com/natecorkish/81e22edb9e41348e579b705c3a4d3e54

and my step is like so: https://gist.github.com/natecorkish/45108d046ddc7d116110c973b608a774

Now, I am get an errror when rendering the content:

vue.runtime.esm.js?2b0e:1888 TypeError: Converting circular structure to JSON --> starting at object with constructor 'Object' --- property '_renderProxy' closes the circle at JSON.stringify ()

I have tried VueJS Render VNode but that only renders a couple of my divs/inputs. So, judging from my code, how can I fix this?