vue scoped slot not being exposed - vue.js

Question

I am trying to build a stepper component, where the stepper will expose to the child component the step, so it can display certain things. However, the child component is not receiving the step.
Child component:
<template>
<v-stepper v-model="e1">
<v-stepper-header>
<template v-for="i in steps.length">
<v-stepper-step
:key="`${i}-step`"
:complete="e1 > i"
:step="i"
complete-icon="$vuetify.icons.check"
>
{{steps[i-1].text}}
</v-stepper-step>
<v-divider
v-if="i < steps.length"
:key="i"
></v-divider>
</template>
</v-stepper-header>
<v-stepper-items>
<v-stepper-content
v-for="(step, i) in steps"
:key="`$step_content_${i}`"
:step="i+1"
>
{{step}}
<slot :step="step"></slot>
<v-btn
v-if="i+1 < steps.length"
color="primary"
#click="nextStep"
:disabled="step.disabled"
>
{{$t('conditions.stepper_continue')}}
</v-btn>
<v-btn
:disabled="e1 < 2"
#click="prevStep"
flat>
{{$t('conditions.stepper_back')}}
</v-btn>
</v-stepper-content>
</v-stepper-items>
</v-stepper>
</template>
Parent:
<StepperComp v-if="mode !=='list'" :steps="steps">
<template v-if="mode !== 'list'" scoped-slot="step">
{{step}}
</template>
</StepperComp>
I am getting the following error:
Property or method "step" is not defined on the instance but referenced during render.
Why is the parent unable to access the step from the scoped slot?

Answer 1

It looks like you misspelled slot-scope (you incorrectly used scoped-slot). In addition, the attribute value is an object of scope data, so you would have to reference step within that object:
<template slot-scope="scopeData">
{{ scopeData.step }}
</template>
<!-- or use object destructuring -->
<template slot-scope="{ step }">
{{ step }}
</template>
The syntax above is actually deprecated since Vue 2.6.0, so you should migrate to the new recommended syntax:
<template v-slot="scopeData">
{{ scopeData.step }}
</template>
<!-- or use object destructuring -->
<template v-slot="{ step }">
{{ step }}
</template>
<!-- or v-slot shorthand: https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand -->
<template #default="{ step }">
{{ step }}
</template>