Story canvas isn't updated on Controls prop change for Vue components

[thalesagapito]

Describe the bug
The story canvas isn't updated when I change prop values in the Controls tab. However, when refreshing the page the props are loaded correctly. Also, the docs page updates the component like it should.

To Reproduce
https://github.com/thalesagapito/sb-repro

Hosted at
https://621ee2f9beff3f003ac5bd73-nqmnedayec.chromatic.com/?path=/story/atoms-vpillbox--base

System
Environment Info:

System:
OS: macOS 11.5.2
CPU: (8) x64 Apple M1
Binaries:
Node: 14.18.1 - /usr/local/bin/node
Yarn: 3.2.0 - ~/.yarn/bin/yarn
npm: 6.14.15 - /usr/local/bin/npm
Browsers:
Chrome: 98.0.4758.109
Firefox: 96.0.3
npmPackages:
@storybook/addon-actions: ^6.5.0-alpha.45 => 6.5.0-alpha.45
@storybook/addon-docs: ^6.5.0-alpha.45 => 6.5.0-alpha.45
@storybook/addon-essentials: ^6.5.0-alpha.45 => 6.5.0-alpha.45
@storybook/addon-links: ^6.5.0-alpha.45 => 6.5.0-alpha.45
@storybook/builder-webpack5: ^6.5.0-alpha.45 => 6.5.0-alpha.45
@storybook/manager-webpack5: ^6.5.0-alpha.45 => 6.5.0-alpha.45
@storybook/vue: ^6.5.0-alpha.45 => 6.5.0-alpha.45

Additional context
This was reported before at #11051

[Sidnioulz]

Confirming this bug for Vue 2.6 / SB 6.4, and for Vue 2.7 / SB 7.0-alpha37.

On the alpha branch, because docs now use the canvas mode renderer, the bug has propagated to the docs page too.

[Sidnioulz]

Duplicate of #16750

[thalesagapito]

Not sure if this is going to help anybody, but I finally got this to work. The issue was that I was destructuring the args of the render function (and probably losing reactivity). I went from this:

export const Sandbox: Story = {
  render: ({ ['default']: defaultSlot, ...args }) => ({
      setup: () => ({ args, defaultSlot }),

to this:

export const Sandbox: Story = {
  render: args => ({
    setup: () => ({ args, defaultSlot: args.default }),

And now it works fine.

[shilman]

closing as dupe to #16750