Vue 3 timing issue with select control example for components (in this case @carbon/icons-vue icon)

Describe the bug

The component is displayed if I refresh the browser, but not when selecting a story for a second time.

To Reproduce Steps to reproduce the behaviour:

1. Create a simple component expecting an Icon component (using @carbon/vue-icons) e.g. a button
2. Write your story along the lines of the icon example here https://storybook.js.org/docs/vue/essentials/controls
3. View in the storybook.
4. Change the story a few times and note the icon stops being displayed

Expected behavior Icon/Component should be displayed as expected.

Screenshots Icon no longer displayed after changing story from Primary to Secondary and back.

Code snippets FAILING VERSION

import {
  Bee20,
  Carbon20,
  Watson20,
  IbmCloud20,
  EdtLoop20,
  IbmSecurity20,
} from '@carbon/icons-vue';

const icons = {
  Bee20,
  Carbon20,
  Watson20,
  IbmCloud20,
  EdtLoop20,
  IbmSecurity20,
};

export default {
  title: 'Components/CvIconButton',
  component: CvIconButton,
  argTypes: {
    icon: {
      control: {
        type: 'select',
        options: Object.keys(icons),
        value: 'Bee20',
      },
    },
  },
};

const Template = (args, { argTypes }) => {
  args.icon = icons[args.icon];
  return {
    props: Object.keys(argTypes),
    components: { CvIconButton },
    template: `<cv-icon-button v-bind="$props"/>`,
  };
};

export const Primary = Template.bind({});
export const Secondary = Template.bind({});
export const Tertiary = Template.bind({});

WORK AROUND - changed template to

const Template = (args, { argTypes }) => {
  return {
    props: Object.keys(argTypes),
    components: { CvIconButton },
    template: `<cv-icon-button :data-test="label" v-bind="$props" :icon="icon"/>`,
    setup(props) {
      const icon = shallowRef(icons[props.icon]);

      if (icon.value === undefined) {
        // assigning an icon seem sto need a kick
        setTimeout(() => {
          icon.value === icons[props.icon];
        }, 1);
      }

      return { icon };
    },
  };
};

System Please paste the results of npx sb@next info here.

$npx sb@next info

Environment Info:

System: OS: macOS 11.1 CPU: (12) x64 Intel® Core™ i7-8850H CPU @ 2.60GHz Binaries: Node: 14.15.3 - ~/.nvm/versions/node/v14.15.3/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.9 - ~/.nvm/versions/node/v14.15.3/bin/npm Browsers: Chrome: 88.0.4324.150 Edge: 88.0.705.63 Safari: 14.0.2 npmPackages: @storybook/addon-actions: ^6.2.0-alpha.24 => 6.2.0-alpha.24 @storybook/addon-essentials: ^6.2.0-alpha.24 => 6.2.0-alpha.24 @storybook/addon-links: ^6.2.0-alpha.24 => 6.2.0-alpha.24 @storybook/vue3: ^6.2.0-alpha.24 => 6.2.0-alpha.24

Additional context Add any other context about the problem here.

[jonniebigodes]

@phated and @shilman i’ve been doing some testing and we could take the same approach as react js and ts

we could call the snippet your-component.vue3.js.mdx for vue 3 and your-component.vue2.js.mdx and you get the following in the docs:

[phated]

Ah, I found it at https://github.com/carbon-design-system/carbon-components-vue/blob/master/packages/v3/src/components/CvButton/CvButton.stories.js