Addon-controls/Vue3: Control update while using decorators causes component to unmount/remount

[treardon17]

Describe the bug

When toggling a control value, the component unmounts and then remounts, preventing internal component state from being persisted. This prevents things like transitions and animations from being possible to represent via the controls.

To Reproduce

https://github.com/treardon17/storybook-decorator-bug

System

System:
    OS: macOS 13.2.1
    CPU: (12) arm64 Apple M2 Max
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.13.0/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Firefox: 108.0.1
    Safari: 16.3
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.53 => 7.0.0-beta.53
    @storybook/addon-interactions: ^7.0.0-beta.53 => 7.0.0-beta.53
    @storybook/addon-links: ^7.0.0-beta.53 => 7.0.0-beta.53
    @storybook/blocks: ^7.0.0-alpha.8 => 7.0.0-alpha.8
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1
    @storybook/vue3: ^7.0.0-beta.53 => 7.0.0-beta.53
    @storybook/vue3-vite: ^7.0.0-beta.53 => 7.0.0-beta.53

Additional context

This issue is very similar to #13913, but a slight variation. Everything works fine when not using decorators (ie. the vue component mounts once and does not unmount when changing the args via the controls), but as soon as a decorator is added the components are now mounted/unmounted continuously when changing args via the controls.

Toggling this line on/off will demonstrate the behavior. https://github.com/treardon17/storybook-decorator-bug/blob/bd117642e0cb586a1d9d79966f76da22e83367de/.storybook/preview.ts#L28

Only mounting the component once allows for tests that watch props or deal with animations that require state, and using decorators allows for libraries like Vuetify to be able to inject a theme to the child components, so ideally both would work.

[shilman]

@chakAs3 is this something you can look into when you have time?

[chakAs3]

Yes sure I will be on it .

[chakAs3]

I guess I already fixed it in the csf2 tests PR, as I encountered while creating these tests : : : : :

[treardon17]

@chakAs3 fantastic! Thanks so much for looking into this 💥 is this the PR you're referencing? #21140

[chakAs3]

@chakAs3 fantastic! Thanks so much for looking into this 💥 is this the PR you're referencing? #21140

Yes i will be closing with another regarding the source snippet, it will be ready for Monday i will ping if it is ready to pull

[Ballpin]

Seems like this happens when you create a fresh vue3 project with storybook.

Add console.log in setup and you see that it popus on every prop change. I used Button -> Secondary as an example.

Used these dependencies

    "pinia": "^2.0.32",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
   "@storybook/addon-actions": "^6.5.16",
    "@storybook/addon-essentials": "^6.5.16",
    "@storybook/addon-interactions": "^6.5.16",
    "@storybook/addon-links": "^6.5.16",
    "@storybook/builder-vite": "^0.4.2",
    "@storybook/testing-library": "^0.0.13",
    "@storybook/vue3": "^6.5.16",

[thomasaull]

@chakAs3 What needs to be done for the PR #21140 to get merged? Maybe we can extract the fix for this issue in it‘s own PR to speed things up? I could take care of this if you want me to.

[chakAs3]

hi @thomasaull i just looked at your dependencies, you have actually to use v7. as my PR is target the new RC and not the old version

[thomasaull]

@chakAs3 Maye you intent to answer @Ballpin? Or what dependencies of mine are you refering to? :)

[chakAs3]

@thomasaull i'm sorry yes intent @Ballpin

[Ballpin]

Ahh. Ok so the bug is fixed in v7?

Thanks for rhe answer.

[chakAs3]

yes @Ballpin welcome, please try to upgrade your storybook to 7. check that let me know if it is fine for you. or use this repo https://github.com/storybookjs/vue3-vuetify-examples, has many examples with decorators, you can test faster and this has the latest patch for @storybook/vue3 with 1 PR not yet merged

[shilman]

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.7 containing PR #21954 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future