How to use args in a Vue story?

[thany]

I've read this explainer on how to include args in a story. The example stories you get when doing npx storybook init have it working as well. But now I want to use args in a real component we've built, and it won't work. Here's my example:

const Story = (args, { argTypes }) => {
  console.log(args);
  return ({
    props: Object.keys(argTypes),
    components: { Alert },
    template: '<alert :messages="args.messages" />',
  });
};
export const Default = Story;

Observations:

• The console.log just proves that args is being populated with controls values properly.
• The component renders perfectly fine.
• When I put a hardcoded value in :messages, it works fine.
• When I put args.messages in there like above, it complains args is undefined. But the console.log proves that it bloody well isn't! Maybe a different args is undefined, but that doesn't really tell me how to fix it.
• When I change it to args?.messages sure enough the error is gone, but the component always recieves undefined, so it doesn't really fix anything.

Something magical probably still needs to happen, to hook up args to the component props. But I fail to see how this is done. Again, the example stories from the initial installation look like this as well, except for the Template.bind({}) which doesn't help to add.

I've also tried to leave out :messages and hope that something will hook up args by, I dunno, sheer willpower? But nope, in that case the component doesn't recieve anything other than whatever is hardcoded (i.e. all props are recieved as undefined).

So what on good mother Earth could I be missing please?
(and also, this feels like crucial information that ought to be in the documentation mentioned)

Edit
I just found Dealing with complex values where a setup function is added. It looks like it's "sending" the args to the component? So let's try to add it:

const Story = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Alert },
  template: '<alert alert="true" :messages="args.messages" />',
  setup() {
    return {
      ...args,
    };
  },
});

Nope. It's still complaining about undefined args. And again if I hardcode that one prop, all other props are still recieved as undefined.

Edit 2
I remember from writing unittests that I had to pass props via the propsData property, which I tried to add here as well:

const Story = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Alert },
  template: '<alert alert="true" :messages="args.messages" />',
  propsData: { ...args },
});

But then not only does it still not work (in exactly the same manner), but I get an additional warning:

[Vue warn]: option "propsData" can only be used during instance creation with the `new` keyword.

[thany]

As a workaround, I guess I can use the undocumented magical values that get created, for the template to use, sort of like this:

const Story = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Alert },
  template: '<alert :alert="alert" :messages="messages" />',
});

And this hooks up args (still an unused param...) with their corresponding props. What still doesn't work, is changing props before they get "sent" to the component, using one of those setup functions. Fortunately, in this case I can do it in the template. But that doesn't take away the fact that the setup function isn't doing, looking at one of the many scattered examples, what I would expect it to do - sending additional or modified props to the component.

I also tried the mapping option, but quickly came to the conclusion that it cannot do what I need. It appears mapping is nothing more than a rename - which is already possible using the label property in an argType.

Edit
As a more DRY workaround, this works as well. But it feels cheeky, like a hack that shouldn't be neccesary, like a hack that mimicks functionality that should've been added automatically since day 1 of support for Vue components 🤐

const Story = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Alert },
  template: `<alert ${Object.keys(argTypes).map(p => `:${p}="${p}"`).join(' ')} />`, // Readibility ¯\_(ツ)_/¯
});