[Bug]: vue-component-meta docgen HMR not working

[hhochart]

Describe the bug

Hi,

i've noticed that when using the new "vue-component-meta" docgen, the story is not updated at all in dev-mode. Only a forced dev-server restart will show the updated content of the story

It looks like the HMR is working, but it does not update the args table properly.

This issue has been briefly mentionned here as well https://github.com/storybookjs/storybook/issues/26465

Am i missing something ?

Thanks !

Reproduction link

https://codesandbox.io/p/devbox/vue3-storybook-vue-component-meta-hmr-r6n2ns

Reproduction steps

1. Click the above link
2. Run pnpm run storybook
3. check the button docs page
4. update the Button.vue component (you can update the intent props comment)

System

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.2.0 - ~/.volta/tools/image/node/22.2.0/bin/node
    npm: 10.7.0 - ~/.volta/tools/image/node/22.2.0/bin/npm
    pnpm: 8.10.2 - ~/.volta/bin/pnpm <----- active
  Browsers:
    Chrome: 125.0.6422.142
    Safari: 17.5
  npmPackages:
    @storybook/addon-essentials: ^8 => 8.1.5 
    @storybook/addon-interactions: ^8 => 8.1.5 
    @storybook/addon-links: ^8 => 8.1.5 
    @storybook/blocks: ^8 => 8.1.5 
    @storybook/test: ^8 => 8.1.5 
    @storybook/vue3: ^8 => 8.1.5 
    @storybook/vue3-vite: ^8 => 8.1.5 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8 => 8.1.5

Additional context

No response

[TylerOliverMCG]

I'm also seeing this issue on 8.1.10.

[DanDeLuca]

I'm also seeing this issue on 8.2.6.

[Walnussbaer]

HMR doesn't work for my either when using Storybook 8.2.6 and the vue-component-meta plugin (also mentioned in https://github.com/storybookjs/storybook/discussions/28817)

[Walnussbaer]

The interesting thing is: in a Storybook sandbox project for Vue, the HMR works as epexcted and the args table gets updated as well (when you refresh the browser with F5)

[GeekSquirrel]

The interesting thing is: in a Storybook sandbox project for Vue, the HMR works as epexcted and the args table gets updated as well (when you refresh the browser with F5)

I tested the examples in the Storybook sandbox repo using Stackblitz, and I noticed that the docgen option is not set to "vue-component-meta" in .storybook/main.ts, which means I'm still using the default value, "vue-docgen-api". That's why HMR works as expected. However, if I set the docgen option to "vue-component-meta", HMR breaks again.

As for the second question, why the args table in the sandbox project looks more like it's using "vue-component-meta" than "vue-docgen-api", it's because all the .vue and .stories.ts example files are well-defined. If you follow the examples, you'll get a nicely formatted args table with props, events, and other sections as well.

[kasperpeulen]

cc @larsrickert