5.3>6.0 Migration Vue: controls dont update stories in both docs and canvas tabs

[blowsie]

Describe the bug
Knobs no longer reactively update the props on all components, removing the component from the export default seems to make the component reactive again. At the cost of loosing the docs

To Reproduce
AppIcon.vue

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    role="presentation"
    :style="{ color }"
  >
    <title lang="en">{{ name }}</title>
    <g :fill="color">
      <slot />
    </g>
  </svg>
</template>

<script>
export default {
  name: 'AppIcon',
  props: {
    name: {
      type: String,
      default: 'Icon',
    },
    color: {
      type: String,
      default: 'currentColor',
    },
    size: {
      type: [Number, String],
      default: 24,
    },
  },
}
</script>

AppIcon.stories.js

import { text, color, number } from '@storybook/addon-knobs'
import AppIcon from '@/components/AppIcon/AppIcon'

export default {
  title: 'App/IconTest',
  component: AppIcon,
  parameters: {
    docs: {
      iframeHeight: 80,
    },
  },
}

export const Default = () => ({
  components: { AppIcon },
  props: {
    color: {
      default: color('color', 'currentColor'),
    },
    name: {
      default: text('name', 'Icon'),
    },
    size: {
      default: number('size', 24),
    },
  },
  template: `<AppIcon :color="color" :name="name" :size="size">
  <path
    d="M19.4247 5.63598L18.364 4.57532L12.0001 10.9393L5.63612 4.57532L4.57544 5.63598L10.9394 11.9999L4.57544 18.3639L5.63611 19.4246L12.0001 13.0606L18.364 19.4246L19.4247 18.3639L13.0607 11.9999L19.4247 5.63598Z"
    fill="currentColor"
  />
    </AppIcon>`,
})

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets
If applicable, add code samples to help explain your problem.

System:

Environment Info:
  System:
    OS: Windows 10 10.0.17763
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 84.0.4147.105
    Edge: Spartan (44.17763.831.0)

Additional context
Making this change makes the props work as before

export default {
  title: 'App/IconTest',
  // ====> comment out this line <===== component: AppIcon,
  parameters: {
    docs: {
      iframeHeight: 80,
    },
  },
}

[shilman]

FYI, we’ve released addon-controls in Storybook 6.0. Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

• Controls documentation
• Migration instructions

Please upgrade and try them out today!

[blowsie]

Thanks, I did try to migrate to controls but it seemed the documentation for the Vue implementation was not complete so I wasnt sure how to migrate

[blowsie]

I was able to produce the same issue with the new controls syntax, I also simplified the case.

You can see in the demo, only the name is reactive

AppIcon.vue

<template>
  <div>{{ name }}{{ size }}{{ color }}</div>
</template>

<script>
export default {
  name: 'AppIcon',
  props: {
    name: {
      type: String,
      default: 'Icon',
    },
    color: {
      type: String,
      default: 'red',
    },
    size: {
      type: Number,
      default: 24,
    },
  },
}
</script>

AppIcon.stories.js

import AppIcon from '@/components/AppIcon/AppIcon'

export default {
  title: 'App/Icon',
  component: AppIcon,
  argTypes: {
    color: { control: { type: 'color' } },
  },
  parameters: {
    docs: {
      iframeHeight: 80,
    },
  },
}

export const Template = (args, argTypes) => ({
  props: Object.keys(argTypes),
  components: { AppIcon},
  template:
    '<AppIcon :color="color" :name="name" :size="size"></AppIcon>',
})

export const Default = Template.bind({})
Default.args = {
  color: 'red',
  size: 48,
}

Demo

[blowsie]

Reproduced on version 6.0.7

[shilman]

There’s a known bug where controls only update on inline stories on Docs tab. #11908

[blowsie]

In addition to this, a controls tab does not render at all. Is there additional config for that?

[shilman]

Do you have a repro repo? Screenshots are not enough to identify what the problem is

[blowsie]

I made a repro, it is failing to show tabs, maybe the zero config essential addons are broken too?
https://github.com/blowsie/storybook-vue

[blowsie]

Reproduction is now showing the controls and showing the issue
https://github.com/blowsie/storybook-vue

[shilman]

What issue does it show? When I clone the repo & run it, controls seem to work for me.