[Storybook 6.3.2] Vue 2 slot value not reactive/updating

[wouterkroes]

Describe the bug When in Storybook for Vue 2 I change the slot value it is not reactive/updating. It does updates when I switch from "Canvas" to "Docs".

To Reproduce

System Environment Info: System: OS: Windows Server 2016 10.0.14393 CPU: (4) x64 Intel(R) Xeon(R) Gold 6148 CPU @ 2.40GHz Binaries: Node: 14.17.6 npm: 7.24.0 Browsers: {} npmPackages: @storybook/addon-actions: ^6.3.2 => 6.3.8 @storybook/addon-essentials: ^6.3.2 => 6.3.8 @storybook/addon-links: ^6.3.2 => 6.3.8 @storybook/addon-postcss: ^2.0.0 => 2.0.0 @storybook/addons: ^6.3.4 => 6.3.8 @storybook/builder-webpack5: ^6.3.2 => 6.3.8 @storybook/manager-webpack5: ^6.3.2 => 6.3.8 @storybook/theming: ^6.3.4 => 6.3.8 @storybook/vue: ^6.3.2 => 6.3.8

Additional context The slots implementation is based upon the answer on https://github.com/storybookjs/storybook/discussions/12691.

Many thanks for this awesome product!

[csalvato]

+1, same issue.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[ChrisPlease]

+1, also in storybook 6.4

[anaydotdev]

Are there any updates on this? This is still an issue in 6.4. Currently, changing the slot control value updates in docs but not in canvas.

[Sidnioulz]

Still an issue in 6.5.

[af-owe]

Slots are also not updating in 7.0.0-rc.1 and Vue3/Vite. I have to press the "Remount component" button to see the changes.

[Juanjo-GEx]

Still issue in 7.0.4

[murilobd]

Still issue in 7.1.1

[michaelw85]

Also experiencing this issue with 7.4.5 vue-vite with vue3. In my case, it was probably due to objects being passed as props. I resolved it using toRefs.

[shaniqwa-drm]

still issue in 7.6.17 using storybook/vue3-vite. when a control value is updated, I see this error:

error Error: [@vue/compiler-core] decodeEntities option is required in browser builds.
    at baseParse (@storybook_vue3_dist_entry-preview-docs__mjs.js?v=b155b52a:7628:13)
    at getComponents (@storybook_vue3_dist_entry-preview-docs__mjs.js?v=b155b52a:8267:26)
    at getTemplateComponents (@storybook_vue3_dist_entry-preview-docs__mjs.js?v=b155b52a:8260:23)
    at generateSource (@storybook_vue3_dist_entry-preview-docs__mjs.js?v=b155b52a:8301:143)
    at watch.immediate (@storybook_vue3_dist_entry-preview-docs__mjs.js?v=b155b52a:8296:13)
    at callWithErrorHandling (chunk-HZ6CXQUA.js?v=42df3056:1884:19)
    at callWithAsyncErrorHandling (chunk-HZ6CXQUA.js?v=42df3056:1891:17)
    at job (chunk-HZ6CXQUA.js?v=42df3056:3632:9)
    at doWatch (chunk-HZ6CXQUA.js?v=42df3056:3670:7)
    at watch (chunk-HZ6CXQUA.js?v=42df3056:3497:10)

[valentinpalkovic]

@chakAs3, @kasperpeulen Is this issue already known? I wanted to ping you here since this issue is quite old and originally referenced Vue 2. it seems, though, that the error is also happening for Vue 3.

[kasperpeulen]

@shaniqwa-drm Could you check if this error occurs in 8? I think we did a fix for this, but not sure if it is backported to 7.

[shaniqwa-drm]

@kasperpeulen after upgrade to v8, the error disappear but the controls still don't work. I have also upgraded vue and vite to latest versions

"storybook": "^8.0.0-rc.1",
 "vue": "^3.4.21",
"vite": "^5.1.4",

[shaniqwa-drm]

also I had code that worked in previous versions to display variants via decorator:

const variantsDecorators = [
  () => ({
    template: `
    <div class="flex">
    <span class="mr-3"><story/></span>
    <span class="mr-3"><story loading/></span>
    <span class="mr-3"><story disabled/></span>
    </div>
    <div class="flex py-3">
    <span class="mr-3"><story size='small'/></span>
    <span class="mr-3"><story size='small' disabled/></span>
    </div>
`,
  }),
]

It also stopped working after upgrading to v7 or v8. I assume it's related to the args not triggering component update