Vue3: issues when working with args in stories

Describe the bug This is a follow up to some changes I introduced in this PR: https://github.com/storybookjs/storybook/pull/15168

While working with the new released version 6.3.0 in a project, I found some issues when working with args/props in story components:

• Args get passed the the component regardless of using v-bind="args"
• No way of overwriting specific args in setup or on the component itself
• Passing a subset of args to the component does not work

I created a component which demonstrates all theses issues over here: https://github.com/thomasaull/storybook-args-bugs/blob/master/src/stories/BugProps.stories.js

Theses issued do not happen with 6.2.9, so they are probably related to the PR I mentioned above.

I tried to reintroduce the way props/args were handled before the changes in this PR: https://github.com/storybookjs/storybook/pull/13981 and this fixes all the issues I mentioned abvoe and the problem with the full re-render on args update (https://github.com/storybookjs/storybook/issues/13913) aswell. So, in my opinion it would make sense to go back to using this method of handling args/props… The downside is, this would introduce some breaking changes:

Before:

const Template = (args) => ({
  components: { MyComponent },
  setup() {
    return { args };
  },
  template: '<MyComponent v-bind="args"/>',
});

After:

const Template = (args, { argTypes }) => ({
  components: { MyComponent },
  props: Object.keys(argTypes),
  template: '<MyComponent v-bind="$props"/>',
});

The amount of boilerplate code necessary wouldn’t change, just the way the stories are defined (It’d be basically the same way it’s handled with vue2)

Edit: Found one issue so far with the reintroduced code before https://github.com/storybookjs/storybook/pull/13981:

• Using inject in a decorator does not seem to work Got it working ✅

To Reproduce

• checkout https://github.com/thomasaull/storybook-args-bugs
• install, run and open http://localhost:6006/?path=/story/bugprops--args-always-passed

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.2 containing PR #15409 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

[shilman]

IMO using the vue3 setup method is strictly an improvement over the vue2 args technique. Vue2 automagically maps the args passed into your story function into a reactive store, so there is no way for the user to manually curate the values of the args. The setup function is a natural and “vue3-native” way to explicitly create that mapping.