Storybook: @storybook/addon-controls with vuejs, component reactive in docs while not reactive in canvas

Created on 10 Jul 2020 · 2Comments · Source: storybookjs/storybook

My component is reactive only in Docs tab.

My story

export default {
  title: "WCtaButton",
  component: WCtaButton,
  argTypes: {
    url: { control: 'text' },
    cta: { control: 'text' },
  }
}

export const defaultState = (args) => {
  console.log(args)
  return ({
    components: { WCtaButton },
    template: `<div :style="style">
    <w-cta-button v-bind="props"/>
    </div>`,
    data() {
      return {
        style: {
          height: '10em',
          border: '1px solid'
        }
      }
    },
    computed: {
      props() {
        return args
      }
    },
    mounted() {
      console.log('mounted')
    }
  })
};
defaultState.args = adapter(manifest)

Controls are populated correctly, defaults included. Though when I start typing the component doesn't update

I can see the args, being logged on each input event, but component doesn't get remounted

If I switch tab to Docs, I can immediately see my latest input being rendered, and when I type in more the component is reactive.

Also, I see that here the component is remounted on each input event

Am I doing anything wrong?

System info
Environment Info:

System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i7-2700K CPU @ 3.50GHz
Binaries:
Node: 10.16.3 - C:\Program Files\nodejs\node.EXE
Yarn: 1.19.1 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.8.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0
npmPackages:
@storybook/addon-a11y: ^6.0.0-rc.1 => 6.0.0-rc.1
@storybook/addon-actions: ^6.0.0-rc.1 => 6.0.0-rc.1
@storybook/addon-controls: ^6.0.0-rc.1 => 6.0.0-rc.1
@storybook/addon-docs: ^6.0.0-rc.1 => 6.0.0-rc.1
@storybook/addon-links: >=6.0.0-rc.1 => 6.0.0-rc.1
@storybook/addon-storysource: ^6.0.0-rc.1 => 6.0.0-rc.1
@storybook/addon-viewport: ^6.0.0-rc.1 => 6.0.0-rc.1
@storybook/vue: ^6.0.0-rc.1 => 6.0.0-rc.1