Duplicated mounted call on component in Vue story

Describe the bug When I include a component in a story, the ‘mounted’ lifecycle is called twice. This doesn’t happen when the component is used outside Storybook

Expected behavior I expect that the ‘mounted’ lifecycle is called only once

Code snippets This is my code. I’m following the structure tu use ‘CONTROLS’

import Docs from './index.mdx';
import { action } from '@storybook/addon-actions';

export default { title: '2. Molecules/StarRating', component: StarRating };

// Parameters of the story
const parametersStory = {
  controls: { expanded: true, hideNoControlsWarning: true },
  docs: { page: Docs },
  design: { disable: true },
  jest: ['starRating.test.js']
};

// Argtypes for controls
const argTypesStory = {
  skillLevel: { control: { disable: true } },
  levels: { control: { disable: true } }
};

// Actions on events
const actionsData = {
  onLevelSelected: action('onLevelSelected')
};

// The template with args and argTypes
const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { StarRating },
  template:
    '<StarRating\n' +
    ' :disabled="disabled"' +
    ' :visibleEmptyStar="visibleEmptyStar"' +
    ' :levels="levels"\n' +
    ' :skillLevel="skillLevel"\n' +
    ' @onLevelSelected="onLevelSelected"\n' +
    '></StarRating>'
});

// The Default component that extends the Template
export const Default = Template.bind({});
Default.args = Object.assign(
  {},
  {
    levels: [1, 2, 3, 4, 5],
    skillLevel: 2
  },
  actionsData
);

// Final declarations to use the story
Default.parameters = parametersStory;
Default.argTypes = argTypesStory;

In the ‘Template’ declaration, if I didn’t include the part args, { argTypes } it mounts only once, as expected. However, without that code, controls don’t work.

Version I’m using the Storybook version 6.1.14 and the addons have all the same version

Could you please help me to find a solution to this struggling problem? Thanks a lot

[pocka]

I think this is due to Dynamic Source Rendering mounts the component in order to obtain runtime props. (source code)

The easiest workaround is to disable the Dynamic Source Rendering by setting type: "code" to docs.source.

- export default { title: '2. Molecules/StarRating', component: StarRating };
+ export default {
+   title: '2. Molecules/StarRating',
+   component: StarRating,
+   parameters: { docs: { source: { type: "code" }}}
+ };

Unless you put a side-effect that affects outside the Vue tree things, you can ignore that (because it’s happening in a separated tree).

[pocka]

@mattiaerli97 Yes, this is specific to Vue.js with Dynamic Source Rendering. The Docs Addon switches to Dynamic Source Rendering when the story is Args Story (stories takes one or more arguments). The Dynamic Source Rendering feature tries to build “live” code snippets by serializing VNode (Vue’s virtual DOM tree data/node).

The { type: "code" } parameter disables the Dynamic Source Rendering feature and it renders a story source code.

The reason we mount a story for this is, the only way to grab the real-time VNode is to mount the story in the decorator AFAIK. I know this comes with downsides and limitations but this is the most straightforward and low-effort way to archive the goal. I think it’s just okay if we provide a workaround or escape hatch. I hope someone will implement the feature for Vue3 in a better way… 🎋