[6.3][6.4] [Vue3] Controls not updating the component if a wrapper is present

[johanvanhelden]

Describe the bug
After updating to 6.3 I noticed all my story controls stopped working. I came from 6.2.
If a wrapper is present around the Vue component (and all my stories have a layout wrapping around them), the controls are no longer updating the component. If I refresh the page the state does update if the control's URL parameters are present.

To Reproduce

• Clone / download: https://github.com/johanvanhelden/sb-controls-not-updating-component
• Run: npm run storybook
• Click the Footer Working - Without wrapper and check that the alignment control is working.
• Click the Footer Broken - With wrapper and see the alignment control is not working.
• Refresh the page of the broken component after changing the alignment and notice it does update.

System

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
  Binaries:
    Node: 14.13.0 - ~/.nvm/versions/node/v14.13.0/bin/node
    Yarn: 2.4.2 - /usr/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.13.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.77
  npmPackages:
    @storybook/addon-actions: ^6.4.0-alpha.4 => 6.4.0-alpha.4
    @storybook/addon-docs: ^6.4.0-alpha.4 => 6.4.0-alpha.4
    @storybook/addon-essentials: ^6.4.0-alpha.4 => 6.4.0-alpha.4
    @storybook/addon-links: ^6.4.0-alpha.4 => 6.4.0-alpha.4
    @storybook/vue3: ^6.4.0-alpha.4 => 6.4.0-alpha.4

[euaaaio]

The same issue with slots:

Badge.vue

<template>
  <div>
    <slot></slot>
  </div>
</template>

Badge.stories.ts

import { Story, Meta } from '@storybook/vue3'
import { defineComponent } from 'vue'

import Badge from './Badge.vue'

export default {
  title: 'Badge',
    component: Badge,
    argTypes: {
      default: {
        control: 'text'
      }
    }
} as Meta

export const Default: Story = args => defineComponent({
  components: { Badge },
  setup: () => ({ args }),
  template: '<badge>{{ args.default }}</badge>'
})

[johanvanhelden]

I've noticed changing the implementation to use the props option API, it does work....

export const Default = (args, { argTypes }) => ({
    components: { Layout, PageCard, FormFooter, Button },
    /**
     * Handles the setup.
     *
     * @returns {object}
     */
    setup() {
        return { args };
    },
    props: Object.keys(argTypes),
    template: `
        <div>
                <FormFooter v-bind="$props" class="mt-6">
                    <button type="button">
                        Button 1
                    </Button>

                    <button type="button">
                        Button 2
                    </Button>
                </FormFooter>
        </div>
    `,
});

But having to refactor all my stories would suck as last month a refactored everything to use the setup() composition API as per the docs...

It also makes more sense to use the new composition API.

[euaaaio]

Looks like this bug appeared in @6.3.0-rc.5 and related to #15345. Can be fixed by reverting #15168.

[euaaaio]

@shilman, is it enough to release a fix?

[johanvanhelden]

Or, if the composition API method is no longer supported and it needs to be changed to the props method, the documentation should reflect this.

I hate to refactor everything again only to have the bug fixed and needing to refactor again if the props method becomes deprecated. It's very confusing to have 2 possible implementation methods and have them break.

[shilman]

@johanvanhelden I'm going to revert the PR and release today

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.6 containing PR #15409 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[johanvanhelden]

I can confirm everything is working flawlessly again, thank you for the quick release @shilman ! ❤️

[euaaaio]

Yes, I've already updated my code as well. It works.

[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

[euaaaio]

npx sb upgrade

This command cannot downgrade 6.4.0-alpha.6 → 6.3.2.

Upgrade today to the @latest NPM tag to try it out!

It works.