[Bug]: Code block does not react to controls changes for Vue components

[paulgv]

Describe the bug

In docs pages, interacting with the default story's controls does not have any effect on the source code block. The story itself does re-render properly to reflect the controls' state. But the code block seems to be stuck on the initial values.

To Reproduce

https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-alert--docs

Expand the default story's code and interact with controls below.

System

Environment Info:

  System:
    OS: macOS 13.4
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 18.16.0 - ~/.asdf/installs/nodejs/18.16.0/bin/node
    Yarn: 1.22.19 - ~/.asdf/shims/yarn
    npm: 9.5.1 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 114.0.5735.133
    Firefox: 114.0.1
    Safari: 16.5
  npmPackages:
    @storybook/addon-a11y: 7.0.20 => 7.0.20
    @storybook/addon-docs: 7.0.20 => 7.0.20
    @storybook/addon-essentials: 7.0.20 => 7.0.20
    @storybook/addon-storyshots: 7.0.20 => 7.0.20
    @storybook/addon-storyshots-puppeteer: 7.0.20 => 7.0.20
    @storybook/addon-viewport: 7.0.20 => 7.0.20
    @storybook/builder-webpack5: 7.0.20 => 7.0.20
    @storybook/theming: 7.0.20 => 7.0.20
    @storybook/vue: 7.0.20 => 7.0.20
    @storybook/vue-webpack5: 7.0.20 => 7.0.20
    @storybook/vue3: 7.0.20 => 7.0.20
    @storybook/vue3-webpack5: 7.0.20 => 7.0.20

Additional context

This used to work in older versions of Storybook, but I don't remember what exact version that was. Likely Storybook 6 though.

Tried Storybook v7.1.0-alpha.36 as well, the issue is still there.

[shilman]

@chakAs3 is this something you can take a look at? seems like it is likely related to the recent vue3 reactivity changes

[chakAs3]

hi, @shilman @paulgv the default build is using vue 2.7, if you use vue3 source block is reactive. still, I will check the vue2 source implementation and fix it soon

[shilman]

Thanks for checking @chakAs3--great to know this is vue2 issue!

[chakAs3]

Thanks for checking @chakAs3--great to know this is vue2 issue!

yes, actually there are other little issues, dated that I planned to look at.

[chakAs3]

@shilman it is green #23149 if you want to merge it

[paulgv]

Thanks for the fix! I can confirm that this seems to have been resolved in the latest version (upgrading to v7.3 as of writing this).

[chakAs3]

Thanks for the fix! I can confirm that this seems to have been resolved in the latest version (upgrading to v7.3 as of writing this).

Welcome @paulgv