How to render a dynamic slot component in Storybook (Nuxt3)

Question

I have a dynamic named slot that looks as below.

<div>
  <template #middle>
    <slot :name="`middle-${index}`" />
  </template>
</div>

I want to render this in Storybook but not sure how to set the template and render it. The code below wouldn't work. How can I achieve this?

template: `
  <StoryComponent v-bind="args">
    <template 
      v-for="(content, index) in args.middle" 
      :key="index" 
      :slot="'middle-' + index" //WANT TO SET THE NAME PROPERLY
    >
      {{content}}
    </template>
  </StoryComponent>
`,

Answer 1

I solved it by changing it to below.

<template 
      v-for="(content, index) in args.middle" 
      :key="index" 
      #[\`middle-\${index}\`]
    >

Answer 2

You can use index as props

 <StoryComponent v-bind="args">
<template 
  v-for="(content, index) in args.middle" 
  :key="index" 
  :slot="'middle-' + index"
  :index="index"
>
  {{content}}
</template>