[Vue3] addon-docs (essentials) Global components not recognized in docs tab.

[Mootook]

Describe the bug Vue applications allow for global component registration through

// main.js
import MyComponent from '../MyComponent.vue'
const app = createApp(app)
app.component('MyComponent', MyComponent)
app.mount('#app')

// can be imitated in .storybook/preview.js
import { app } from '@storybook/vue3'
import MyComponent from '../MyComponent.vue'
app.component('MyComponent', MyComponent)

These global components are then used throughout the codebase, without the need for manual imports and declaring the component in the options. This works in a component story's Canvas view, yet in the docs view, there is [Vue warn]: Failed to resolve component: MyComponent, and the component isn't available.

To Reproduce Steps to reproduce the behavior:

1. I created an isolated repo to test it.

   git clone https://github.com/Mootook/global-component-vue-sb
   yarn install
   yarn storybook

2. Go to the "HelloWorld" story once Storybook launches
3. Notice the Global button component is available in the canvas but not in docs tab (warning in console)

Expected behavior The global component is available in both the docs and canvas tabs of a story.

Screenshots

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

System Please paste the results of npx sb@next info here. Environment Info: System: OS: macOS 10.15.7 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Binaries: Node: 12.20.1 - ~/.nvm/versions/node/v12.20.1/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.10 - ~/.nvm/versions/node/v12.20.1/bin/npm Browsers: Chrome: 88.0.4324.150 Safari: 14.0.3 npmPackages: @storybook/addon-actions: ^6.2.0-alpha.25 => 6.2.0-alpha.25 @storybook/addon-essentials: ^6.2.0-alpha.25 => 6.2.0-alpha.25 @storybook/addon-links: ^6.2.0-alpha.25 => 6.2.0-alpha.25 @storybook/vue3: ^6.2.0-alpha.25 => 6.2.0-alpha.25

[phated]

I actually can't find a good way to support this. The current addon-docs logic uses Vue 3's render method to insert a component directly into the page. Even if an "app" was used, there doesn't seem to be an API to clone the preview "app" into an isolated environment.

[phated]

Scratch that, right as I hit submit, I had an idea and it looks like it works.

[shilman]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.26 containing PR #13894 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.