Merge pull request #22229 from storybookjs/kasper/vue3-reactivity-v6-…

…compatible

Vue3: Rollback v7 breaking change and keep reactive v6-compatible API

code/renderers/vue3/src/decorateStory.ts

@@ -11,6 +11,7 @@ import type { VueRenderer } from './types';
   The concept is taken from Vue 3's `defineComponent` but changed from creating a `setup`
   method on the ComponentOptions so end-users don't need to specify a "thunk" as a decorator.
  */
+
 function normalizeFunctionalComponent(options: ConcreteComponent): ComponentOptions {
   return typeof options === 'function' ? { render: options, name: options.name } : options;
 }
@@ -24,7 +25,7 @@ function prepare(
   if (story == null) {
     return null;
   }
-
+  if (typeof story === 'function') return story; // we don't need to wrap a functional component nor to convert it to a component options
   if (innerStory) {
     return {
       // Normalize so we can always spread an object
@@ -64,7 +65,8 @@ export function decorateStory(
         return story;
       }
 
-      return prepare(decoratedStory, h(story, context.args)) as VueRenderer['storyResult'];
+      const innerStory = () => h(story!);
+      return prepare(decoratedStory, innerStory) as VueRenderer['storyResult'];
     },
     (context) => prepare(storyFn(context)) as LegacyStoryFn<VueRenderer>
   );

code/renderers/vue3/src/render.ts

@@ -12,7 +12,7 @@ export const render: ArgsStoryFn<VueRenderer> = (props, context) => {
     );
   }
 
-  return h(Component, props, getSlots(props, context));
+  return () => h(Component, props, getSlots(props, context));
 };
 
 let setupFunction = (_app: any) => {};
@@ -54,7 +54,7 @@ export function renderToCanvas(
       const renderedElement: any = elementMap.get(canvasElement);
       const current = renderedElement && renderedElement.template ? renderedElement : element;
       map.set(canvasElement, { vueApp: storybookApp, reactiveArgs });
-      return h(current, reactiveArgs);
+      return h(current);
     },
   });