Passing a Vue component into a slot with args

[AnnaYuS]

Is there a better way to add a component into the slot?
The component is something like this:

  <div class="header-with-action underlined">
    <slot />
    <div class="header-with-action-button">
      <slot name="button" />
    </div>
  </div>

The story that needs to be improved:

const Template = (args, { argTypes }) => ( {
    components: { HeaderWithAction, ButtonNew },
    props: Object.keys(argTypes),
    template: `
    <HeaderWithAction v-bind="$props">
        <template #button>
               <component :is="button"></component>

               // this always renders as a string
               {{ button }}
        </template>
     </HeaderWithAction>
`
  }
}

export const Default = Template.bind({})
Default.args = {
  button: 'ButtonNew'
}