fix(storyshots): vue3 render with the vue app

addons/storyshots/storyshots-core/src/frameworks/vue3/renderTree.ts

@@ -1,12 +1,14 @@
 import * as Vue from 'vue';
 import global from 'global';
 import dedent from 'ts-dedent';
+import { app, activeStoryComponent } from '@storybook/vue3';
 
 const { document } = global;
 
 // This is cast as `any` to workaround type errors caused by Vue 2 types
-const { render, h } = Vue as any;
+const { h } = Vue as any;
 
+let vm: any;
 function getRenderedTree(story: any) {
   const component = story.render();
 
@@ -14,20 +16,12 @@ function getRenderedTree(story: any) {
 
   // Vue 3's Jest renderer throws if all of the required props aren't specified
   // So we try/catch and warn the user if they forgot to specify one in their args
-  try {
+  activeStoryComponent.value = vnode;
-    render(vnode, document.createElement('div'));
+  if (!vm) {
-  } catch (err) {
+    vm = app.mount(document.createElement('div'));
-    // Jest throws an error when you call `console.error`
-    // eslint-disable-next-line no-console
-    console.error(
-      dedent`
-        Storyshots encountered an error while rendering Vue 3 story: ${story.id}
-        Did you remember to define every prop you are using in the story?
-      `
-    );
   }
-
+  vm.$forceUpdate();
-  return vnode.el;
+  return vm.$el;
 }
 
 export default getRenderedTree;

app/vue3/src/client/index.ts

@@ -8,6 +8,7 @@ export {
   forceReRender,
   raw,
   app,
+  activeStoryComponent,
 } from './preview';
 
 export * from './preview/types-6-0';

app/vue3/src/client/preview/index.ts

@@ -117,3 +117,4 @@ export const { forceReRender } = api;
 export const { getStorybook } = api.clientApi;
 export const { raw } = api.clientApi;
 export const app: ClientApi['app'] = storybookApp;
+export { activeStoryComponent } from './render';

app/vue3/src/client/preview/render.ts

@@ -2,7 +2,7 @@ import dedent from 'ts-dedent';
 import { createApp, h, shallowRef, ComponentPublicInstance } from 'vue';
 import { RenderContext, StoryFnVueReturnType } from './types';
 
-const activeStoryComponent = shallowRef<StoryFnVueReturnType | null>(null);
+export const activeStoryComponent = shallowRef<StoryFnVueReturnType | null>(null);
 
 let root: ComponentPublicInstance | null = null;