Why did the v-bind="$props" stopped to work on Vue 3?

[K-Schaeffer]

Updating storybook from 7.0.11 to 7.1.0 I noticed that my stories using $props to bind stopped to work, e.g.:

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

Basically, all binds stop to work as they used to. With that, I had to refactor to the args syntax, e.g.:

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

Doing some research about this I found this PR #13981, which basically added this new syntax to Storybook. What's odd is that this addition was released into 6.x and testing here I could check that until 7.1.0-alpha.10 it worked, so the changes made on 7.1.0-alpha.11 broke this functionality, probably on this commit 8a50224.

So, to summarize, the purpose of this discussion is:

1. Understand if this breakiing change was really intended, as the releases don't mention that specifically after 6.x version that released the 13981;
2. Check why the actions syntax doesn't work with args binding and if it makes sense, e.g.:
   Used to work:

export default {
component: MyComponent,
argTypes: {
  myEvent: {
    action: 'my-event',
    control: { disable: true },
  },
},
};

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

Current way of making it work:

export default {
component: MyComponent,
argTypes: {
},
};

const Template = (args) => ({
components: { MyComponent },
setup() {
  return { args };
},
methods: {
  myEvent(payload) {
    action('my-event')(payload);
  },
},
template: `
  <ReadingQuiz
    v-bind="args"
    @myEvent="myEvent"
  />
`,
});

This issue was also mentioned here #18688.

So that's pretty much it, the few disadvantages I currently see on using the args syntax are the requirement of using this legacy action syntax with methods and I also used to face some reactivity issues on some edge cases, though I couldn't really reproduce them so we might count only this actions thing as a current disadvantage.

[Dtsiantaris]

Have you actually figured this out? I cannot make both slots and props work together.

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { BSelect },
  setup() {
    return { args };
  },
  template: `
    <BSelect v-bind="args">
    {{ args.default }}
    </BSelect>
    `,
});

This is the only decent working template. But trying to add options, which is an array, like that:

export const Secondary = Template.bind({});
Secondary.args = {
  label: "Secondary label",
  options: [
    { value: "foo", label: "fooLabel" },
    { value: "bar", label: "barLabel" },
  ],
};

produces this code:

Which makes the options not rendering.

[joaopedrodcf]

This helped me a lot thank you @K-Schaeffer 🎖️