Vue: map args correctly in CSF3 implicit render function

app/vue/src/client/preview/config.ts

@@ -1,4 +1,4 @@
-export { renderToDOM } from './render';
+export { render, renderToDOM } from './render';
 export { decorateStory } from './decorateStory';
 
 export const parameters = { framework: 'vue' };

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

@@ -22,7 +22,7 @@ const root = new Vue({
 });
 
 export const render: ArgsStoryFn<VueFramework> = (props, context) => {
-  const { id, component: Component } = context;
+  const { id, component: Component, argTypes } = context;
   const component = Component as VueFramework['component'] & {
     __docgenInfo?: { displayName: string };
     props: Record<string, any>;
@@ -49,7 +49,7 @@ export const render: ArgsStoryFn<VueFramework> = (props, context) => {
   }
 
   return {
-    props: component.props,
+    props: Object.keys(argTypes),
     components: { [componentName]: component },
     template: `<${componentName} v-bind="$props" />`,
   };

examples/vue-cli/src/button/Button.stories.ts

@@ -19,3 +19,10 @@ export const ButtonWithProps: Story = (args, { argTypes }) => ({
 ButtonWithProps.args = {
   size: 'big',
 };
+
+export const WithDefaultRender = {
+  args: {
+    size: 'small',
+    label: 'Button with default render',
+  },
+};

examples/vue-cli/src/button/Button.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="button" :class="`size-${size}`">
     <!-- @slot Button content, e.g. label text -->
-    <slot></slot>
+    <slot>
+      {{label}}
+    </slot>
   </div>
 </template>
 
@@ -21,6 +23,11 @@ export default class Button extends Vue {
    * @values default,small,big
    */
   @Prop({ type: String, default: 'default' }) readonly size!: ButtonSize;
+
+  /**
+   * Label of the button
+   */
+  @Prop({ type: String, default: '' }) readonly label!: string;
 }
 </script>