diff --git a/docs/snippets/vue/app-story-with-mock.js.mdx b/docs/snippets/vue/app-story-with-mock.js.mdx
index f6266eb076a..6890cf9d796 100644
--- a/docs/snippets/vue/app-story-with-mock.js.mdx
+++ b/docs/snippets/vue/app-story-with-mock.js.mdx
@@ -5,34 +5,39 @@ import App from './App.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'App',
   component: App,
 };
 
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
 
-const Template = () => ({
-  components: { App },
-  template: '<App />',
-});
-
-export const Success = Template.bind({});
-Success.parameters = {
-  fetch: {
-    json: {
-      JavaScript: 3390991,
-      "C++": 44974,
-      TypeScript: 15530,
-      CoffeeScript: 12253,
-      Python: 9383,
-      C: 5341,
-      Shell: 5115,
-      HTML: 3420,
-      CSS: 3171,
-      Makefile: 189
-    }
-  }
+export const Success = {
+  parameters: {
+    fetch: {
+      json: {
+        JavaScript: 3390991,
+        'C++': 44974,
+        TypeScript: 15530,
+        CoffeeScript: 12253,
+        Python: 9383,
+        C: 5341,
+        Shell: 5115,
+        HTML: 3420,
+        CSS: 3171,
+        Makefile: 189,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { App },
+    template: '<App />',
+  }),
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/badge-story-starter-example.mdx.mdx b/docs/snippets/vue/badge-story-starter-example.mdx.mdx
index 3b228d2840a..8dc01331a33 100644
--- a/docs/snippets/vue/badge-story-starter-example.mdx.mdx
+++ b/docs/snippets/vue/badge-story-starter-example.mdx.mdx
@@ -8,30 +8,32 @@ import Icon from './Icon.vue';
 
 <Meta title="MDX/Badge" component={Badge} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
 # Badge
 
 Let's define a story for our `Badge` component:
 
-<Story name="positive">
-  {() => {
-    return {
-      components: { Badge },
-      template: `<Badge status="positive">Positive</Badge>`,
-    };
-  }}
-</Story>
+<Story 
+  name="positive"
+  render={() => ({
+    components: { Badge },
+    template: `<Badge status="positive">Positive</Badge>`,
+  })} />
 
 We can drop it in a `Canvas` to get a code snippet:
 
 <Canvas>
-  <Story name="negative">
-    {() => {
-      return {
-        components: { Badge },
-        template: `<Badge status="negative">Negative</Badge>`,
-      };
-    }}
-  </Story>
+  <Story
+    name="negative"
+    render={() => ({
+      components: { Badge },
+      template: `<Badge status="negative">Negative</Badge>`,
+    })} />
 </Canvas>
 
 We can even preview multiple stories in a block. This
@@ -39,41 +41,33 @@ gets rendered as a group, but defines individual stories
 with unique URLs and isolated snapshot tests.
 
 <Canvas>
-  <Story name="warning">
-    {() => {
-      return {
-        components: { Badge },
-        template: `<Badge status="warning">Warning</Badge>`,
-      };
-    }}
-  </Story>
-  <Story name="neutral">
-    {() => {
-      return {
-        components: { Badge },
-        template: `<Badge status="neutral">Neutral</Badge>`,
-      };
-    }}
-  </Story>
-  <Story name="error">
-    {() => {
-      return {
-        components: { Badge },
-        template: `<Badge status="error">Error</Badge>`,
-      };
-    }}
-  </Story>
-  <Story name="with icon">
-    {() => {
-      return {
-        components: { Badge, Icon },
-        template: `
-          <Badge status="warning">
-            <Icon icon="check" inline />
-             with icon
-          </Badge>`,
-      };
-    }}
-  </Story>
+  <Story 
+    name="warning"
+    render={() => ({
+      components: { Badge },
+      template: `<Badge status="warning">Warning</Badge>`,
+    })} />
+  <Story 
+    name="neutral"
+    render={() => ({
+      components: { Badge },
+      template: `<Badge status="neutral">Neutral</Badge>`,
+    })} />
+  <Story 
+    name="error"
+    render={() => ({
+      components: { Badge },
+      template: `<Badge status="error">Error</Badge>`,
+    })} />
+  <Story 
+    name="with icon"
+    render={() => ({
+      components: { Badge, Icon },
+      template: `
+        <Badge status="warning">
+          <Icon icon="check" inline />
+          with icon
+        </Badge>`,
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/badge-story.mdx-2.mdx.mdx b/docs/snippets/vue/badge-story.mdx-2.mdx.mdx
index 32ed8f0726b..464655e4279 100644
--- a/docs/snippets/vue/badge-story.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/badge-story.mdx-2.mdx.mdx
@@ -7,24 +7,27 @@ import Badge from './Badge.vue';
 
 <Meta title="MDX/Badge" component={Badge} />
 
-export const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Badge },
-  template: '<Badge v-bind="$props" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 # Badge
 
 Let's define a story for our `Badge` component:
 
-<Story
+<Story 
   name="positive"
   args={{
     status: 'positive',
     label: 'Positive',
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { Badge },
+    template: '<Badge v-bind="$props" />',
+  })} />
 
 We can drop it in a `Canvas` to get a code snippet:
 
@@ -34,9 +37,12 @@ We can drop it in a `Canvas` to get a code snippet:
     args={{
       status: 'negative', 
      label: 'Negative',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Badge },
+      template: '<Badge v-bind="$props" />',
+    })} />
 </Canvas>
 
 We can even preview multiple Stories in a block. This
@@ -49,24 +55,33 @@ with unique URLs, which is great for review and testing.
     args={{
       status: 'warning',
       label: 'Warning',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Badge },
+      template: '<Badge v-bind="$props" />',
+    })} />
   <Story 
     name="neutral"
     args={{
       status: 'neutral', 
       label: 'Neutral',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Badge },
+      template: '<Badge v-bind="$props" />',
+    })} />
   <Story 
     name="error"
     args={{
       status: 'error', 
       label: 'Error',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Badge },
+      template: '<Badge v-bind="$props" />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/badge-story.mdx-3.mdx.mdx b/docs/snippets/vue/badge-story.mdx-3.mdx.mdx
index d4909ef78c7..b6010a1cd55 100644
--- a/docs/snippets/vue/badge-story.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/badge-story.mdx-3.mdx.mdx
@@ -7,13 +7,11 @@ import Badge from './Badge.vue';
 
 <Meta title="MDX/Badge" component={Badge} />
 
-export const Template = (args) => ({
-  components: { Badge },
-  setup() {
-    return { args };
-  },
-  template: '<Badge v-bind="args" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 # Badge
 
@@ -24,9 +22,14 @@ Let's define a story for our `Badge` component:
   args={{
     status: 'positive',
     label: 'Positive'
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    components: { Badge },
+    setup() {
+      return { args };
+    },
+    template: '<Badge v-bind="args" />',
+  })} />
 
 We can drop it in a `Canvas` to get a code snippet:
 
@@ -36,9 +39,14 @@ We can drop it in a `Canvas` to get a code snippet:
     args={{
       status: 'negative', 
       label: 'Negative',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { Badge },
+      setup() {
+        return { args };
+      },
+      template: '<Badge v-bind="args" />',
+    })} />
 </Canvas>
 
 We can even preview multiple Stories in a block. This
@@ -51,24 +59,39 @@ with unique URLs, which is great for review and testing.
     args={{
       status: 'warning',
       label: 'Warning', 
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { Badge },
+      setup() {
+        return { args };
+      },
+      template: '<Badge v-bind="args" />',
+    })} />
   <Story 
     name="neutral"
     args={{
       status: 'neutral', 
       label: 'Neutral', 
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { Badge },
+      setup() {
+        return { args };
+      },
+      template: '<Badge v-bind="args" />',
+    })} />
   <Story 
     name="error"
     args={{
       status: 'error', 
       label: 'Error', 
-  }}>
-  {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { Badge },
+      setup() {
+        return { args };
+      },
+      template: '<Badge v-bind="args" />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-group-story.2.js.mdx b/docs/snippets/vue/button-group-story.2.js.mdx
index a083bfbce03..62e2e493416 100644
--- a/docs/snippets/vue/button-group-story.2.js.mdx
+++ b/docs/snippets/vue/button-group-story.2.js.mdx
@@ -8,25 +8,27 @@ import * as ButtonStories from './Button.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ButtonGroup',
   component: ButtonGroup,
 };
 
-const Template = (args, { argTypes }) => ({
-  components: { ButtonGroup },
-  props: Object.keys(argTypes),
-  template: '<ButtonGroup v-bind="$props" />',
-});
-
-export const Pair = Template.bind({});
-Pair.args = {
-  buttons: [
-    { ...ButtonStories.Primary.args },
-    { ...ButtonStories.Secondary.args }
-  ],
-  orientation: 'horizontal',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Pair = {
+  render: (args, { argTypes }) => ({
+    components: { ButtonGroup },
+    props: Object.keys(argTypes),
+    template: '<ButtonGroup v-bind="$props" />',
+  }),
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-group-story.3.js.mdx b/docs/snippets/vue/button-group-story.3.js.mdx
index 6197ffd73ae..f4f074c61a1 100644
--- a/docs/snippets/vue/button-group-story.3.js.mdx
+++ b/docs/snippets/vue/button-group-story.3.js.mdx
@@ -8,27 +8,29 @@ import * as ButtonStories from './Button.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ButtonGroup',
   component: ButtonGroup,
 };
 
-const Template = (args) => ({
-  components: { ButtonGroup },
-  setup() {
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Pair = {
+  render: (args) => ({
+    components: { ButtonGroup },
+    setup() {
+      return { args };
+    },
+    template: '<ButtonGroup v-bind="args" />',
+  }),
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
   },
-  template: '<ButtonGroup v-bind="args" />',
-});
-
-export const Pair = Template.bind({});
-Pair.args = {
-  buttons: [
-    { ...ButtonStories.Primary.args },
-    { ...ButtonStories.Secondary.args }
-  ],
-  orientation: 'horizontal',
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-group-story.ts-2.ts.mdx b/docs/snippets/vue/button-group-story.ts-2.ts.mdx
index d0e1eb3adad..b55030242c7 100644
--- a/docs/snippets/vue/button-group-story.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-group-story.ts-2.ts.mdx
@@ -10,7 +10,7 @@ import * as ButtonStories from './Button.stories';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'ButtonGroup',
diff --git a/docs/snippets/vue/button-group-story.ts-3.ts.mdx b/docs/snippets/vue/button-group-story.ts-3.ts.mdx
index 91b68cc272f..c6bb2b46420 100644
--- a/docs/snippets/vue/button-group-story.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-group-story.ts-3.ts.mdx
@@ -3,31 +3,31 @@
 
 import ButtonGroup from './ButtonGroup.vue';
 
-import { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue3';
 
 //👇 Imports the Button stories
 import * as ButtonStories from './Button.stories';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'ButtonGroup',
   component: ButtonGroup,
 } as Meta<typeof Button>;
 
-const Template: StoryFn<typeof Button> = (args) => ({
-  components: { ButtonGroup },
-  setup() {
-    return { args };
+export const Pair: Story = {
+  render: (args) => ({
+    components: { ButtonGroup },
+    setup() {
+      return { args };
+    },
+    template: '<ButtonGroup v-bind="args" />',
+  }),
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
   },
-  template: '<ButtonGroup v-bind="args" />',
-});
-
-export const Pair = Template.bind({});
-Pair.args = {
-  buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
-  orientation: 'horizontal',
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-click-handler-args.2.js.mdx b/docs/snippets/vue/button-story-click-handler-args.2.js.mdx
index 703274ec557..ee3c22d82d2 100644
--- a/docs/snippets/vue/button-story-click-handler-args.2.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler-args.2.js.mdx
@@ -7,21 +7,22 @@ import { action } from '@storybook/addon-actions';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Text = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Button },
-  template: '<Button @onClick="onClick" :label="label" />'
-});
-
-Text.args = {
-  label: 'Hello',
-  onClick: action('clicked'),
+export const Text = {
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { Button },
+    template: '<Button @onClick="onClick" :label="label" />',
+  }),
+  args: {
+    label: 'Hello',
+    onClick: action('clicked'),
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-click-handler-args.3.js.mdx b/docs/snippets/vue/button-story-click-handler-args.3.js.mdx
index b192f70be99..fcb25d64724 100644
--- a/docs/snippets/vue/button-story-click-handler-args.3.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler-args.3.js.mdx
@@ -7,26 +7,26 @@ import { action } from '@storybook/addon-actions';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Text = ({ label, onClick }) => ({
-  components: { Button },
-  setup() {
-    return {
-      label,
-      onClick,
-    };
+export const Text = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return {
+        ...args,
+        onClick: action('clicked'),
+      };
+    },
+    template: '<Button @onClick="onClick" :label="label" />',
+  }),
+  args: {
+    label: 'Hello',
   },
-  template: '<Button @onClick="onClick" :label="label" />',
-});
-
-Text.args = {
-  label: 'Hello',
-  onClick: action('clicked'),
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx b/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx
index 7fffcdbcab4..9f1c4bd3bc4 100644
--- a/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx
@@ -5,13 +5,13 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
   /*
-   * See https://storybook.js.org/docs/vue/essentials/actions#action-argtype-annotation
+   * See https://storybook.js.org/docs/7.0/vue/essentials/actions#action-argtype-annotation
    * to learn how to set up argTypes for actions
    */
   argTypes: {
@@ -19,11 +19,13 @@ export default {
   },
 };
 
-export const Text = (args) => ({
-  components: { Button },
-  setup() {
-    return { args };
-  },
-  template: '<Button v-bind="args" />',
-});
+export const Text = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-click-handler.2.js.mdx b/docs/snippets/vue/button-story-click-handler.2.js.mdx
index 78a35e008a9..cdd298f8ac3 100644
--- a/docs/snippets/vue/button-story-click-handler.2.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler.2.js.mdx
@@ -7,18 +7,20 @@ import { action } from '@storybook/addon-actions';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Text = () => ({
-  components: { Button },
-  template: '<Button label="Hello" @click="onClick" />',
-  methods: {
-    onClick: action('clicked'),
-  },
-});
+export const Text = {
+  render: () => ({
+    components: { Button },
+    template: '<Button label="Hello" @click="onClick" />',
+    methods: {
+      onClick: action('clicked'),
+    },
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-click-handler.3.js.mdx b/docs/snippets/vue/button-story-click-handler.3.js.mdx
index 7c1ad200ae7..5d0c507c271 100644
--- a/docs/snippets/vue/button-story-click-handler.3.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler.3.js.mdx
@@ -7,20 +7,22 @@ import { action } from '@storybook/addon-actions';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Text = () => ({
-  components: { Button },
-  template: '<Button label="Hello" @click="onClick" />',
-  setup(){
-    return {
-      onClick: action('clicked'),
-    };
-  },
-});
+export const Text = {
+  render: () => ({
+    components: { Button },
+    setup() {
+      return {
+        onClick: action('clicked'),
+      };
+    },
+    template: '<Button label="Hello" @click="onClick" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-component-args-primary.js.mdx b/docs/snippets/vue/button-story-component-args-primary.js.mdx
index 525fc0d2757..8612d8a608a 100644
--- a/docs/snippets/vue/button-story-component-args-primary.js.mdx
+++ b/docs/snippets/vue/button-story-component-args-primary.js.mdx
@@ -5,7 +5,7 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-component-decorator.js.mdx b/docs/snippets/vue/button-story-component-decorator.js.mdx
index 0c505d3b8c0..497c9e6c298 100644
--- a/docs/snippets/vue/button-story-component-decorator.js.mdx
+++ b/docs/snippets/vue/button-story-component-decorator.js.mdx
@@ -5,7 +5,7 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx b/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx
index 37a6ec4b52f..75a646696fa 100644
--- a/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx
@@ -3,11 +3,11 @@
 
 import Button from './Button.vue';
 
-import { Meta } from '@storybook/vue';
+import type { Meta } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx b/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx
index bc4678319e9..95ae0184fdb 100644
--- a/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx
@@ -3,11 +3,11 @@
 
 import Button from './Button.vue';
 
-import { Meta } from '@storybook/vue3';
+import type { Meta } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-decorator.js.mdx b/docs/snippets/vue/button-story-decorator.js.mdx
index 80d1d3caf4c..0f2c85b0d1b 100644
--- a/docs/snippets/vue/button-story-decorator.js.mdx
+++ b/docs/snippets/vue/button-story-decorator.js.mdx
@@ -5,16 +5,23 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Primary = () => ({
-  components: { Button },
-  template: '<Button primary label="Hello World" />',
-});
-Primary.decorators = [() => ({ template: '<div style="margin: 3em;"><story /></div>' })];
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => ({
+    components: { Button },
+    template: '<Button primary label="Hello World" />',
+  }),
+  decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-decorator.mdx.mdx b/docs/snippets/vue/button-story-decorator.mdx.mdx
index 613fa80690f..058c6520dfb 100644
--- a/docs/snippets/vue/button-story-decorator.mdx.mdx
+++ b/docs/snippets/vue/button-story-decorator.mdx.mdx
@@ -7,19 +7,20 @@ import Button from './Button.vue';
 
 <Meta title="Button" component={Button}/>
 
-export const Template = () => ({
-  components: { Button },
-  template: '<Button primary label="Hello World"/>',
-});
-
-
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 <Story
   name="Primary"
   decorators={[
     () => ({
       template: '<div style="margin: 3em;"><story /></div>',
     }),
-  ]}>
-  {Template.bind({})}
-<Story>
+  ]}
+  render={() => ({
+    components: { Button },
+    template: '<Button primary label="Hello World"/>',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-default-docs-code.3.js.mdx b/docs/snippets/vue/button-story-default-docs-code.3.js.mdx
deleted file mode 100644
index 12c57c90a59..00000000000
--- a/docs/snippets/vue/button-story-default-docs-code.3.js.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
-```js
-// Button.stories.js
-
-import Button from './Button.vue';
-
-export default {
-  /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Button',
-  component: Button,
-  //👇 Creates specific argTypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-//👇 Some function to demonstrate the behavior
-const someFunction = (someValue) => {
-  return `i am a ${someValue}`;
-};
-
-export const ExampleStory = (args) => {
-  //👇 Assigns the function result to a variable
-  const functionResult = someFunction(args.label);
-  return {
-    components: { Button },
-    setup() {
-      //👇 The args will now be passed down to the template
-      return {
-        args: {
-          ...args,
-          //👇 Replaces arg variable with the override (without the need of mutation)
-          label: functionResult,
-        },
-      };
-    },
-    template: '<Button v-bind="args" />',
-  };
-};
-ExampleStory.args = {
-  primary: true,
-  size: 'small',
-  label: 'button',
-};
-```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-default-docs-code.mdx-3.mdx.mdx b/docs/snippets/vue/button-story-default-docs-code.mdx-3.mdx.mdx
deleted file mode 100644
index 1491648a2cc..00000000000
--- a/docs/snippets/vue/button-story-default-docs-code.mdx-3.mdx.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import Button from './Button.vue';
-
-<!-- 👇 Creates specific argTypes -->
-<Meta
-  title="Button"
-  component={Button}
-  argTypes={{
-    backgroundColor: {
-      control: 'color',
-    },
-  }}
-/>
-
-<!-- 👇 Some function to demonstrate the behavior -->
-export const someFunction = (someValue) => {
-  return `i am a ${someValue}`;
-};
-
-
-<!-- 👇 Destructure the label from the args object and assigns the function result to a variable and pass it as a prop into the component -->
-<Story
-  name="ExampleStory"
-  args={{
-    primary: true,
-    size: 'small',
-    label: 'button',
-  }} >
-  {(args) => {
-    const functionResult = someFunction(args.label);
-    return {
-      components: { Button },
-      setup() {
-        return {
-          args: {
-            ...args,
-            label: functionResult,
-          },
-        };
-      },
-      template: '<Button v-bind="args" />',
-    };
-  }}
-</Story>
-```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-default-export-with-component.js.mdx b/docs/snippets/vue/button-story-default-export-with-component.js.mdx
index c0a453a77ec..4f5b035e16d 100644
--- a/docs/snippets/vue/button-story-default-export-with-component.js.mdx
+++ b/docs/snippets/vue/button-story-default-export-with-component.js.mdx
@@ -5,7 +5,7 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx b/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx
index 3203b13bc70..02326201d4a 100644
--- a/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx
@@ -3,11 +3,11 @@
 
 import Button from './Button.vue';
 
-import { Meta } from '@storybook/vue';
+import type { Meta } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx b/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx
index afc5e65c795..d034f021fcb 100644
--- a/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx
@@ -3,11 +3,11 @@
 
 import Button from './Button.vue';
 
-import { Meta } from '@storybook/vue3';
+import type { Meta } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-rename-story.js.mdx b/docs/snippets/vue/button-story-rename-story.js.mdx
index 95750d3d6c8..2cbbe957335 100644
--- a/docs/snippets/vue/button-story-rename-story.js.mdx
+++ b/docs/snippets/vue/button-story-rename-story.js.mdx
@@ -5,16 +5,23 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Primary = () => ({
-  components: { Button },
-  template: '<Button primary label="Button" />',
-});
-Primary.storyName = 'I am the primary';
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  name: 'I am the primary',
+  render: () => ({
+    components: { Button },
+    template: '<Button primary label="Button" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx b/docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx
deleted file mode 100644
index 14dfc01e1fc..00000000000
--- a/docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
-```ts
-// Button.stories.ts
-
-import Button from './Button.vue';
-
-import { Meta, StoryFn } from '@storybook/vue';
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-  component: Button,
-} as Meta<typeof Button>;
-
-export const Primary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button primary label="Button" />',
-});
-Primary.storyName = 'I am the primary';
-```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx b/docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx
deleted file mode 100644
index 8925512e696..00000000000
--- a/docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
-```ts
-// Button.stories.ts
-
-import Button from './Button.vue';
-
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-  component: Button,
-} as Meta<typeof Button>;
-
-export const Primary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button primary label="Button" />',
-});
-Primary.storyName = 'I am the primary';
-```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-rename-story.ts.mdx b/docs/snippets/vue/button-story-rename-story.ts.mdx
new file mode 100644
index 00000000000..196941dad0c
--- /dev/null
+++ b/docs/snippets/vue/button-story-rename-story.ts.mdx
@@ -0,0 +1,29 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import type { Meta, Story } from '@storybook/vue3';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} as Meta<typeof Button>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  name:'I am the primary',
+  render: () => ({
+    components: { Button },
+    template: '<Button primary label="Button" />',
+  }),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-using-args.2.js.mdx b/docs/snippets/vue/button-story-using-args.2.js.mdx
index 1cce963c293..4883a73fbbc 100644
--- a/docs/snippets/vue/button-story-using-args.2.js.mdx
+++ b/docs/snippets/vue/button-story-using-args.2.js.mdx
@@ -5,27 +5,51 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args, { argTypes }) => ({
-  components: { Button },
-  props: Object.keys(argTypes),
-  template: '<Button v-bind="$props" />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" />',
+  }),
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
+  },
+};
 
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = { background: '#ff0', label: 'Button' };
+export const Secondary = {
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" />',
+  }),
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+};
 
-export const Secondary = Template.bind({});
-Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
-
-export const Tertiary = Template.bind({});
-Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+export const Tertiary = {
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-using-args.3.js.mdx b/docs/snippets/vue/button-story-using-args.3.js.mdx
index c681a3c25ea..0a99803e1d1 100644
--- a/docs/snippets/vue/button-story-using-args.3.js.mdx
+++ b/docs/snippets/vue/button-story-using-args.3.js.mdx
@@ -5,28 +5,57 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => ({
-  components: { Button },
-  setup() {
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
   },
-  template: '<Button v-bind="args" />',
-});
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = { background: '#ff0', label: 'Button' };
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+};
 
-export const Secondary = Template.bind({});
-Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+export const Secondary = {
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+};
 
-export const Tertiary = Template.bind({});
-Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+export const Tertiary = {
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx b/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx
index 4bfe62dd118..95ddfe52c24 100644
--- a/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx
@@ -3,31 +3,55 @@
 
 import Button from './Button.vue';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import type { Meta, Story } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
 } as Meta<typeof Button>;
 
-//👇 We create a “template” of how args map to rendering
-const Template: StoryFn<typeof Button> = (args, { argTypes }) => ({
-  components: { Button },
-  props: Object.keys(argTypes),
-  template: '<Button v-bind="$props" />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" />',
+  }),
+  args: {
+    background: '#ff0',
+    label: 'Button',
+  },
+};
 
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = { background: '#ff0', label: 'Button' };
+export const Secondary: Story = {
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" />',
+  }),
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+};
 
-export const Secondary = Template.bind({});
-Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
-
-export const Tertiary = Template.bind({});
-Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+export const Tertiary: Story = {
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" />',
+  }),
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx b/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx
index b081e49bbe2..e28b6141914 100644
--- a/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx
@@ -3,33 +3,62 @@
 
 import Button from './Button.vue';
 
-import { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
 } as Meta<typeof Button>;
 
-//👇 We create a “template” of how args map to rendering
-const Template: StoryFn<typeof Button> = (args) => ({
-  components: { Button },
-  setup() {
-    return { args };
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    background: '#ff0',
+    label: 'Button',
   },
-  template: '<Button v-bind="args" />',
-});
+};
 
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = { background: '#ff0', label: 'Button' };
+export const Secondary: Story = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+};
 
-export const Secondary = Template.bind({});
-Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
-
-export const Tertiary = Template.bind({});
-Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+export const Tertiary: Story = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-addon-example.js.mdx b/docs/snippets/vue/button-story-with-addon-example.js.mdx
index d07029c32d4..2416e143262 100644
--- a/docs/snippets/vue/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/vue/button-story-with-addon-example.js.mdx
@@ -5,9 +5,9 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   //👇 Creates specific parameters for the story
   parameters: {
@@ -17,8 +17,10 @@ export default {
   },
 };
 
-export const Basic = () => ({
-  components: { Button },
+export const Basic = {
+  render: () => ({
+    components: { Button },
     template: '<Button label="Hello" />',
-});
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-args.2.js.mdx b/docs/snippets/vue/button-story-with-args.2.js.mdx
index b7cfcaee951..17611ee114e 100644
--- a/docs/snippets/vue/button-story-with-args.2.js.mdx
+++ b/docs/snippets/vue/button-story-with-args.2.js.mdx
@@ -5,24 +5,27 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-// 👇 We create a “template” of how args map to rendering
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Button },
-});
-
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-
-Primary.args = {
-  primary: true,
-  label: 'Button',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" v-on="$props" />',
+  }),
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-args.3.js.mdx b/docs/snippets/vue/button-story-with-args.3.js.mdx
index bd54da03cfb..20f44a3250a 100644
--- a/docs/snippets/vue/button-story-with-args.3.js.mdx
+++ b/docs/snippets/vue/button-story-with-args.3.js.mdx
@@ -5,28 +5,29 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => ({
-  components: { Button },
-  setup() {
-    //👇 The args will now be passed down to the template
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    primary: true,
+    label: 'Button',
   },
-  template: '<Button v-bind="args" />',
-});
-
-
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = {
-  primary: true,
-  label: 'Button',
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-args.mdx-2.mdx.mdx b/docs/snippets/vue/button-story-with-args.mdx-2.mdx.mdx
index 0fe61e09fbb..66dc1204cb9 100644
--- a/docs/snippets/vue/button-story-with-args.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/button-story-with-args.mdx-2.mdx.mdx
@@ -7,21 +7,20 @@ import Button from './Button.vue';
 
 <Meta title="Button" component={Button} />
 
-<!-- 👇 We create a “template” of how args map to rendering -->
-
-export const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Button },
-  template: `<Button v-bind="$props" v-on="$props" />`,
-});
-
-<!-- 👇 Each story then reuses that template -->
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 <Story
   name="Primary"
   args={{
     primary: true,
     label: 'Button',
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { Button },
+    template: '<Button v-bind="$props" v-on="$props" />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-args.mdx-3.mdx.mdx b/docs/snippets/vue/button-story-with-args.mdx-3.mdx.mdx
index 252647df8f9..49f7073f621 100644
--- a/docs/snippets/vue/button-story-with-args.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/button-story-with-args.mdx-3.mdx.mdx
@@ -7,22 +7,22 @@ import Button from './Button.vue';
 
 <Meta title="Button" component={Button}/>
 
-<!-- 👇 We create a “template” of how args map to rendering -->
-
-export const Template = (args) => ({
-  components: { Button },
-  setup() {
-    return { args };
-  },
-  template: '<Button v-bind="args" />',
-});
-
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 <Story
   name="Primary"
   args={{
     primary: true,
     label: 'Button',
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-blue-args.js.mdx b/docs/snippets/vue/button-story-with-blue-args.js.mdx
index b4a9ad98965..2c546313794 100644
--- a/docs/snippets/vue/button-story-with-blue-args.js.mdx
+++ b/docs/snippets/vue/button-story-with-blue-args.js.mdx
@@ -5,7 +5,7 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx b/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx
index c55b57c2ccc..25a0b18c0b4 100644
--- a/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx
@@ -3,11 +3,11 @@
 
 import Button from './Button.vue';
 
-import { Meta } from '@storybook/vue';
+import type { Meta } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx b/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx
index 00cd50dc5c0..42c5b8729df 100644
--- a/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx
@@ -3,11 +3,11 @@
 
 import Button from './Button.vue';
 
-import { Meta } from '@storybook/vue3';
+import type { Meta } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-with-emojis.js.mdx b/docs/snippets/vue/button-story-with-emojis.js.mdx
index 7e4a668ce3e..a1298fb5308 100644
--- a/docs/snippets/vue/button-story-with-emojis.js.mdx
+++ b/docs/snippets/vue/button-story-with-emojis.js.mdx
@@ -5,25 +5,35 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
   component: Button,
 };
 
-export const Primary = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="Button" />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => ({
+    components: { Button },
+    template: '<Button backgroundColor="#ff0" label="Button" />',
+  }),
+};
 
-export const Secondary = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="😄👍😍💯" />',
-});
+export const Secondary = {
+  render: () => ({
+    components: { Button },
+    template: '<Button backgroundColor="#ff0" label="😄👍😍💯" />',
+  }),
+};
 
-export const Tertiary = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="📚📕📈🤓" />',
-});
+export const Tertiary = {
+  render: () => ({
+    components: { Button },
+    template: '<Button backgroundColor="#ff0" label="📚📕📈🤓" />',
+  }),
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-emojis.mdx.mdx b/docs/snippets/vue/button-story-with-emojis.mdx.mdx
index c9d44de6591..f0acba6330b 100644
--- a/docs/snippets/vue/button-story-with-emojis.mdx.mdx
+++ b/docs/snippets/vue/button-story-with-emojis.mdx.mdx
@@ -7,32 +7,27 @@ import Button from './Button.vue';
 
 <Meta title="Button" component={Button}/>
 
-<Story name="Primary">
-  {() => {
-    return {
-      components: { Button },
-      template: `<Button background="#ff0" label="Button"  />`,
-    };
-  }}
-</Story>
-
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+<Story 
+  name="Primary"
+  render={() => ({
+    components: { Button },
+    template: `<Button background="#ff0" label="Button"  />`,
+  })} />
 <Story
-  name="Secondary">
-  {() => {
-    return {
-      components: { Button },
-      template: `<Button background="#ff0" label="😄👍😍💯" />`,
-    };
-  }}
-</Story>
-
+  name="Secondary"
+  render={() => ({
+    components: { Button },
+    template: `<Button background="#ff0" label="😄👍😍💯" />`,
+  })} />
 <Story
-  name="Tertiary">
-  {() => {
-    return {
-      components: { Button },
-      template: `<Button background="#ff0" label="📚📕📈🤓" />`,
-    };
-  }}
-</Story>
+  name="Tertiary"
+  render={() => ({
+    components: { Button },
+    template: `<Button background="#ff0" label="📚📕📈🤓" />`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx b/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx
index cf8c9ca28e5..1b0551fb3d8 100644
--- a/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx
@@ -3,29 +3,41 @@
 
 import Button from './Button.vue';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import type { Meta, Story } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
 } as Meta<typeof Button>;
 
-export const Primary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="Button" />',
-});
 
-export const Secondary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="😄👍😍💯" />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button background="#ff0" label="Button" />',
+  }),
+};
 
-export const Tertiary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="📚📕📈🤓" />',
-});
+export const Secondary: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button background="#ff0" label="😄👍😍💯" />',
+  }),
+};
+
+export const Tertiary: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button background="#ff0" label="📚📕📈🤓" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx b/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx
index b292bb311ff..09b47b82b28 100644
--- a/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx
@@ -3,29 +3,41 @@
 
 import Button from './Button.vue';
 
-import { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, StoryFn } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
 } as Meta<typeof Button>;
 
-export const Primary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="Button" />',
-});
 
-export const Secondary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="😄👍😍💯" />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button background="#ff0" label="Button" />',
+  }),
+};
 
-export const Tertiary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="📚📕📈🤓" />',
-});
+export const Secondary: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button background="#ff0" label="😄👍😍💯" />',
+  }),
+};
+
+export const Tertiary: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button background="#ff0" label="📚📕📈🤓" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story.js.mdx b/docs/snippets/vue/button-story.js.mdx
index 15514fefa40..1034da9bcf0 100644
--- a/docs/snippets/vue/button-story.js.mdx
+++ b/docs/snippets/vue/button-story.js.mdx
@@ -5,15 +5,22 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Primary = () => ({
-  components: { Button },
-  template: '<Button primary label="Button" />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => ({
+    components: { Button },
+    template: '<Button primary label="Button" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story.mdx.mdx b/docs/snippets/vue/button-story.mdx.mdx
index 7e5db63593b..329d8401467 100644
--- a/docs/snippets/vue/button-story.mdx.mdx
+++ b/docs/snippets/vue/button-story.mdx.mdx
@@ -7,14 +7,18 @@ import Button from './Button.vue';
 
 <Meta title="Button" component={Button} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
 # Button
 
-<Story name="Primary">
-  {() => {
-    return {
-      components: { Button },
-      template: `<Button primary label="Button" />`,
-    };
-  }}
-</Story>
+<Story 
+  name="Primary"
+  render={() => ({
+    components: { Button },
+    template: '<Button primary label="Button" />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story.ts-2.ts.mdx b/docs/snippets/vue/button-story.ts-2.ts.mdx
index 38643023a71..f57eaff84b6 100644
--- a/docs/snippets/vue/button-story.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story.ts-2.ts.mdx
@@ -3,19 +3,26 @@
 
 import Button from './Button.vue';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import type { Meta, Story } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
 } as Meta<typeof Button>;
 
-export const Primary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button primary label="Button" />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button primary label="Button" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story.ts-3.ts.mdx b/docs/snippets/vue/button-story.ts-3.ts.mdx
index 813792649c3..29286788861 100644
--- a/docs/snippets/vue/button-story.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story.ts-3.ts.mdx
@@ -3,19 +3,26 @@
 
 import Button from './Button.vue';
 
-import { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
 } as Meta<typeof Button>;
 
-export const Primary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button primary label="Button" />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button primary label="Button" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/checkbox-story-csf.js.mdx b/docs/snippets/vue/checkbox-story-csf.js.mdx
index 8047f0e4d5d..6d8bedac737 100644
--- a/docs/snippets/vue/checkbox-story-csf.js.mdx
+++ b/docs/snippets/vue/checkbox-story-csf.js.mdx
@@ -5,20 +5,27 @@ import Checkbox from './Checkbox.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Checkbox', 
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Checkbox',
   component: Checkbox,
 };
 
-export const allCheckboxes = () => ({
-  components: { Checkbox },
-  template: `
-    <form>
-      <Checkbox id="Unchecked" label="Unchecked"/>
-      <Checkbox id="Checked" label="Checked" checked />
-      <Checkbox appearance="secondary" id="second" label="Secondary" checked />
-    </form>`,
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const allCheckboxes = () => {
+  render: () => ({
+    components: { Checkbox },
+    template: `
+      <form>
+        <Checkbox id="Unchecked" label="Unchecked"/>
+        <Checkbox id="Checked" label="Checked" checked />
+        <Checkbox appearance="secondary" id="second" label="Secondary" checked />
+      </form>`,
+  });
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/checkbox-story-starter-example.mdx.mdx b/docs/snippets/vue/checkbox-story-starter-example.mdx.mdx
index b2a23ae68ba..9f76a0ab3e2 100644
--- a/docs/snippets/vue/checkbox-story-starter-example.mdx.mdx
+++ b/docs/snippets/vue/checkbox-story-starter-example.mdx.mdx
@@ -7,23 +7,27 @@ import Checkbox from './Checkbox.vue';
 
 <Meta title="MDX/Checkbox" component={Checkbox} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
 # Checkbox
 
 With `MDX`, we can define a story for `Checkbox` right in the middle of our Markdown documentation.
 
 <Canvas>
-  <Story name="all checkboxes">
-    {() => {
-      return {
-        components: { Checkbox },
-        template: `
-          <form>
-            <Checkbox id="Unchecked" label="Unchecked" />
-            <Checkbox id="Checked" label="Checked" checked />
-            <Checkbox appearance="secondary" id="second" label="Secondary" checked />
-          </form>`,
-      };
-    }}
-  </Story>
+  <Story 
+  name="all checkboxes"
+  render={() => ({
+    components: { Checkbox },
+    template: `
+      <form>
+        <Checkbox id="Unchecked" label="Unchecked" />
+        <Checkbox id="Checked" label="Checked" checked />
+        <Checkbox appearance="secondary" id="second" label="Secondary" checked />
+      </form>`,
+  })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/checkbox-story.mdx-2.mdx.mdx b/docs/snippets/vue/checkbox-story.mdx-2.mdx.mdx
index 1175e202dc0..0950503fee8 100644
--- a/docs/snippets/vue/checkbox-story.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/checkbox-story.mdx-2.mdx.mdx
@@ -7,11 +7,11 @@ import Checkbox from './Checkbox.vue';
 
 <Meta title="MDX/Checkbox" component={Checkbox} />
 
-export const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Checkbox },
-  template: '<Checkbox v-bind="$props" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 # Checkbox
 
@@ -23,27 +23,34 @@ Markdown documentation.
     name="Unchecked"
     args={{ 
       label: 'Unchecked',
-    }}>
-    {Template.bind({})}
-   </Story>
-
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Checkbox },
+      template: '<Checkbox v-bind="$props" />',
+    })} />
   <Story 
     name="Checked"
     args={{ 
       label: 'Unchecked', 
       checked: true,
-    }}>
-    {Template.bind({})}
-   </Story>
-  
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Checkbox },
+      template: '<Checkbox v-bind="$props" />',
+    })} />
   <Story 
     name="Secondary"
     args={{
       label: 'Secondary', 
       checked: true, 
       appearance: 'secondary',
-    }}>
-    {Template.bind({})}
-   </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Checkbox },
+      template: '<Checkbox v-bind="$props" />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/checkbox-story.mdx-3.mdx.mdx b/docs/snippets/vue/checkbox-story.mdx-3.mdx.mdx
index d72e2856ea1..a721a22ab8b 100644
--- a/docs/snippets/vue/checkbox-story.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/checkbox-story.mdx-3.mdx.mdx
@@ -7,13 +7,12 @@ import Checkbox from './Checkbox.vue';
 
 <Meta title="MDX/Checkbox" component={Checkbox} />
 
-export const Template = (args) => ({
-  components: { Checkbox },
-  setup() {
-    return { args };
-  },
-  template: '<Checkbox v-bind="args" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
 # Checkbox
 
 With `MDX`, we can define a story for `Checkbox` right in the middle of our
@@ -24,27 +23,40 @@ Markdown documentation.
     name="Unchecked"
     args={{ 
       label: 'Unchecked',
-    }}>
-    {Template.bind({})}
-   </Story>
-
+    }}
+    render={(args) => ({
+      components: { Checkbox },
+      setup() {
+        return { args };
+      },
+      template: '<Checkbox v-bind="args" />',
+    })} />
   <Story 
     name="Checked"
     args={{ 
       label: 'Unchecked', 
       checked: true,
-    }}>
-    {Template.bind({})}
-   </Story>
-  
+    }}
+    render={(args) => ({
+      components: { Checkbox },
+      setup() {
+        return { args };
+      },
+      template: '<Checkbox v-bind="args" />',
+    })} />
   <Story 
     name="Secondary"
     args={{
       label: 'Secondary', 
       checked: true, 
       appearance: 'secondary',
-    }}>
-    {Template.bind({})}
-   </Story>
+    }}
+    render={(args) => ({
+      components: { Checkbox },
+      setup() {
+        return { args };
+      },
+      template: '<Checkbox v-bind="args" />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-custom-args-complex.3.js.mdx b/docs/snippets/vue/component-story-custom-args-complex.3.js.mdx
index 1beee880c50..69d5024a98f 100644
--- a/docs/snippets/vue/component-story-custom-args-complex.3.js.mdx
+++ b/docs/snippets/vue/component-story-custom-args-complex.3.js.mdx
@@ -5,9 +5,9 @@ import YourComponent from './YourComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
   //👇 Creates specific argTypes with options
@@ -27,28 +27,27 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
   // Makes some computations and returns something
 };
 
-const Template = (args) => {
-  //👇 Assigns the function result to a variable
-  const functionResult = someFunction(args.propertyA, args.propertyB);
-  return {
-    components: { YourComponent },
-    setup() {
-      //👇 The args will now be passed down to the template
-      return {
-        args: {
+export const ExampleStory = {
+  render: ({ args }) => {
+    const { propertyA, propertyB } = args;
+    //👇 Assigns the function result to a variable
+    const functionResult = someFunction(propertyA, propertyB);
+    return {
+      components: { YourComponent },
+      setup() {
+        return {
           ...args,
           //👇 Replaces arg variable with the override (without the need of mutation)
           someProperty: functionResult,
-        },
-      };
-    },
-    template:  '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
-  };
-};
-
-export const ExampleStory = Template.bind({});
-ExampleStory.args= {
-  propertyA: 'Item One',
-  propertyB: 'Another Item One',
+        };
+      },
+      template:
+        '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
+    };
+  },
+  args: {
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-custom-args-complex.mdx-3.mdx.mdx b/docs/snippets/vue/component-story-custom-args-complex.mdx-3.mdx.mdx
index 3f98a721667..595367af8dd 100644
--- a/docs/snippets/vue/component-story-custom-args-complex.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/component-story-custom-args-complex.mdx-3.mdx.mdx
@@ -15,25 +15,11 @@ export const someFunction = (valuePropertyA, valuePropertyB) => {
 
 };
 
-export const Template = (args) => {
-  //👇 Assigns the function result to a variable
-  const functionResult = someFunction(args.propertyA, args.propertyB);
-  return {
-    components: { YourComponent },
-    setup() {
-      //👇 The args will now be passed down to the template
-      return {
-        args: {
-          ...args,
-          //👇 Replaces arg variable with the override (without the need of mutation)
-          someProperty: functionResult,
-        },
-      };
-    },
-    template:  '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
-  };
-};
-
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 <Canvas>
   <Story
     name="ExampleStory"
@@ -56,8 +42,22 @@ export const Template = (args) => {
     args={{
       propertyA: 'Item One',
       propertyB: 'Another Item One',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => {
+      const { propertyA, propertyB } = args;
+      const functionResult = someFunction(propertyA, propertyB);
+      return {
+        components: { YourComponent },
+        setup() {
+          return {
+            args: {
+              ...args,
+              someProperty: functionResult,
+            },
+          };
+        },
+        template: '<YourComponent v-bind="args" />',
+      };
+    }} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-custom-args-icons.2.js.mdx b/docs/snippets/vue/component-story-custom-args-icons.2.js.mdx
deleted file mode 100644
index 59af2057e05..00000000000
--- a/docs/snippets/vue/component-story-custom-args-icons.2.js.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```js
-// YourComponent.stories.js
-
-import YourComponent from './YourComponent.vue';
-
-import { IconA, IconB, IconC, IconD, IconE } from './icons';
-
-//👇 Maps the icons to a JSON serializable object to be safely used with the argTypes
-const iconMap = { IconA, IconB, IconC, IconD, IconE };
-
-export default {
-  title: 'My Story with Icons',
-  component: YourComponent,
-  //👇 Creates specific argTypes with options
-  argTypes: {
-    icon: {
-      options: Object.keys(iconMap),
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => {
-  //👇 Retrieves the appropriate icon passes it as a component prop
-  const oldArgs = args;
-  const { icon } = oldArgs;
-
-  //👇 Sets the new icon
-  const selectedIcon = iconMap[icon];
-
-  //👇 Updates the args with the new icon
-  args.icon = selectedIcon;
-
-  return {
-    props: Object.keys(argTypes),
-    components: { YourComponent },
-    template: '<YourComponent v-bind="$props"/>',
-  };
-};
-```
diff --git a/docs/snippets/vue/component-story-custom-args-icons.3.js.mdx b/docs/snippets/vue/component-story-custom-args-icons.3.js.mdx
deleted file mode 100644
index 8da0ef8d9bb..00000000000
--- a/docs/snippets/vue/component-story-custom-args-icons.3.js.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
-```js
-// YourComponent.stories.js
-
-import YourComponent from './YourComponent.vue';
-
-import { IconA, IconB, IconC, IconD, IconE } from './icons';
-
-//👇 Maps the icons to a JSON serializable object to be safely used with the argTypes
-const iconMap = { IconA, IconB, IconC, IconD, IconE };
-
-export default {
-  title: 'My Story with Icons',
-  component: YourComponent,
-  //👇 Creates specific argTypes with options
-  argTypes: {
-    icon: {
-      options: Object.keys(iconMap),
-    },
-  },
-};
-
-const Template = (args) => {
-  return {
-    components: { YourComponent },
-    setup() {
-      //👇 The args will now be passed down to the template
-      return {
-        args: {
-          ...args,
-          //👇 Replaces the local variable with the override (without mutating it)
-          icon: iconMap[args.icon],
-        },
-      };
-    },
-    template: '<YourComponent v-bind="args" />',
-  };
-};
-```
diff --git a/docs/snippets/vue/component-story-figma-integration.js.mdx b/docs/snippets/vue/component-story-figma-integration.js.mdx
index c11f6fc3654..113030fabe1 100644
--- a/docs/snippets/vue/component-story-figma-integration.js.mdx
+++ b/docs/snippets/vue/component-story-figma-integration.js.mdx
@@ -5,24 +5,28 @@ import { withDesign } from 'storybook-addon-designs';
 
 import MyComponent from './MyComponent.vue';
 
-// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/7.0/vue/writing-stories/introduction#default-export
 export default {
   title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 };
 
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template = () => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
-
-export const Example = Template.bind({});
-Example.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/Sample-File',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Example = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-figma-integration.mdx.mdx b/docs/snippets/vue/component-story-figma-integration.mdx.mdx
index a75e8952883..3012f1cfd24 100644
--- a/docs/snippets/vue/component-story-figma-integration.mdx.mdx
+++ b/docs/snippets/vue/component-story-figma-integration.mdx.mdx
@@ -9,23 +9,24 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="FigmaExample" component={MyComponent} decorators={[withDesign]} />
 
-export const Template = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { MyComponent },
-  template: 'MyComponent />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story
     name="Example"
-     parameters={{
+    parameters={{
       design: {
         type: 'figma',
         url: 'https://www.figma.com/file/Sample-File',
       },
     }}
-  >
-  {Template.bind({})}
-  </Story>
+    render={() => ({
+      components: { MyComponent },
+      template: 'MyComponent />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-figma-integration.ts.mdx b/docs/snippets/vue/component-story-figma-integration.ts.mdx
index 0bacfcc5b3b..b308b60e3c0 100644
--- a/docs/snippets/vue/component-story-figma-integration.ts.mdx
+++ b/docs/snippets/vue/component-story-figma-integration.ts.mdx
@@ -1,30 +1,40 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, StoryFn } from '@storybook/vue'; // For Vue 3 use import { Meta, Story } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue'; // For Vue 3 use import { Meta, Story } from '@storybook/vue3';
 
 import { withDesign } from 'storybook-addon-designs';
 
 import MyComponent from './MyComponent.vue';
 
-// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/7.0/vue/writing-stories/introduction#default-export
 export default {
   title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 } as Meta<typeof MyComponent>;
 
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+// More on component templates: https://storybook.js.org/docs/7.0/vue/writing-stories/introduction#using-args
 const Template: StoryFn<typeof MyComponent> = () => ({
   components: { MyComponent },
   template: '<MyComponent />',
 });
 
-export const Example = Template.bind({});
-Example.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/Sample-File',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Example: Story = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-mdx-story-by-name.mdx-2.mdx.mdx b/docs/snippets/vue/component-story-mdx-story-by-name.mdx-2.mdx.mdx
index c03e760d90e..32d8fd989ff 100644
--- a/docs/snippets/vue/component-story-mdx-story-by-name.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/component-story-mdx-story-by-name.mdx-2.mdx.mdx
@@ -7,13 +7,18 @@ import Button from './Button.vue';
 
 <Meta title="Button" component={Button} />
 
-export const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Button },
-  template: '<Button v-bind="$props" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
-<Story name="Basic" args={{ label: 'hello' }}>
-  {Template.bind({})}
-</Story>
+<Story 
+  name="Basic"
+  args={{ label: 'hello' }}
+  render={(args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { Button },
+    template: '<Button v-bind="$props" />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-mdx-story-by-name.mdx-3.mdx.mdx b/docs/snippets/vue/component-story-mdx-story-by-name.mdx-3.mdx.mdx
index 80895d40a79..deca29ac410 100644
--- a/docs/snippets/vue/component-story-mdx-story-by-name.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/component-story-mdx-story-by-name.mdx-3.mdx.mdx
@@ -7,15 +7,20 @@ import Button from './Button.vue';
 
 <Meta title="Button" component={Button} />
 
-export const Template = (args) => ({
-  components: { Button },
-  setup() {
-    return { args };
-  },
-  template: '<Button v-bind="args" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
-<Story name="Basic" args={{ label: 'hello' }}>
-  {Template.bind({})}
-</Story>
+<Story
+name="Basic"
+args={{ label: 'hello' }}
+render={(args) => ({
+components: { Button },
+setup() {
+return { args };
+},
+template: '<Button v-bind="args" />',
+})} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-cdn.js.mdx b/docs/snippets/vue/component-story-static-asset-cdn.js.mdx
index 20e6e910191..c54b2d1b1ba 100644
--- a/docs/snippets/vue/component-story-static-asset-cdn.js.mdx
+++ b/docs/snippets/vue/component-story-static-asset-cdn.js.mdx
@@ -3,13 +3,20 @@
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
 };
 
-export const WithAnImage = () => ({
-  template: '<img src="https://place-hold.it/350x150" alt="My CDN placeholder"/>',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage = {
+  render: () => ({
+    template: '<img src="https://place-hold.it/350x150" alt="My CDN placeholder"/>',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-cdn.mdx.mdx b/docs/snippets/vue/component-story-static-asset-cdn.mdx.mdx
index 25f91e1caf3..2508d192bea 100644
--- a/docs/snippets/vue/component-story-static-asset-cdn.mdx.mdx
+++ b/docs/snippets/vue/component-story-static-asset-cdn.mdx.mdx
@@ -7,12 +7,15 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="img" component={MyComponent}/>
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
 <Story 
-  name="withAnImage">
-  {() => {
-    return {
-      template: `<img src="https://place-hold.it/350x150" alt="My CDN placeholder"/>`,
-    };
-  }}
-</Story>
+  name="withAnImage"
+  render={() => ({
+    template: `<img src="https://place-hold.it/350x150" alt="My CDN placeholder"/>`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx b/docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx
index 72e8ea79e83..25433007805 100644
--- a/docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx
+++ b/docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx
@@ -5,9 +5,9 @@ import imageFile from './static/image.png';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
 };
 
@@ -16,15 +16,22 @@ const image = {
   alt: 'my image',
 };
 
-export const WithAnImage = () => ({
-  props: {
-    src: {
-      default: () => image.src,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage = {
+  render: () => ({
+    props: {
+      src: {
+        default: () => image.src,
+      },
+      alt: {
+        default: () => image.alt,
+      },
     },
-    alt: {
-      default: () => image.alt,
-    },
-  },
-  template: `<img :src="src" :alt="alt"/>`,
-});
+    template: `<img :src="src" :alt="alt"/>`,
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-with-import.3.js.mdx b/docs/snippets/vue/component-story-static-asset-with-import.3.js.mdx
index 19c181a8e1f..7c429a2e174 100644
--- a/docs/snippets/vue/component-story-static-asset-with-import.3.js.mdx
+++ b/docs/snippets/vue/component-story-static-asset-with-import.3.js.mdx
@@ -5,9 +5,9 @@ import imageFile from './static/image.png';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
 };
 
@@ -16,13 +16,18 @@ const image = {
   alt: 'my image',
 };
 
-export const WithAnImage = () => {
-  return {
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage = {
+  render: () => ({
     setup() {
-       //👇 Returns the content of the image object create above.
+      //👇 Returns the content of the image object create above.
       return { image };
     },
     template: `<img v-bind="image"/>`,
-  };
+  }),
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-with-import.mdx-2.mdx.mdx b/docs/snippets/vue/component-story-static-asset-with-import.mdx-2.mdx.mdx
index 555aa9a3d33..765535ee17a 100644
--- a/docs/snippets/vue/component-story-static-asset-with-import.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/component-story-static-asset-with-import.mdx-2.mdx.mdx
@@ -12,20 +12,23 @@ export const image = {
   alt: 'my image',
 };
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
 <Story 
-  name="WithAnImage">
-  {() => {
-    return {
-      props: {
-        src: {
-          default: () => image.src,
-        },
-        alt: {
-          default: () => image.alt,
-        },
+  name="withAnImage"
+  render={() => ({
+    props: {
+      src: {
+        default: () => image.src,
       },
-      template: `<img :src="src" :alt="alt"/>`,
-    };
-  }}
-</Story>
+      alt: {
+        default: () => image.alt,
+      },
+    },
+    template: `<img :src="src" :alt="alt"/>`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-with-import.mdx-3.mdx.mdx b/docs/snippets/vue/component-story-static-asset-with-import.mdx-3.mdx.mdx
index 0c248e8c617..3511fbffee5 100644
--- a/docs/snippets/vue/component-story-static-asset-with-import.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/component-story-static-asset-with-import.mdx-3.mdx.mdx
@@ -12,15 +12,18 @@ export const image = {
   alt: 'my image',
 };
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
 <Story 
-  name="WithAnImage">
-  {() => {
-    return {
-      setup() {
-        return { image };
-      },
-      template: `<img v-bind="image"/>`,
-    };
-  }}
-</Story>
+  name="WithAnImage"
+  render={() => ({
+    setup() {
+      return { image };
+    },
+    template: `<img v-bind="image"/>`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-without-import.js.mdx b/docs/snippets/vue/component-story-static-asset-without-import.js.mdx
index 37352927b9a..4ef7585553a 100644
--- a/docs/snippets/vue/component-story-static-asset-without-import.js.mdx
+++ b/docs/snippets/vue/component-story-static-asset-without-import.js.mdx
@@ -3,14 +3,16 @@
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
 };
 
 // Assume image.png is located in the "public" directory.
-export const WithAnImage = () => ({
-  template: '<img src="image.png" alt="my image" />',
-});
+export const WithAnImage = {
+  render: () => ({
+    template: '<img src="image.png" alt="my image" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-without-import.mdx.mdx b/docs/snippets/vue/component-story-static-asset-without-import.mdx.mdx
index d793002a15c..f4875eccfde 100644
--- a/docs/snippets/vue/component-story-static-asset-without-import.mdx.mdx
+++ b/docs/snippets/vue/component-story-static-asset-without-import.mdx.mdx
@@ -5,16 +5,10 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 <Meta title="img" component={MyComponent}/>
 
-<!-- Assume image.png is located in the "public" directory.-->
+<!-- Assume image.png is located in the "public" directory. -->
 <Story 
-  name="WithAnImage">
-  {() => {
-    return {
-      setup() {
-        return { image };
-      },
-      template: `<img src="image.png" alt="my image" />`,
-    };
-  }}
-</Story>
+  name="WithAnImage"
+  render={() => ({
+    template: '<img src="/image.png" alt="my image" />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-accessibility.2.js.mdx b/docs/snippets/vue/component-story-with-accessibility.2.js.mdx
index 1559c5bf523..0e0876e1595 100644
--- a/docs/snippets/vue/component-story-with-accessibility.2.js.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.2.js.mdx
@@ -5,9 +5,9 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Accessibility testing',
   component: Button,
   argTypes: {
@@ -15,23 +15,29 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  components: { Button },
-  props: Object.keys(argTypes),
-  template: '<Button v-bind="$props" v-on="$props" />',
-});
-
 // This is an accessible story
-export const Accessible = Template.bind({});
-Accessible.args = {
-  primary: false,
-  label: 'Button',
+export const Accessible = {
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" v-on="$props" />',
+  }),
+  args: {
+    primary: false,
+    label: 'Button',
+  },
 };
 
 // This is not
-export const Inaccessible = Template.bind({});
-Inaccessible.args = {
-  ...Accessible.args,
-  backgroundColor: 'red',
+export const Inaccessible = {
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" v-on="$props" />',
+  }),
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-accessibility.3.js.mdx b/docs/snippets/vue/component-story-with-accessibility.3.js.mdx
index 82f3717d0cf..f006abce95b 100644
--- a/docs/snippets/vue/component-story-with-accessibility.3.js.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.3.js.mdx
@@ -5,9 +5,9 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Accessibility testing',
   component: Button,
   argTypes: {
@@ -24,16 +24,32 @@ const Template = (args) => ({
 });
 
 // This is an accessible story
-export const Accessible = Template.bind({});
-Accessible.args = {
-  primary: false,
-  label: 'Button',
+export const Accessible = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    primary: false,
+    label: 'Button',
+  },
 };
 
 // This is not
-export const Inaccessible = Template.bind({});
-Inaccessible.args = {
-  ...Accessible.args,
-  backgroundColor: 'red',
+export const Inaccessible = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-accessibility.mdx-2.mdx.mdx b/docs/snippets/vue/component-story-with-accessibility.mdx-2.mdx.mdx
index 8d2b797e331..a236ad94897 100644
--- a/docs/snippets/vue/component-story-with-accessibility.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.mdx-2.mdx.mdx
@@ -16,11 +16,11 @@ import Button from './Button.vue';
     }
   }} />
 
-export const Template = (args, { argTypes }) => ({
-  components: { Button },
-  props: Object.keys(argTypes),
-  template: '<Button v-bind="$props" v-on="$props" />',
-});
+<!--
+  👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 ## This is an accessible story
 
@@ -29,9 +29,12 @@ export const Template = (args, { argTypes }) => ({
   args={{
     primary: false,
     label: 'Button'
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { Button },
+    template: '<Button v-bind="$props" v-on="$props" />',
+  })} />
 
 ## This is not
 
@@ -41,7 +44,10 @@ export const Template = (args, { argTypes }) => ({
     primary: false,
     label: 'Button',
     backgroundColor: 'red'
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { Button },
+    template: '<Button v-bind="$props" v-on="$props" />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx b/docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx
index 2b891162b95..221cd63ecc6 100644
--- a/docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx
@@ -16,13 +16,11 @@ import Button from './Button.vue';
     }
   }} />
 
-export const Template = (args) => ({
-  components: { Button },
-  setup() {
-    return { args };
-  },
-  template: '<Button v-bind="args" />',
-});
+<!--
+  👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 ## This is an accessible story
 
@@ -31,9 +29,14 @@ export const Template = (args) => ({
   args={{
     primary: false,
     label: 'Button'
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    components: { MyButton },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  })} />
 
 ## This is not
 
@@ -43,7 +46,12 @@ export const Template = (args) => ({
     primary: false,
     label: 'Button',
     backgroundColor: 'red'
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    components: { MyButton },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-custom-render-function.js.mdx b/docs/snippets/vue/component-story-with-custom-render-function.js.mdx
new file mode 100644
index 00000000000..b2226c9ebf7
--- /dev/null
+++ b/docs/snippets/vue/component-story-with-custom-render-function.js.mdx
@@ -0,0 +1,33 @@
+```js
+// MyComponent.stories.js
+
+import Layout from './Layout.vue';
+
+import MyComponent from './MyComponent.vue';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+};
+
+// This story uses a render function to fully control how the component renders.
+export const Example = {
+  render: () => ({
+    components: { Layout, MyComponent },
+    template: `
+      <Layout>
+        <header>
+          <h1>Example</h1>
+        </header>
+        <article>
+          <MyComponent />
+        </article>
+      </Layout>
+    `,
+  }),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx b/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx
new file mode 100644
index 00000000000..5e7e56c8a5b
--- /dev/null
+++ b/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx
@@ -0,0 +1,35 @@
+```ts
+// MyComponent.stories.js
+
+import type { Meta, Story } from '@storybook/vue'; // Replace with '@storybook/vue3' if you're working with Vue3 project
+
+import Layout from './Layout.vue';
+
+import MyComponent from './MyComponent.vue';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+};
+
+// This story uses a render function to fully control how the component renders.
+export const Example: Story = {
+  render: () => ({
+    components: { Layout, MyComponent },
+    template: `
+      <Layout>
+        <header>
+          <h1>Example</h1>
+        </header>
+        <article>
+          <MyComponent />
+        </article>
+      </Layout>
+    `,
+  }),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/documentscreen-story-msw-graphql-query.3.js.mdx b/docs/snippets/vue/documentscreen-story-msw-graphql-query.3.js.mdx
index 94dba819119..185a5df817b 100644
--- a/docs/snippets/vue/documentscreen-story-msw-graphql-query.3.js.mdx
+++ b/docs/snippets/vue/documentscreen-story-msw-graphql-query.3.js.mdx
@@ -9,9 +9,9 @@ import { graphql } from 'msw';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
 };
@@ -65,37 +65,43 @@ const TestData = {
   ],
 };
 
-const PageTemplate = () => ({
-  components: { DocumentScreen, WrapperComponent },
-  template: `
-    <WrapperComponent>
-      <SampleGraphqlComponent />
-    </WrapperComponent>
-  `,
-});
-
-export const MockedSuccess = PageTemplate.bind({});
-MockedSuccess.parameters = {
-  msw: [
-    graphql.query('AllInfoQuery', (req, res, ctx) => {
-      return res(ctx.data(TestData));
-    }),
-  ],
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const MockedSuccess = {
+  render: () => ({
+    components: { DocumentScreen, WrapperComponent },
+    template: '<WrapperComponent><DocumentScreen /></WrapperComponent>',
+  }),
+  parameters: {
+    msw: [
+      graphql.query('AllInfoQuery', (req, res, ctx) => {
+        return res(ctx.data(TestData));
+      }),
+    ],
+  },
 };
 
-export const MockedError = PageTemplate.bind({});
-MockedError.parameters = {
-  msw: [
-    graphql.query('AllInfoQuery', (req, res, ctx) => {
-      return res(
-        ctx.delay(800),
-        ctx.errors([
-          {
-            message: 'Access denied',
-          },
-        ])
-      );
-    }),
-  ],
+export const MockedError = {
+  render: () => ({
+    components: { DocumentScreen, WrapperComponent },
+    template: '<WrapperComponent><DocumentScreen /></WrapperComponent>',
+  }),
+  parameters: {
+    msw: [
+      graphql.query('AllInfoQuery', (req, res, ctx) => {
+        return res(
+          ctx.delay(800),
+          ctx.errors([
+            {
+              message: 'Access denied',
+            },
+          ])
+        );
+      }),
+    ],
+  },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx b/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
index eaf1c5396b8..f09309eee49 100644
--- a/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
+++ b/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
@@ -7,9 +7,9 @@ import DocumentScreen from './YourPage.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
 };
@@ -63,26 +63,36 @@ const TestData = {
   ],
 };
 
-const PageTemplate = () => ({
-  components: { DocumentScreen },
-  template: '<DocumentScreen />',
-});
-
-export const MockedSuccess = PageTemplate.bind({});
-MockedSuccess.parameters = {
-  msw: [
-    rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
-      return res(ctx.json(TestData));
-    }),
-  ],
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const MockedSuccess = {
+  render: () => ({
+    components: { DocumentScreen },
+    template: '<DocumentScreen />',
+  }),
+  parameters: {
+    msw: [
+      rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
+        return res(ctx.json(TestData));
+      }),
+    ],
+  },
 };
 
-export const MockedError = PageTemplate.bind({});
-MockedError.parameters = {
-  msw: [
-    rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
-      return res(ctx.delay(800), ctx.status(403));
-    }),
-  ],
+export const MockedError = {
+  render: () => ({
+    components: { DocumentScreen },
+    template: '<DocumentScreen />',
+  }),
+  parameters: {
+    msw: [
+      rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
+        return res(ctx.delay(800), ctx.status(403));
+      }),
+    ],
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/form-story-component-with-play-function.2.js.mdx b/docs/snippets/vue/form-story-component-with-play-function.2.js.mdx
deleted file mode 100644
index d79f1d5905f..00000000000
--- a/docs/snippets/vue/form-story-component-with-play-function.2.js.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-```js
-// Form.stories.js
-
-import { userEvent, within } from '@storybook/testing-library';
-
-import LoginForm from './LoginForm.vue';
-
-export default {
-  component: LoginForm,
-};
-
-export const FilledForm = {
-  play: async ({ args, canvasElement }) => {
-     // Starts querying the component from its root element
-    const canvas = within(canvasElement);
-
-    await userEvent.type(canvas.getByTestId('email'), 'email');
-    await userEvent.type(canvas.getByTestId('password'), 'password');
-
-    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(canvas.getByRole('button'));
-  },
-  render: (args, { argTypes }) => ({
-    components: { LoginForm },
-    props: Object.keys(argTypes),
-    template: '<LoginForm @onSubmit="onSubmit" v-bind="$props"/>',
-  }),
-};
-```
\ No newline at end of file
diff --git a/docs/snippets/vue/form-story-component-with-play-function.3.js.mdx b/docs/snippets/vue/form-story-component-with-play-function.3.js.mdx
deleted file mode 100644
index 96d612cee7d..00000000000
--- a/docs/snippets/vue/form-story-component-with-play-function.3.js.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-```js
-// Form.stories.js
-
-import { userEvent, within } from '@storybook/testing-library';
-
-import LoginForm from './LoginForm.vue';
-
-export default {
-  component: LoginForm,
-};
-
-export const FilledForm = {
-  play: async ({ args, canvasElement }) => {
-    // Starts querying the component from its root element
-    const canvas = within(canvasElement);
-
-    await userEvent.type(canvas.getByTestId('email'), 'email');
-    await userEvent.type(canvas.getByTestId('password'), 'password');
-    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(canvas.getByRole('button'));
-  },
-  render: (args) => ({
-    components: { LoginForm },
-    setup() {
-      return { args };
-    },
-    template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
-  }),
-};
-```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-expanded.2.js.mdx b/docs/snippets/vue/list-story-expanded.2.js.mdx
index b81948be649..0283f679873 100644
--- a/docs/snippets/vue/list-story-expanded.2.js.mdx
+++ b/docs/snippets/vue/list-story-expanded.2.js.mdx
@@ -6,34 +6,47 @@ import ListItem from './ListItem.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
-export const Empty = (args, { argTypes }) => ({
-  components: { List },
-  props: Object.keys(argTypes),
-  template: '<list v-bind="$props"/>',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty = {
+  render: (args, { argTypes }) => ({
+    components: { List },
+    props: Object.keys(argTypes),
+    template: '<List v-bind="$props"/>',
+  }),
+};
 
-export const OneItem = (args, { argTypes }) => ({
-  components: { List, ListItem },
-  props: Object.keys(argTypes),
-  template: '<list v-bind="$props"><list-item/></list>',
-});
+export const OneItem = {
+  render: (args, { argTypes }) => ({
+    components: { List, ListItem },
+    props: Object.keys(argTypes),
+    template: `
+      <List v-bind="$props">
+        <list-item/>
+      </List>`,
+  }),
+};
 
-export const ManyItems = (args, { argTypes }) => ({
-  components: { List, ListItem },
-  props: Object.keys(argTypes),
-  template: `
-    <list v-bind="$props">
-      <list-item/>
-      <list-item/>
-      <list-item/>
-    </list>
-    `,
-});
+export const ManyItems = {
+  render: (args, { argTypes }) => ({
+    components: { List, ListItem },
+    props: Object.keys(argTypes),
+    template: `
+      <List v-bind="$props">
+        <list-item/>
+        <list-item/>
+        <list-item/>
+      </List>`,
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-expanded.3.js.mdx b/docs/snippets/vue/list-story-expanded.3.js.mdx
index e74b9d9705d..30d8fb53c45 100644
--- a/docs/snippets/vue/list-story-expanded.3.js.mdx
+++ b/docs/snippets/vue/list-story-expanded.3.js.mdx
@@ -6,40 +6,53 @@ import ListItem from './ListItem.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
-export const Empty = (args) => ({
-  components: { List },
-  setup() {
-    return { args };
-  },
-  template: '<list v-bind="args"/>',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty = {
+  render: (args) => ({
+    components: { List },
+    setup() {
+      return { args };
+    },
+    template: '<List v-bind="args">',
+  }),
+};
 
-export const OneItem = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    return { args };
-  },
-  template: '<list v-bind="args"><list-item/></list>',
-});
+export const OneItem = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <List v-bind="args">
+        <list-item/>
+      </List>`,
+  }),
+};
 
-export const ManyItems = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    return { args };
-  },
-  template: `
-    <list v-bind="args">
-      <list-item/>
-      <list-item/>
-      <list-item/>
-    </list>
-    `,
-});
-```
\ No newline at end of file
+export const ManyItems = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { ...args };
+    },
+    template: `
+      <List v-bind="args">
+        <list-item/>
+        <list-item/>
+        <list-item/>
+      </List>`,
+  }),
+};
+```
diff --git a/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx b/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx
index 429fe6f3fb7..ad2be5eae61 100644
--- a/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx
+++ b/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx
@@ -4,38 +4,51 @@
 import List from './ListComponent.vue';
 import ListItem from './ListItem.vue';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import type { Meta, Story } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
 } as Meta<typeof List>;
 
-export const Empty: StoryFn<typeof List> = (args, { argTypes }) => ({
-  components: { List },
-  props: Object.keys(argTypes),
-  template: '<list v-bind="$props"/>',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty: Story = {
+  render: (args, { argTypes }) => ({
+    components: { List },
+    props: Object.keys(argTypes),
+    template: '<List v-bind="$props"/>',
+  }),
+};
 
-export const OneItem: StoryFn<typeof List> = (args, { argTypes }) => ({
-  components: { List, ListItem },
-  props: Object.keys(argTypes),
-  template: '<list v-bind="$props"><list-item/></list>',
-});
+export const OneItem: Story = {
+  render: (args, { argTypes }) => ({
+    components: { List, ListItem },
+    props: Object.keys(argTypes),
+    template: `
+      <List v-bind="$props">
+        <list-item/>
+      </List>`,
+  }),
+};
 
-export const ManyItems: StoryFn<typeof List> = (args, { argTypes }) => ({
-  components: { List, ListItem },
-  props: Object.keys(argTypes),
-  template: `
-    <list v-bind="$props">
-      <list-item/>
-      <list-item/>
-      <list-item/>
-    </list>
-    `,
-});
+export const ManyItems: Story = {
+  render: (args, { argTypes }) => ({
+    components: { List, ListItem },
+    props: Object.keys(argTypes),
+    template: `
+      <List v-bind="$props">
+        <list-item/>
+        <list-item/>
+        <list-item/>
+      </List>`,
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx b/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx
index 74c9ea1a72b..3034a470efc 100644
--- a/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx
+++ b/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx
@@ -4,44 +4,57 @@
 import List from './ListComponent.vue';
 import ListItem from './ListItem.vue';
 
-import { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
 } as Meta<typeof List>;
 
-export const Empty: StoryFn<typeof List> = (args) => ({
-  components: { List },
-  setup() {
-    return { args };
-  },
-  template: '<list v-bind="args"/>',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty: Story = {
+  render: (args) => ({
+    components: { List },
+    setup() {
+      return { args };
+    },
+    template: '<List v-bind="args">',
+  }),
+};
 
-export const OneItem: StoryFn<typeof List> = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    return { args };
-  },
-  template: '<list v-bind="args"><list-item/></list>',
-});
+export const OneItem: Story = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <List v-bind="args">
+        <list-item/>
+      </List>`,
+  }),
+};
 
-export const ManyItems: StoryFn<typeof List> = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    return { args };
-  },
-  template: `
-    <list v-bind="args">
-      <list-item/>
-      <list-item/>
-      <list-item/>
-    </list>
-    `,
-});
+export const ManyItems: Story = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { ...args };
+    },
+    template: `
+      <List v-bind="args">
+        <list-item/>
+        <list-item/>
+        <list-item/>
+      </List>`,
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-reuse-data.2.js.mdx b/docs/snippets/vue/list-story-reuse-data.2.js.mdx
index 3f017761fae..c85a025b01d 100644
--- a/docs/snippets/vue/list-story-reuse-data.2.js.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.2.js.mdx
@@ -9,26 +9,32 @@ import { Selected, Unselected } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
-export const ManyItems = (args, { argTypes }) => ({
-  components: { List, ListItem },
-  props: Object.keys(argTypes),
-  template: `
-    <List v-bind="$props">
-      <list-item :isSelected="Selected"/>
-      <list-item :isSelected="Unselected"/>
-      <list-item :isSelected="Unselected"/>
-    </List>`,
-});
-
-ManyItems.args = {
-  Selected: Selected.args.isSelected,
-  Unselected: Unselected.args.isSelected,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ManyItems = {
+  render: (args, { argTypes }) => ({
+    components: { List, ListItem },
+    props: Object.keys(argTypes),
+    template: `
+      <List v-bind="$props">
+        <list-item :isSelected="Selected"/>
+        <list-item :isSelected="Unselected"/>
+        <list-item :isSelected="Unselected"/>
+      </List>`,
+  }),
+  args: {
+    Selected: Selected.args.isSelected,
+    Unselected: Unselected.args.isSelected,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-reuse-data.3.js.mdx b/docs/snippets/vue/list-story-reuse-data.3.js.mdx
index f4eb4c0f383..5f0ee1cd7a3 100644
--- a/docs/snippets/vue/list-story-reuse-data.3.js.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.3.js.mdx
@@ -9,29 +9,34 @@ import { Selected, Unselected } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
-
-export const ManyItems = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    return { ...args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ManyItems = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { ...args };
+    },
+    template: `
+      <List v-bind="args">
+        <list-item :isSelected="Selected"/>
+        <list-item :isSelected="Unselected"/>
+        <list-item :isSelected="Unselected"/>
+      </List>`,
+  }),
+  args: {
+    Selected: Selected.args.isSelected,
+    Unselected: Unselected.args.isSelected,
   },
-  template: `
-    <List v-bind="args">
-      <list-item :isSelected="Selected"/>
-      <list-item :isSelected="Unselected"/>
-      <list-item :isSelected="Unselected"/>
-    </List>`,
-});
-
-ManyItems.args={
-  Selected: Selected.args.isSelected,
-  Unselected: Unselected.args.isSelected,
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx b/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx
index 225252c1575..d0093f91553 100644
--- a/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx
@@ -4,33 +4,39 @@
 import List from './ListComponent.vue';
 import ListItem from './ListItem.vue';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import type { Meta, Story } from '@storybook/vue';
 
 //👇 We're importing the necessary stories from ListItem
 import { Selected, Unselected } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
 } as Meta<typeof List>;
 
-export const ManyItems: StoryFn<typeof List> = (args, { argTypes }) => ({
-  components: { List, ListItem },
-  props: Object.keys(argTypes),
-  template: `
-    <List v-bind="$props">
-      <list-item :isSelected="Selected"/>
-      <list-item :isSelected="Unselected"/>
-      <list-item :isSelected="Unselected"/>
-    </List>`,
-});
-
-ManyItems.args = {
-  Selected: Selected.args.isSelected,
-  Unselected: Unselected.args.isSelected,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ManyItems: Story = {
+  render: (args, { argTypes }) => ({
+    components: { List, ListItem },
+    props: Object.keys(argTypes),
+    template: `
+      <List v-bind="$props">
+        <list-item :isSelected="Selected"/>
+        <list-item :isSelected="Unselected"/>
+        <list-item :isSelected="Unselected"/>
+      </List>`,
+  }),
+  args: {
+    Selected: Selected.args.isSelected,
+    Unselected: Unselected.args.isSelected,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx b/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx
index ff0fe53148d..7633181840a 100644
--- a/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx
@@ -4,35 +4,41 @@
 import List from './ListComponent.vue';
 import ListItem from './ListItem.vue';
 
-import { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue3';
 
 //👇 We're importing the necessary stories from ListItem
 import { Selected, Unselected } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
 } as Meta<typeof List>;
 
-export const ManyItems: StoryFn<typeof List> = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    return { ...args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ManyItems: Story = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { ...args };
+    },
+    template: `
+      <List v-bind="args">
+        <list-item :isSelected="Selected"/>
+        <list-item :isSelected="Unselected"/>
+        <list-item :isSelected="Unselected"/>
+      </List>`,
+  }),
+  args: {
+    Selected: Selected.args.isSelected,
+    Unselected: Unselected.args.isSelected,
   },
-  template: `
-    <List v-bind="args">
-      <list-item :isSelected="Selected"/>
-      <list-item :isSelected="Unselected"/>
-      <list-item :isSelected="Unselected"/>
-    </List>`,
-});
-
-ManyItems.args = {
-  Selected: Selected.args.isSelected,
-  Unselected: Unselected.args.isSelected,
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-starter.2.js.mdx b/docs/snippets/vue/list-story-starter.2.js.mdx
index 52914eb835c..7132fc1ce3e 100644
--- a/docs/snippets/vue/list-story-starter.2.js.mdx
+++ b/docs/snippets/vue/list-story-starter.2.js.mdx
@@ -5,17 +5,19 @@ import List from './ListComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
 // Always an empty list, not super interesting
-const Template = (args, { argTypes }) => ({
-  components: { List },
-  props: Object.keys(argTypes),
-  template: '<list v-bind="$props"/>',
-});
+export const Empty = {
+  render: (args, { argTypes }) => ({
+    components: { List },
+    props: Object.keys(argTypes),
+    template: '<List v-bind="$props"/>',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-starter.3.js.mdx b/docs/snippets/vue/list-story-starter.3.js.mdx
index c986f99ff11..4eb68fcdf08 100644
--- a/docs/snippets/vue/list-story-starter.3.js.mdx
+++ b/docs/snippets/vue/list-story-starter.3.js.mdx
@@ -5,19 +5,21 @@ import List from './ListComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
 // Always an empty list, not super interesting
-const Template = (args) => ({
-  components: { List },
-  setup() {
-    return { args };
-  },
-  template: '<list v-bind="args"/>',
-});
+export const Empty = {
+  render: (args) => ({
+    components: { List },
+    setup() {
+      return { args };
+    },
+    template: '<List v-bind="args">',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-starter.ts-2.ts.mdx b/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
index ff6266df96a..3da1ee18250 100644
--- a/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
+++ b/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
@@ -3,11 +3,11 @@
 
 import List from './ListComponent.vue';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import type { Meta, Story } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
@@ -15,9 +15,11 @@ export default {
 } as Meta<typeof List>;
 
 // Always an empty list, not super interesting
-const Template: StoryFn<typeof List> = (args, { argTypes }) => ({
-  components: { List },
-  props: Object.keys(argTypes),
-  template: '<list v-bind="$props"/>',
-});
+export const Empty: Story = {
+  render: (args, { argTypes }) => ({
+    components: { List },
+    props: Object.keys(argTypes),
+    template: '<List v-bind="$props"/>',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-starter.ts-3.ts.mdx b/docs/snippets/vue/list-story-starter.ts-3.ts.mdx
index c70cddcd7b0..58231b97637 100644
--- a/docs/snippets/vue/list-story-starter.ts-3.ts.mdx
+++ b/docs/snippets/vue/list-story-starter.ts-3.ts.mdx
@@ -3,11 +3,11 @@
 
 import List from './ListComponent.vue';
 
-import { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
@@ -15,11 +15,13 @@ export default {
 } as Meta<typeof LoginForm>;
 
 // Always an empty list, not super interesting
-const Template: StoryFn<typeof LoginForm> = (args) => ({
-  components: { List },
-  setup() {
-    return { args };
-  },
-  template: '<list v-bind="args"/>',
-});
+export const Empty: Story = {
+  render: (args) => ({
+    components: { List },
+    setup() {
+      return { args };
+    },
+    template: '<List v-bind="args">',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-template.2.js.mdx b/docs/snippets/vue/list-story-template.2.js.mdx
index 6cbc57b20b4..f2ceb52f1e7 100644
--- a/docs/snippets/vue/list-story-template.2.js.mdx
+++ b/docs/snippets/vue/list-story-template.2.js.mdx
@@ -9,13 +9,14 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
+//👇 The ListTemplate construct will be spread to the existing stories.
 const ListTemplate = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { List, ListItem },
@@ -25,20 +26,24 @@ const ListTemplate = (args, { argTypes }) => ({
         <ListItem :item="item" />
       </div>
     </List>
-  `,
+    `,
 });
 
-export const Empty = ListTemplate.bind({});
-EmptyListTemplate.args = {
-  items: [],
+export const Empty = {
+  ...ListTemplate,
+  args: {
+    items: [],
+  },
 };
 
-export const OneItem = ListTemplate.bind({});
-OneItem.args = {
-  items: [
-    {
-      ...Unchecked.args,
-    },
-  ],
+export const OneItem = {
+  ...ListTemplate,
+  args: {
+    items: [
+      {
+        ...Unchecked.args,
+      },
+    ],
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-template.3.js.mdx b/docs/snippets/vue/list-story-template.3.js.mdx
index 76587aabeca..20d9e6a66fd 100644
--- a/docs/snippets/vue/list-story-template.3.js.mdx
+++ b/docs/snippets/vue/list-story-template.3.js.mdx
@@ -9,38 +9,44 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
-const ListTemplate = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    return { args };
-  },
-  template: `
-    <List v-bind="args">
-      <div v-for="item in items" :key="item.title">
-        <ListItem :item="item"/>
-      </div>
-    </List>
-  `,
-});
-
-export const Empty = ListTemplate.bind({});
-Empty.args = {
-  items: [],
+//👇 The ListTemplate construct will be spread to the existing stories.
+export const ListTemplate = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { ...args };
+    },
+    template: `
+      <List v-bind="args">
+        <div v-for="item in items" :key="item.title">
+          <ListItem :item="item"/>
+        </div>
+      </List>
+    `,
+  }),
 };
 
-export const OneItem = ListTemplate.bind({});
-OneItem.args = {
-  items: [
-    {
-      ...Unchecked.args,
-    },
-  ],
+export const Empty = {
+  ...ListTemplate,
+  args: {
+    items: [],
+  },
+};
+export const OneItem = {
+  ...ListTemplate,
+  args: {
+    items: [
+      {
+        ...Unchecked.args,
+      },
+    ],
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-unchecked.2.js.mdx b/docs/snippets/vue/list-story-unchecked.2.js.mdx
index cd4e5cecec4..9efb6d80287 100644
--- a/docs/snippets/vue/list-story-unchecked.2.js.mdx
+++ b/docs/snippets/vue/list-story-unchecked.2.js.mdx
@@ -9,23 +9,25 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
-
-export const OneItem = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { List, ListItem },
-  template: `
-    <List v-bind="$props">
-      <ListItem v-bind="$props"/>
-    </List>
-  `,
-});
-OneItem.args = {
-  ...Unchecked.args,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem = {
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { List, ListItem },
+    template: '<List v-bind="$props"><ListItem v-bind="$props"/></List>',
+  }),
+  args: {
+    ...Unchecked.args,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-unchecked.3.js.mdx b/docs/snippets/vue/list-story-unchecked.3.js.mdx
index 5b7da6194f0..f29e1f9c91c 100644
--- a/docs/snippets/vue/list-story-unchecked.3.js.mdx
+++ b/docs/snippets/vue/list-story-unchecked.3.js.mdx
@@ -9,26 +9,29 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
-export const OneItem = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    //👇 The args will now be passed down to the template
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem = {
+  args: {
+    ...Unchecked.args,
   },
-  template: `
-    <List v-bind="args">
-      <ListItem v-bind="args"/>
-    </List>
-  `,
-});
-OneItem.args = {
-  ...Unchecked.args,
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      //👇 The args will now be passed down to the template
+      return { args };
+    },
+    template: '<List v-bind="args"><ListItem v-bind="args"/></List>',
+  }),
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-with-sub-components.2.js.mdx b/docs/snippets/vue/list-story-with-sub-components.2.js.mdx
index 46b574b4466..67ef97d43b0 100644
--- a/docs/snippets/vue/list-story-with-sub-components.2.js.mdx
+++ b/docs/snippets/vue/list-story-with-sub-components.2.js.mdx
@@ -6,23 +6,32 @@ import ListItem from './ListItem.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
 };
 
-export const Empty = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { List },
-  template: '<List v-bind="$props"/>',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty = {
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { List },
+    template: '<List v-bind="$props"/>',
+  }),
+};
 
-export const OneItem = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { List, ListItem },
-  template: '<List v-bind="$props"><ListItem /></List>',
-});
+export const OneItem = {
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { List, ListItem },
+    template: '<List v-bind="$props"><ListItem /></List>',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-with-sub-components.3.js.mdx b/docs/snippets/vue/list-story-with-sub-components.3.js.mdx
index 0ffa0b326f6..8230ff8d08f 100644
--- a/docs/snippets/vue/list-story-with-sub-components.3.js.mdx
+++ b/docs/snippets/vue/list-story-with-sub-components.3.js.mdx
@@ -6,29 +6,37 @@ import ListItem from './ListItem.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
 };
 
-export const Empty = (args) => ({
-  components: { List },
-  setup() {
-    //👇 The args will now be passed down to the template
-    return { args };
-  }
-  template: '<List v-bind="args"/>',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty = {
+  render: (args) => ({
+    components: { List },
+    setup() {
+      return { args };
+    },
+    template: '<List v-bind="args"/>',
+  }),
+};
 
-export const OneItem = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    //👇 The args will now be passed down to the template
-    return { args };
-  }
-  template: '<List v-bind="args"><ListItem /></List>',
-});
+export const OneItem = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      //👇 The args will now be passed down to the template
+      return { args };
+    },
+    template: '<List v-bind="args"><ListItem /></List>',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/loader-story.3.js.mdx b/docs/snippets/vue/loader-story.3.js.mdx
index b99ff736096..68009a29747 100644
--- a/docs/snippets/vue/loader-story.3.js.mdx
+++ b/docs/snippets/vue/loader-story.3.js.mdx
@@ -7,26 +7,25 @@ import fetch from 'node-fetch';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Examples/Loader',
   component: TodoItem,
 };
 
-export const Primary = (args, { loaded: { todo } }) => {
-  return {
+export const Primary = {
+  render: (args, { loaded: { todo } }) => ({
     components: { TodoItem },
     setup() {
       return { args, todo: todo };
     },
-    template: `<TodoItem :todo="todo"/>`,
-  };
-};
-
-Primary.loaders = [
-  async () => ({
-    todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    template: '<TodoItem :todo="todo" />',
   }),
-];
+  loaders: [
+    async () => ({
+      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    }),
+  ],
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/loader-story.mdx.mdx b/docs/snippets/vue/loader-story.mdx.mdx
index 493be08e80c..976c57f594e 100644
--- a/docs/snippets/vue/loader-story.mdx.mdx
+++ b/docs/snippets/vue/loader-story.mdx.mdx
@@ -9,21 +9,25 @@ import fetch from 'node-fetch';
 
 <Meta title="Examples/Loader" component={TodoItem} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 <Story
   name="Primary"
   loaders={[
     async () => ({
       todo: await (
-        await fetch("https://jsonplaceholder.typicode.com/todos/1")
+        await fetch('https://jsonplaceholder.typicode.com/todos/1')
       ).json(),
     }),
   ]}>
-  {(args, { loaded: { todo } }) => ({
+  render={(args, { loaded: { todo } }) => ({
     components: { TodoItem },
     setup() {
       return { args, todo: todo };
     },
-    template: `<TodoItem :todo="todo"/>`,
-  })}
-</Story>
+    template: '<TodoItem :todo="todo" />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.2.js.mdx b/docs/snippets/vue/login-form-with-play-function.2.js.mdx
index e8261367497..125d8e60752 100644
--- a/docs/snippets/vue/login-form-with-play-function.2.js.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.2.js.mdx
@@ -9,39 +9,50 @@ import LoginForm from './LoginForm.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Form',
   component: LoginForm,
 };
 
-const Template = (args, { argTypes }) => ({
-  components: { LoginForm },
-  props: Object.keys(argTypes),
-  template: `<LoginForm v-bind="$props" v-on="$props" />`,
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const EmptyForm = {
+  render: (args, { argTypes }) => ({
+    components: { LoginForm },
+    props: Object.keys(argTypes),
+    template: `<LoginForm v-bind="$props" v-on="$props" />`,
+  }),
+};
 
-export const EmptyForm = Template.bind({});
+export const FilledForm = {
+  render: (args, { argTypes }) => ({
+    components: { LoginForm },
+    props: Object.keys(argTypes),
+    template: `<LoginForm v-bind="$props" v-on="$props" />`,
+  }),
+  play: async ({ canvasElement }) => {
+    // Starts querying the component from its root element
+    const canvas = within(canvasElement);
 
-export const FilledForm = Template.bind({});
-FilledForm.play = async ({ canvasElement }) => {
-  // Starts querying the component from its root element
-  const canvas = within(canvasElement);
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
 
-  // 👇 Simulate interactions with the component
-  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
-  await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
 
-  // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(canvas.getByRole('button'));
-
-  // 👇 Assert DOM structure
-  await expect(
-    canvas.getByText(
-      'Everything is perfect. Your account is ready and we should probably get you started!'
-    )
-  ).toBeInTheDocument();
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.3.js.mdx b/docs/snippets/vue/login-form-with-play-function.3.js.mdx
index 19c529bd529..60c4bb89d98 100644
--- a/docs/snippets/vue/login-form-with-play-function.3.js.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.3.js.mdx
@@ -9,41 +9,54 @@ import LoginForm from './LoginForm.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Form',
   component: LoginForm,
 };
 
-const Template = (args) => ({
-  components: { LoginForm },
-  setup() {
-    return args;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const EmptyForm = {
+  render: (args) => ({
+    components: { LoginForm },
+    setup() {
+      return args;
+    },
+    template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
+  }),
+};
+
+export const FilledForm = {
+  render: (args) => ({
+    components: { LoginForm },
+    setup() {
+      return args;
+    },
+    template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
+  }),
+  play: async ({ canvasElement }) => {
+    // Starts querying the component from its root element
+    const canvas = within(canvasElement);
+
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
   },
-  template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
-});
-
-export const EmptyForm = Template.bind({});
-
-export const FilledForm = Template.bind({});
-FilledForm.play = async ({ canvasElement }) => {
-  // Starts querying the component from its root element
-  const canvas = within(canvasElement);
-
-  // 👇 Simulate interactions with the component
-  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
-
-  await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
-
-  // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(canvas.getByRole('button'));
-
-  // 👇 Assert DOM structure
-  await expect(
-    canvas.getByText(
-      'Everything is perfect. Your account is ready and we should probably get you started!'
-    )
-  ).toBeInTheDocument();
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx b/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx
index c1e88705767..a6e449bc4f2 100644
--- a/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx
@@ -11,20 +11,23 @@ import LoginForm from './LoginForm.vue';
 
 <Meta title="Form" component={LoginForm} />
 
-export const Template = (args, { argTypes }) => ({
-  components: { LoginForm },
-  props: Object.keys(argTypes),
-  template: `<LoginForm v-bind="$props" v-on="$props" />`,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
-  <Story name="Empty Form">
-    {Template.bind({})}
-  </Story>
-
+  <Story 
+    name="Empty Form"
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { LoginForm },
+      template: `<LoginForm v-bind="$props" v-on="$props" />`,
+    })} />
   <Story
     name="Filled Form"
-    play={async ({ canvasElement }) => {
+    play={ async ({ canvasElement }) => {
       // Starts querying the component from its root element
       const canvas = within(canvasElement);
 
@@ -33,7 +36,7 @@ export const Template = (args, { argTypes }) => ({
 
       await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
-      // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+      // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
       await userEvent.click(canvas.getByRole('button'));
 
       // 👇 Assert DOM structure
@@ -42,8 +45,11 @@ export const Template = (args, { argTypes }) => ({
           'Everything is perfect. Your account is ready and we should probably get you started!'
         )
       ).toBeInTheDocument();
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { LoginForm },
+      template: `<LoginForm v-bind="$props" v-on="$props" />`,
+   })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.mdx-3.mdx b/docs/snippets/vue/login-form-with-play-function.mdx-3.mdx
index ea842adea3c..cc79337b989 100644
--- a/docs/snippets/vue/login-form-with-play-function.mdx-3.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.mdx-3.mdx
@@ -11,19 +11,22 @@ import LoginForm from './LoginForm.vue';
 
 <Meta title="Form" component={LoginForm} />
 
-export const Template = (args) => ({
-  components: { LoginForm },
-  setup() {
-    return { args };
-  },
-  template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
-  <Story name="Empty Form">
-    {Template.bind({})}
-  </Story>
-
+  <Story 
+    name="Empty Form"
+    render={(args) => ({
+      components: { LoginForm },
+      setup() {
+        return { args };
+      },
+      template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
+    })} />
   <Story
     name="Filled Form"
     play={async ({ canvasElement }) => {
@@ -35,7 +38,7 @@ export const Template = (args) => ({
 
       await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
-      // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+      // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
       await userEvent.click(canvas.getByRole('button'));
 
       // 👇 Assert DOM structure
@@ -44,8 +47,13 @@ export const Template = (args) => ({
           'Everything is perfect. Your account is ready and we should probably get you started!'
         )
       ).toBeInTheDocument();
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { LoginForm },
+      setup() {
+        return { args };
+      },
+      template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx b/docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx
index 656daf2ec4e..f40a38b1b6d 100644
--- a/docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx
@@ -7,43 +7,54 @@ import { expect } from '@storybook/jest';
 
 import LoginForm from './LoginForm.vue';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import type { Meta, Story } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Form',
   component: LoginForm,
 } as Meta<typeof LoginForm>;
 
-const Template: StoryFn<typeof LoginForm> = (args, { argTypes }) => ({
-  components: { LoginForm },
-  props: Object.keys(argTypes),
-  template: `<LoginForm v-bind="$props" v-on="$props" />`,
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const EmptyForm: Story = {
+  render: (args, { argTypes }) => ({
+    components: { LoginForm },
+    props: Object.keys(argTypes),
+    template: `<LoginForm v-bind="$props" v-on="$props" />`,
+  }),
+};
 
-export const EmptyForm = Template.bind({});
+export const FilledForm: Story = {
+  render: (args, { argTypes }) => ({
+    components: { LoginForm },
+    props: Object.keys(argTypes),
+    template: `<LoginForm v-bind="$props" v-on="$props" />`,
+  }),
+  play: async ({ canvasElement }) => {
+    // Starts querying the component from its root element
+    const canvas = within(canvasElement);
 
-export const FilledForm = Template.bind({});
-FilledForm.play = async ({ canvasElement }) => {
-  // Starts querying the component from its root element
-  const canvas = within(canvasElement);
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
 
-  // 👇 Simulate interactions with the component
-  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
-  await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
 
-  // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(canvas.getByRole('button'));
-
-  // 👇 Assert DOM structure
-  await expect(
-    canvas.getByText(
-      'Everything is perfect. Your account is ready and we should probably get you started!'
-    )
-  ).toBeInTheDocument();
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx b/docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx
index 1b676ae48db..39ab085cff4 100644
--- a/docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx
@@ -1,4 +1,4 @@
-```js
+```ts
 // LoginForm.stories.ts
 
 import { userEvent, within } from '@storybook/testing-library';
@@ -7,45 +7,58 @@ import { expect } from '@storybook/jest';
 
 import LoginForm from './LoginForm.vue';
 
-import { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Form',
   component: LoginForm,
 } as Meta<typeof LoginForm>;
 
-const Template: StoryFn<typeof LoginForm> = (args) => ({
-  components: { LoginForm },
-  setup() {
-    return args;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const EmptyForm: Story = {
+  render: (args) => ({
+    components: { LoginForm },
+    setup() {
+      return args;
+    },
+    template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
+  }),
+};
+
+export const FilledForm: Story = {
+  render: (args) => ({
+    components: { LoginForm },
+    setup() {
+      return args;
+    },
+    template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
+  }),
+  play: async ({ canvasElement }) => {
+    // Starts querying the component from its root element
+    const canvas = within(canvasElement);
+
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
   },
-  template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
-});
-
-export const EmptyForm = Template.bind({});
-
-export const FilledForm = Template.bind({});
-FilledForm.play = async ({ canvasElement }) => {
-  // Starts querying the component from its root element
-  const canvas = within(canvasElement);
-
-  // 👇 Simulate interactions with the component
-  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
-
-  await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
-
-  // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(canvas.getByRole('button'));
-
-  // 👇 Assert DOM structure
-  await expect(
-    canvas.getByText(
-      'Everything is perfect. Your account is ready and we should probably get you started!'
-    )
-  ).toBeInTheDocument();
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx b/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx
index 32349dcf059..3770bc3373f 100644
--- a/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx
@@ -7,11 +7,11 @@ import Badge from './Badge.vue';
 
 <Meta title="MDX/Badge" component={Badge} />
 
-export const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Badge },
-  template: '<Badge v-bind="$props" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story 
@@ -19,24 +19,33 @@ export const Template = (args, { argTypes }) => ({
     args={{
       status: 'warning', 
       label: 'Warning',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Badge },
+      template: '<Badge v-bind="$props" />',
+    })} />
   <Story 
     name="neutral"
     args={{
       status: 'neutral', 
       label: 'Neutral',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Badge },
+      template: '<Badge v-bind="$props" />',
+    })} />
   <Story 
     name="error"
     args={{
       status: 'error', 
       label: 'Error',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Badge },
+      template: '<Badge v-bind="$props" />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx b/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx
index 9acb775a0b8..49945de4673 100644
--- a/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx
@@ -7,13 +7,11 @@ import Badge from './Badge.vue';
 
 <Meta title="MDX/Badge" component={Badge} />
 
-export const Template = (args) => ({
-  components: { Badge },
-  setup() {
-    return { args };
-  },
-  template: '<Badge v-bind="args" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story 
@@ -21,24 +19,39 @@ export const Template = (args) => ({
     args={{
       status: 'warning',
       label: 'Warning',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { Badge },
+      setup() {
+        return { args };
+      },
+      template: '<Badge v-bind="args" />',
+    })} />
   <Story 
     name="neutral"
     args={{
       status: 'neutral',
       label: 'Neutral',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { Badge },
+      setup() {
+        return { args };
+      },
+      template: '<Badge v-bind="args" />',
+    })} />
   <Story 
     name="error"
     args={{
       status: 'error',
       label: 'Error',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { Badge },
+      setup() {
+        return { args };
+      },
+      template: '<Badge v-bind="args" />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx b/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx
index 511ad5034d8..e08ee1f538e 100644
--- a/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx
@@ -7,27 +7,37 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'QueryMethods',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
-
-export const ExampleWithRole = Template.bind({});
-ExampleWithRole.play = async () => {
-  // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleWithRole = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+  },
 };
 
-export const ExampleWithText = Template.bind({});
-ExampleWithText.play = async () => {
-  // The play function interacts with the component and looks for the text
-  await screen.findByText('example string');
+export const ExampleWithText = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  play: async () => {
+    // The play function interacts with the component and looks for the text
+    await screen.findByText('example string');
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-alt-queries.mdx.mdx b/docs/snippets/vue/my-component-play-function-alt-queries.mdx.mdx
index e7cfac89bcf..eb46c3de5a7 100644
--- a/docs/snippets/vue/my-component-play-function-alt-queries.mdx.mdx
+++ b/docs/snippets/vue/my-component-play-function-alt-queries.mdx.mdx
@@ -9,26 +9,29 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="QueryMethods" component={MyComponent} />
 
-export const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
-<Story
+<Story 
   name="ExampleWithRole"
-  play={async () => {
-    // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
-  }}>
-  {Template.bind({})}
-</Story>
-
-<Story
-  name="ExampleWithText"
-  play={async () => {
-    // The play function interacts with the component and looks for the text
+  play={ async () => {
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(screen.getByRole('button'));
+  }}
+  render={() => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  })} />
+<Story 
+  name="ExampleWithText" 
+  play={ async () => {
     await screen.findByText('example string');
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-composition.js.mdx b/docs/snippets/vue/my-component-play-function-composition.js.mdx
index 3f98c21f192..f8476bdb8e6 100644
--- a/docs/snippets/vue/my-component-play-function-composition.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-composition.js.mdx
@@ -7,33 +7,48 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
-
-export const FirstStory = Template.bind({});
-FirstStory.play = async () => {
-  userEvent.type(screen.getByTestId('an-element'), 'example-value');
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const FirstStory = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  play: async () => {
+    userEvent.type(screen.getByTestId('an-element'), 'example-value');
+  },
 };
 
-export const SecondStory = Template.bind({});
-SecondStory.play = async () => {
-  await userEvent.type(screen.getByTestId('other-element'), 'another value');
+export const SecondStory = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  play: async () => {
+    await userEvent.type(screen.getByTestId('other-element'), 'another value');
+  },
 };
 
-export const CombinedStories = Template.bind({});
-CombinedStories.play = async () => {
-  // Runs the FirstStory and Second story play function before running this story's play function
-  await FirstStory.play();
-  await SecondStory.play();
-  await userEvent.type(screen.getByTestId('another-element'), 'random value');
+export const CombinedStories = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  play: async () => {
+    // Runs the FirstStory and Second story play function before running this story's play function
+    await FirstStory.play();
+    await SecondStory.play();
+    await userEvent.type(screen.getByTestId('another-element'), 'random value');
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-waitfor.js.mdx b/docs/snippets/vue/my-component-play-function-waitfor.js.mdx
index dcc1bbba244..afe123c71c7 100644
--- a/docs/snippets/vue/my-component-play-function-waitfor.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-waitfor.js.mdx
@@ -7,34 +7,39 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithAsync',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleAsyncStory = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  play: async () => {
+    const exampleElement = screen.getByLabelText('example-element', {
+      selector: 'input',
+    });
 
-export const ExampleAsyncStory = Template.bind({});
-ExampleAsyncStory.play = async () => {
-  const Input = screen.getByLabelText('Username', {
-    selector: 'input',
-  });
+    // The delay option set the ammount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'WrongInput', {
+      delay: 100,
+    });
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = screen.getByRole('button');
+    await userEvent.click(Submit);
 
-  await userEvent.type(Input, 'WrongInput', {
-    delay: 100,
-  });
-
-    // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  const Submit = screen.getByRole('button');
-  await userEvent.click(Submit);
-
-  await waitFor(async () => {
-    await userEvent.hover(screen.getByTestId('error'));
-  });
+    await waitFor(async () => {
+      await userEvent.hover(screen.getByTestId('error'));
+    });
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-waitfor.mdx.mdx b/docs/snippets/vue/my-component-play-function-waitfor.mdx.mdx
index 2767f7a0285..b1622949bd4 100644
--- a/docs/snippets/vue/my-component-play-function-waitfor.mdx.mdx
+++ b/docs/snippets/vue/my-component-play-function-waitfor.mdx.mdx
@@ -9,14 +9,10 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="WithAsync" component={MyComponent} />
 
-export const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
 
 <Story
   name="ExampleAsyncStory"
-  play={async () => {
+  play={ async () => {
     const Input = screen.getByLabelText('Username', {
       selector: 'input',
     });
@@ -25,14 +21,16 @@ export const Template = (args) => ({
       delay: 100,
     });
 
-    // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     const Submit = screen.getByRole('button');
     await userEvent.click(Submit);
 
     await waitFor(async () => {
       await userEvent.hover(screen.getByTestId('error'));
     });
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx b/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx
index af3918404fc..c1ecae5aabf 100644
--- a/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx
@@ -7,25 +7,30 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithCanvasElement',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent/>',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleStory = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  }),
+  play: async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
 
-export const ExampleStory = Template.bind({});
-ExampleStory.play = async ({ canvasElement }) => {
-  /// Assigns canvas to the component root element
-  const canvas = within(canvasElement);
-
-  // Starts querying from the component's root element
-  await userEvent.type(canvas.getByTestId('example-element'), 'something');
-  await userEvent.click(canvas.getByRole('another-element'));
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.type(canvas.getByTestId('another-element'), 'something else');
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-canvas.mdx.mdx b/docs/snippets/vue/my-component-play-function-with-canvas.mdx.mdx
index 4d2c1d9b0bf..75e9c8b2c73 100644
--- a/docs/snippets/vue/my-component-play-function-with-canvas.mdx.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-canvas.mdx.mdx
@@ -9,21 +9,24 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="WithCanvasElement" component={MyComponent} />
 
-export const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent/>',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="ExampleStory"
-  play={async ({ canvasElement }) => {
+  play={ async ({ canvasElement }) => {
     // Assigns canvas to the component root element
     const canvas = within(canvasElement);
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
     await userEvent.click(canvas.getByRole('another-element'));
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx b/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx
index c51f1e86af4..c187bad1f38 100644
--- a/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx
@@ -7,27 +7,37 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ClickExamples',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
-
-export const ClickExample = Template.bind({});
-ClickExample.play = async () => {
-  // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(screen.getByRole('button'));
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ClickExample = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  }),
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(screen.getByRole('button'));
+  },
 };
 
-export const FireEventExample = Template.bind({});
-FireEventExample.play = async () => {
-  // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await fireEvent.click(screen.getByTestId('data-testid'));
+export const FireEventExample = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  }),
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(screen.getByTestId('data-testid'));
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-clickevent.mdx.mdx b/docs/snippets/vue/my-component-play-function-with-clickevent.mdx.mdx
index 15f8de3cb0f..f0139a13bc1 100644
--- a/docs/snippets/vue/my-component-play-function-with-clickevent.mdx.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-clickevent.mdx.mdx
@@ -9,26 +9,31 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="ClickExamples" component={MyComponent} />
 
-export const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent/>',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="ClickExample"
-  play={async () => {
-    // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  play={ async () => {
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await userEvent.click(screen.getByRole('button'));
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={()=>({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  })} />
 
 <Story
   name="FireEventExample"
-  play={async () => {
-    // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  play={ async () => {
+    // See https://storybook.js.org/docs/7.0/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await fireEvent.click(screen.getByTestId('data-testid'));
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={()=>({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-delay.js.mdx b/docs/snippets/vue/my-component-play-function-with-delay.js.mdx
index 2d1c49c9ac7..f653741346e 100644
--- a/docs/snippets/vue/my-component-play-function-with-delay.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-delay.js.mdx
@@ -7,30 +7,35 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithDelay',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const DelayedStory = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  play: async () => {
+    const exampleElement = screen.getByLabelText('example-element');
 
-export const DelayedStory = Template.bind({});
-DelayedStory.play = async () => {
-  const exampleElement= screen.getByLabelText('example-element');
+    // The delay option set the ammount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
 
-  // The delay option set the amount of milliseconds between characters being typed
-  await userEvent.type(exampleElement, 'random string', {
-    delay: 100,
-  });
-
-  const AnotherExampleElement= screen.getByLabelText('another-example-element');
-  await userEvent.type(AnotherExampleElement, 'another random string', {
-     delay: 100,
-  });
+    const AnotherExampleElement = screen.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx
index 162a4e51884..b48c3eb4a72 100644
--- a/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx
@@ -9,14 +9,15 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="WithDelay" component={MyComponent} />
 
-const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="DelayedStory"
-  play={async () => {
+  play={ async () => {
     const exampleElement= screen.getByLabelText('example-element');
 
     // The delay option set the amount of milliseconds between characters being typed
@@ -28,7 +29,9 @@ const Template = (args) => ({
     await userEvent.type(AnotherExampleElement, 'another random string', {
       delay: 100,
     });
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={()=>({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx b/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx
index a72f05e4fed..f62f6b8b205 100644
--- a/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx
@@ -7,12 +7,11 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithSelectEvent',
   component: MyComponent,
- 
 };
 
 // Custom function to emulate a pause
@@ -20,21 +19,26 @@ function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleChangeEvent = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  }),
+  play: async () => {
+    const select = screen.getByRole('listbox');
 
-export const ExampleChangeEvent = Template.bind({});
-ExampleChangeEvent.play = async () => {
-  const select = screen.getByRole('listbox');
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
 
-  await userEvent.selectOptions(select, ['One Item']);
-  await sleep(2000);
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
 
-  await userEvent.selectOptions(select, ['Another Item']);
-  await sleep(2000);
-
-  await userEvent.selectOptions(select, ['Yet another item']);
+    await userEvent.selectOptions(select, ['Yet another item']);
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-selectevent.mdx.mdx b/docs/snippets/vue/my-component-play-function-with-selectevent.mdx.mdx
index 60154d1ad9c..edac1d7cd7c 100644
--- a/docs/snippets/vue/my-component-play-function-with-selectevent.mdx.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-selectevent.mdx.mdx
@@ -15,10 +15,11 @@ export const sleep= (ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
 
-export const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story 
   name="ExampleChangeEvent"
@@ -33,7 +34,9 @@ export const Template = (args) => ({
 
     await userEvent.selectOptions(select, ['Yet another item']);
 
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={()=>({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-basic-and-props.js.mdx b/docs/snippets/vue/my-component-story-basic-and-props.js.mdx
index 0f0d9b9ac2d..0ae747854f0 100644
--- a/docs/snippets/vue/my-component-story-basic-and-props.js.mdx
+++ b/docs/snippets/vue/my-component-story-basic-and-props.js.mdx
@@ -5,20 +5,24 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Path/To/MyComponent',
   component: MyComponent,
 };
 
-export const Basic = () => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
+export const Basic = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+};
 
-export const WithProp = () => ({
-  components: { MyComponent },
+export const WithProp = {
+  render: () => ({
+    components: { MyComponent },
     template: '<MyComponent prop="value"/>',
-});
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-configure-viewports.js.mdx b/docs/snippets/vue/my-component-story-configure-viewports.js.mdx
index c356aaf70e3..4d5538c3552 100644
--- a/docs/snippets/vue/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/vue/my-component-story-configure-viewports.js.mdx
@@ -7,9 +7,9 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
   parameters: {
@@ -24,13 +24,20 @@ export default {
   },
 };
 
-export const MyStory = () => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
-MyStory.parameters = {
-  viewport: {
-    defaultViewport: 'iphonex'
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const MyStory = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphonex',
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx b/docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx
index 9dbf1c2c759..b87b7c293fd 100644
--- a/docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx
+++ b/docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx
@@ -18,17 +18,21 @@ import MyComponent from './MyComponent.vue';
   component={MyComponent}
 />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
 <Story
   name="MyStory"
   parameters={{
     viewport: {
       defaultViewport: 'iphonex',
     }
-  }}>
-  {() => {
-    return {
-      template: `<MyComponent />`,
-    };
   }}
-</Story>
+  render={()=>({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-use-globaltype.js.mdx b/docs/snippets/vue/my-component-story-use-globaltype.js.mdx
index c40b18ea44b..d7dc941bfac 100644
--- a/docs/snippets/vue/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/vue/my-component-story-use-globaltype.js.mdx
@@ -5,9 +5,9 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 };
@@ -27,10 +27,17 @@ const getCaptionForLocale = (locale) => {
   }
 };
 
-export const StoryWithLocale = (args, { globals: { locale } }) => {
-  const caption = getCaptionForLocale(locale);
-  return {
-    template: `<p>${caption}</p>`,
-  };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const StoryWithLocale = {
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return {
+      template: `<p>${caption}</p>`,
+    };
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx
index 6f6f74945f6..8397ad8f2c2 100644
--- a/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx
+++ b/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx
@@ -18,12 +18,18 @@ export const getCaptionForLocale = (locale) => {
   }
 };
 
-<Story name="StoryWithLocale">
-  {(args, { globals: { locale } }) => {
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
+<Story 
+  name="StoryWithLocale"
+  render={(args, { globals: { locale } }) => {
     const caption = getCaptionForLocale(locale);
     return {
       template: `<p>${caption}</p>`,
     };
-  }}
-</Story>
+  }} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx b/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx
index 4627965fe1a..1c756ffc770 100644
--- a/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx
+++ b/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx
@@ -7,10 +7,10 @@ import someData from './data.json';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'MyComponent', 
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
   component: MyComponent,
   includeStories: ['SimpleStory', 'ComplexStory'],
   excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
@@ -19,21 +19,30 @@ export default {
 export const simpleData = { foo: 1, bar: 'baz' };
 export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
 
-
-const Template = (args, { argTypes }) => ({
-  components: { MyComponent },
-  props: Object.keys(argTypes),
-  template: `<MyComponent v-bind="$props"/>`,
-});
-
-
-export const SimpleStory = Template.bind({});
-SimpleStory,args = {
-  data: simpleData,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const SimpleStory = {
+  render: (args, { argTypes }) => ({
+    components: { MyComponent },
+    props: Object.keys(argTypes),
+    template: `<MyComponent v-bind="$props"/>`,
+  }),
+  args: {
+    data: simpleData,
+  },
 };
 
-export const ComplexStory = Template.bind({});
-ComplexStory,args = {
-  data: complexData,
+export const ComplexStory = {
+  render: (args, { argTypes }) => ({
+    components: { MyComponent },
+    props: Object.keys(argTypes),
+    template: `<MyComponent v-bind="$props"/>`,
+  }),
+  args: {
+    data: complexData,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-with-nonstory.3.js.mdx b/docs/snippets/vue/my-component-story-with-nonstory.3.js.mdx
index 25ea9cf96b3..539600f2ee9 100644
--- a/docs/snippets/vue/my-component-story-with-nonstory.3.js.mdx
+++ b/docs/snippets/vue/my-component-story-with-nonstory.3.js.mdx
@@ -7,10 +7,10 @@ import someData from './data.json';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'MyComponent', 
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
   component: MyComponent,
   includeStories: ['SimpleStory', 'ComplexStory'],
   excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
@@ -19,21 +19,34 @@ export default {
 export const simpleData = { foo: 1, bar: 'baz' };
 export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
 
-const Template = (args) => ({
-  components: { MyComponent },
-  setup() {
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const SimpleStory = {
+  render: (args) => ({
+    components: { MyComponent },
+    setup() {
+      return { args };
+    },
+    template: `<MyComponent v-bind="args"/>`,
+  }),
+  args: {
+    data: simpleData,
   },
-  template: `<MyComponent v-bind="args"/>`,
-});
-
-export const SimpleStory = Template.bind({});
-SimpleStory.args = {
-  data: simpleData,
 };
 
-export const ComplexStory = Template.bind({});
-ComplexStory.args = {
-  data: complexData,
+export const ComplexStory = {
+  render: (args) => ({
+    components: { MyComponent },
+    setup() {
+      return { args };
+    },
+    template: `<MyComponent v-bind="args"/>`,
+  }),
+  args: {
+    data: complexData,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-with-env-variables.2.js.mdx b/docs/snippets/vue/my-component-with-env-variables.2.js.mdx
index e52e2a3bf63..8186f3f7ee3 100644
--- a/docs/snippets/vue/my-component-with-env-variables.2.js.mdx
+++ b/docs/snippets/vue/my-component-with-env-variables.2.js.mdx
@@ -5,21 +5,26 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 };
 
-const Template = (args, { argTypes }) => ({
-  components: { MyComponent },
-  props: Object.keys(argTypes),
-  template: '<MyComponent v-bind="$props"/>',
-});
-
-export const ExampleStory = Template.bind({});
-ExampleStory.args = {
-  propertyA: process.env.STORYBOOK_DATA_KEY,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleStory = {
+  render: (args, { argTypes }) => ({
+    components: { MyComponent },
+    props: Object.keys(argTypes),
+    template: `<MyComponent v-bind="$props"/>`,
+  }),
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-with-env-variables.3.js.mdx b/docs/snippets/vue/my-component-with-env-variables.3.js.mdx
index e910c0d8e44..85f983d25af 100644
--- a/docs/snippets/vue/my-component-with-env-variables.3.js.mdx
+++ b/docs/snippets/vue/my-component-with-env-variables.3.js.mdx
@@ -5,23 +5,28 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  components: { MyComponent },
-  setup() {
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleStory = {
+  render: (args) => ({
+    components: { MyComponent },
+    setup() {
+      return { args };
+    },
+    template: `<MyComponent v-bind="args"/>`,
+  }),
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
   },
-  template: '<MyComponent v-bind="args"/>',
-});
-
-export const ExampleStory = Template.bind({});
-ExampleStory.args = {
-  propertyA: process.env.STORYBOOK_DATA_KEY,
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-with-env-variables.mdx-2.mdx.mdx b/docs/snippets/vue/my-component-with-env-variables.mdx-2.mdx.mdx
index e0521529431..b86d8d38b61 100644
--- a/docs/snippets/vue/my-component-with-env-variables.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/my-component-with-env-variables.mdx-2.mdx.mdx
@@ -7,19 +7,22 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="MyComponent" component={MyComponent}/>
 
-export const Template = (args, { argTypes }) => ({
-  components: { MyComponent },
-  props: Object.keys(argTypes),
-  template: '<MyComponent v-bind="$props"/>',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story
     name="ExampleStory"
     args={{
       propertyA: process.env.STORYBOOK_DATA_KEY,
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      components: { MyComponent },
+      props: Object.keys(argTypes),
+      template: '<MyComponent v-bind="$props"/>',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-with-env-variables.mdx-3.mdx.mdx b/docs/snippets/vue/my-component-with-env-variables.mdx-3.mdx.mdx
index 0f3c843518d..90a94417873 100644
--- a/docs/snippets/vue/my-component-with-env-variables.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/my-component-with-env-variables.mdx-3.mdx.mdx
@@ -7,21 +7,24 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="MyComponent" component={MyComponent}/>
 
-export const Template = (args) => ({
-  components: { MyComponent },
-  setup() {
-    return { args };
-  },
-  template: '<MyComponent v-bind="args" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story
     name="ExampleStory"
     args={{
       propertyA: process.env.STORYBOOK_DATA_KEY,
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { MyComponent },
+      setup() {
+        return { args };
+      },
+      template: '<MyComponent v-bind="args" />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story-slots.2.js.mdx b/docs/snippets/vue/page-story-slots.2.js.mdx
index ff119043c28..bea8a0bc471 100644
--- a/docs/snippets/vue/page-story-slots.2.js.mdx
+++ b/docs/snippets/vue/page-story-slots.2.js.mdx
@@ -5,27 +5,32 @@ import Page from './Page.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Page',
   component: Page,
 };
 
-const Template = (args, { argTypes }) => ({
-  components: { Page },
-  props: Object.keys(argTypes),
-  template: `
-    <page v-bind="$props">
-      <template v-slot:footer>
-        <footer v-if="footer" v-html="footer"/>
-      </template>
-    </page>
-  `,
-});
-
-export const CustomFooter= Template.bind({});
-CustomFooter.args = {
-  footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const CustomFooter = {
+  render: (args, { argTypes }) => ({
+    components: { Page },
+    props: Object.keys(argTypes),
+    template: `
+      <page v-bind="$props">
+        <template v-slot:footer>
+          <footer v-if="footer" v-html="footer"/>
+        </template>
+      </page>
+    `,
+  }),
+  args: {
+    footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story-slots.3.js.mdx b/docs/snippets/vue/page-story-slots.3.js.mdx
index cf8b6b6106a..42c640d6d78 100644
--- a/docs/snippets/vue/page-story-slots.3.js.mdx
+++ b/docs/snippets/vue/page-story-slots.3.js.mdx
@@ -5,29 +5,34 @@ import Page from './Page.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Page',
   component: Page,
 };
 
-const Template = (args) => ({
-  components: { Page },
-  setup() {
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const CustomFooter = {
+  render: (args) => ({
+    components: { Page },
+    setup() {
+      return { args };
+    },
+    template: `
+      <page v-bind="args">
+        <template v-slot:footer>
+          <footer v-if="args.footer" v-html="args.footer" />
+        </template>
+      </page>
+    `,
+  }),
+  args: {
+    footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
   },
-  template: `
-    <page v-bind="args">
-      <template v-slot:footer>
-        <footer v-if="args.footer" v-html="args.footer" />
-      </template>
-    </page>
-  `,
-});
-
-export const CustomFooter = Template.bind({});
-CustomFooter.args = {
-  footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx b/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx
index b6ce77d8a2f..20150162787 100644
--- a/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx
@@ -7,23 +7,26 @@ import Page from './Page.vue';
 
 <Meta title="Page" component={Page} />
 
-export const Template = (args, { argTypes }) => ({
-  components: { Page },
-  props: Object.keys(argTypes),
-  template: `
-    <page v-bind="$props">
-      <template v-slot:footer>
-        <footer v-if="footer" v-html="footer"/>
-      </template>
-    </page>
-  `,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="CustomFooter"
   args={{
-   footer: `<a href="https://storybook.js.org/">Built with Storybook</a>`,
-  }}>
-  {Template.bind({})}
-</Story>
+    footer: `<a href="https://storybook.js.org/">Built with Storybook</a>`,
+  }}
+  render={(args, { argTypes }) => ({
+    components: { Page },
+    props: Object.keys(argTypes),
+    template: `
+      <page v-bind="$props">
+        <template v-slot:footer>
+          <footer v-if="footer" v-html="footer"/>
+        </template>
+      </page>
+    `,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story-slots.mdx-3.mdx.mdx b/docs/snippets/vue/page-story-slots.mdx-3.mdx.mdx
index 3567c4b8a6e..dc304d091cd 100644
--- a/docs/snippets/vue/page-story-slots.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/page-story-slots.mdx-3.mdx.mdx
@@ -7,25 +7,28 @@ import Page from './Page.vue';
 
 <Meta title="Page" component={Page} />
 
-export const Template = (args) => ({
-  components: { Page },
-  setup() {
-    return { args };
-  },
-  template: `
-    <page v-bind="args">
-      <template v-slot:footer>
-        <footer v-if="args.footer" v-html="args.footer" />
-      </template>
-    </page>
-  `,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="CustomFooter"
   args={{
    footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    components: { Page },
+    setup() {
+      return { args };
+    },
+    template: `
+      <page v-bind="args">
+        <template v-slot:footer>
+          <footer v-if="args.footer" v-html="args.footer" />
+        </template>
+      </page>
+    `,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story-with-args-composition.2.js.mdx b/docs/snippets/vue/page-story-with-args-composition.2.js.mdx
index 09039298547..3a3b6c22a70 100644
--- a/docs/snippets/vue/page-story-with-args-composition.2.js.mdx
+++ b/docs/snippets/vue/page-story-with-args-composition.2.js.mdx
@@ -10,23 +10,28 @@ import * as DocumentListStories from './DocumentList.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { DocumentScreen },
-  template: '<DocumentScreen v-bind="$props"/>',
-});
-
-export const Simple = Template.bind({});
-Simple.args = {
-  user: PageLayoutStories.Simple.args.user,
-  document: DocumentHeaderStories.Simple.args.document,
-  subdocuments: DocumentListStories.Simple.args.documents,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Simple = {
+  render: (args, { argTypes }) => ({
+    components: { DocumentScreen },
+    props: Object.keys(argTypes),
+    template: '<DocumentScreen v-bind="$props" />',
+  }),
+  args: {
+    user: PageLayoutStories.Simple.args.user,
+    document: DocumentHeaderStories.Simple.args.document,
+    subdocuments: DocumentListStories.Simple.args.documents,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story-with-args-composition.3.js.mdx b/docs/snippets/vue/page-story-with-args-composition.3.js.mdx
index bd47190804e..d247267a912 100644
--- a/docs/snippets/vue/page-story-with-args-composition.3.js.mdx
+++ b/docs/snippets/vue/page-story-with-args-composition.3.js.mdx
@@ -10,25 +10,30 @@ import * as DocumentListStories from './DocumentList.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
 };
 
-const Template = (args) => ({
-  components: { DocumentScreen },
-  setup() {
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Simple = {
+  render: (args) => ({
+    components: { DocumentScreen },
+    setup() {
+      return { args };
+    },
+    template: '<DocumentScreen v-bind="args" />',
+  }),
+  args: {
+    user: PageLayoutStories.Simple.args.user,
+    document: DocumentHeaderStories.Simple.args.document,
+    subdocuments: DocumentListStories.Simple.args.documents,
   },
-  template: '<DocumentScreen v-bind="args"/>',
-});
-
-export const Simple = Template.bind({});
-Simple.args = {
-  user: PageLayoutStories.Simple.args.user,
-  document: DocumentHeaderStories.Simple.args.document,
-  subdocuments: DocumentListStories.Simple.args.documents,
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story.2.js.mdx b/docs/snippets/vue/page-story.2.js.mdx
index 59f260eed46..04352638586 100644
--- a/docs/snippets/vue/page-story.2.js.mdx
+++ b/docs/snippets/vue/page-story.2.js.mdx
@@ -8,22 +8,26 @@ import * as HeaderStories from './Header.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Page',
   component: Page,
 };
 
-
-const Template = (args, { argTypes }) => ({
-  components: { Page },
-  props: Object.keys(argTypes),
-  template: '<page v-bind="$props" />',
-});
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  ...HeaderStories.LoggedIn.args,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const LoggedIn = {
+  render: (args, { argTypes }) => ({
+    components: { Page },
+    props: Object.keys(argTypes),
+    template: '<page v-bind="$props" />',
+  }),
+  args: {
+    ...HeaderStories.LoggedIn.args,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story.3.js.mdx b/docs/snippets/vue/page-story.3.js.mdx
index 30b6cb0cb5b..07368d3cbad 100644
--- a/docs/snippets/vue/page-story.3.js.mdx
+++ b/docs/snippets/vue/page-story.3.js.mdx
@@ -8,23 +8,28 @@ import * as HeaderStories from './Header.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Page',
   component: Page,
 };
 
-const Template = (args) => ({
-  components: { Page },
-  setup() {
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const LoggedIn = {
+  render: (args) => ({
+    components: { Page },
+    setup() {
+      return { args };
+    },
+    template: '<page v-bind="args" />',
+  }),
+  args: {
+    ...HeaderStories.LoggedIn.args,
   },
-  template: '<page v-bind="args" />',
-});
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  ...HeaderStories.LoggedIn.args,
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/register-component-with-play-function.js.mdx b/docs/snippets/vue/register-component-with-play-function.js.mdx
index c898c389ff0..9dc018d2ad5 100644
--- a/docs/snippets/vue/register-component-with-play-function.js.mdx
+++ b/docs/snippets/vue/register-component-with-play-function.js.mdx
@@ -7,28 +7,32 @@ import RegistrationForm from './RegistrationForm.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'RegistrationForm',
   component: RegistrationForm,
 };
 
-const Template = (args) => ({
-  components: { RegistrationForm },
-  template: '<RegistrationForm />',
-});
-
-export const FilledForm = Template.bind({});
-FilledForm.play = async () => {
-  const emailInput = screen.getByLabelText('email', {
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const FilledForm = {
+  render: () => ({
+    components: { RegistrationForm },
+    template: '<RegistrationForm />',
+  }),
+  play: async () => {
+    const emailInput = screen.getByLabelText('email', {
       selector: 'input',
     });
 
     await userEvent.type(emailInput, 'example-email@email.com', {
       delay: 100,
     });
-    
+
     const passwordInput = screen.getByLabelText('password', {
       selector: 'input',
     });
@@ -36,9 +40,11 @@ FilledForm.play = async () => {
     await userEvent.type(passwordInput, 'ExamplePassword', {
       delay: 100,
     });
-    
-    // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const Submit = screen.getByRole('button');
-    await userEvent.click(Submit);
+
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = screen.getByRole('button');
+
+    await userEvent.click(submitButton);
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/register-component-with-play-function.mdx.mdx b/docs/snippets/vue/register-component-with-play-function.mdx.mdx
index f85c8b1afa8..d133cc0e8fb 100644
--- a/docs/snippets/vue/register-component-with-play-function.mdx.mdx
+++ b/docs/snippets/vue/register-component-with-play-function.mdx.mdx
@@ -9,14 +9,15 @@ import RegistrationForm from './RegistrationForm.vue';
 
 <Meta title="RegistrationForm" component={RegistrationForm} />
 
-export const Template = (args) => ({
-  components: { RegistrationForm },
-  template: '<RegistrationForm />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="FilledForm"
-  play={async () => {
+  play={ async () => {
     const emailInput = screen.getByLabelText('email', {
       selector: 'input',
     });
@@ -33,10 +34,12 @@ export const Template = (args) => ({
       delay: 100,
     });
     
-    // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     const Submit = screen.getByRole('button');
     await userEvent.click(Submit);
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({
+    components: { RegistrationForm },
+    template: '<RegistrationForm />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx b/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx
index 7be7ee2c227..0fde60b1557 100644
--- a/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx
+++ b/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx
@@ -5,23 +5,28 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Disable a11y addon',
   component: MyComponent,
 };
 
-const Template = () => ({
-  components: { MyComponent },
-  template: '<MyComponent/>',
-});
-
-export const NonA11yStory = Template.bind({});
-NonA11yStory.parameters = {
-  a11y: {
-    // This option disables all a11y checks on this story
-    disable: true,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const NonA11yStory = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  }),
+  parameters: {
+    a11y: {
+      // This option disables all a11y checks on this story
+      disable: true,
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx
index 9e9addbb4ac..76609c6f842 100644
--- a/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx
+++ b/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx
@@ -5,38 +5,43 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Configure a11y addon',
   component: MyComponent,
 };
 
-const Template = () => ({
-  components: { MyComponent },
-  template: '<MyComponent/>',
-});
-
-export const ExampleStory = Template.bind({});
-ExampleStory.parameters = {
-  a11y: {
-    element: '#root',
-    config: {
-      rules: [
-        {
-          // The autocomplete rule will not run based on the CSS selector provided
-          id: 'autocomplete-valid',
-          selector: '*:not([autocomplete="nope"])',
-        },
-        {
-          // Setting the enabled option to false will disable checks for this particular rule on all stories.
-          id: 'image-alt',
-          enabled: false,
-        },
-      ],
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleStory = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  }),
+  parameters: {
+    a11y: {
+      element: '#root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+      manual: true,
     },
-    options: {},
-    manual: true,
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx
index e76f552f1d4..e41bc980656 100644
--- a/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx
+++ b/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx
@@ -9,10 +9,11 @@ import MyComponent from './MyComponent.vue';
   title="Configure a11y addon" 
   component={MyComponent} />
 
-export const Template = () => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="ExampleStory"
@@ -36,7 +37,9 @@ export const Template = () => ({
       options: {},
       manual: true,
     },
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx b/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx
index ade9b4a326c..b15cca26de0 100644
--- a/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx
+++ b/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx
@@ -5,34 +5,40 @@ import Table from './Table.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Custom Table',
   component: Table,
 };
 
-const TableStory = (args, { argTypes }) => ({
-  components: { Table },
-  props: Object.keys(argTypes),
-  template: `
-    <Table v-bind="$props">
-      <tr v-for="(row, idx1) in data">
-        <td v-for="(col, idx2) in row">
-          {{ data[idx1][idx2] }}
-        </td>
-      </tr>
-    </Table>`,
-});
-
-export const Numeric = TableStory.bind({});
-Numeric.args = {
-  //👇 This arg is for the story component
-  data: [
-    [1, 2, 3],
-    [4, 5, 6],
-  ],
-  //👇 The remaining args get passed to the `Table` component
-  size: 'large',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const TableStory = {
+  render: (args, { argTypes }) => ({
+    components: { Table },
+    props: Object.keys(argTypes),
+    template: `
+      <Table v-bind="$props">
+        <tr v-for="(row, idx1) in data">
+          <td v-for="(col, idx2) in row">
+            {{ data[idx1][idx2] }}
+          </td>
+        </tr>
+    </Table>
+    `,
+  }),
+  args: {
+    //👇 This arg is for the story component
+    data: [
+      [1, 2, 3],
+      [4, 5, 6],
+    ],
+    //👇 The remaining args get passed to the `Table` component
+    size: 'large',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx b/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx
index 0623762a7da..c80f5663c16 100644
--- a/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx
+++ b/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx
@@ -5,37 +5,42 @@ import Table from './Table.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Custom Table',
   component: Table,
 };
 
-const TableStory = (args) => ({
-  components: { Table },
-  setup() {
-    return { args };
-  },
-  template: `
-    <Table v-bind="args">
-      <tr v-for="(row, idx1) in data">
-        <td v-for="(col, idx2) in row">
-          {{ data[idx1][idx2] }}
-        </td>
-      </tr>
-    </Table>
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const TableStory = {
+  render: (args) => ({
+    components: { Table },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Table v-bind="args">
+        <tr v-for="(row, idx1) in data">
+          <td v-for="(col, idx2) in row">
+            {{ data[idx1][idx2] }}
+          </td>
+        </tr>
+      </Table>
   `,
-});
-
-export const Numeric = TableStory.bind({});
-Numeric.args = {
-  //👇 This arg is for the story component
-  data: [
-    [1, 2, 3],
-    [4, 5, 6],
-  ],
-  //👇 The remaining args get passed to the `Table` component
-  size: 'large',
+  }),
+  args: {
+    //👇 This arg is for the story component
+    data: [
+      [1, 2, 3],
+      [4, 5, 6],
+    ],
+    //👇 The remaining args get passed to the `Table` component
+    size: 'large',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx b/docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx
index ed39b60e5e4..fc432b4e13a 100644
--- a/docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx
@@ -7,18 +7,11 @@ import Table from './Table.vue';
 
 <Meta title="Custom Table" component={Table} />
 
-export const TableStory = (args, { argTypes }) => ({
-  components: { Table },
-  props: Object.keys(argTypes),
-  template: `
-    <Table v-bind="$props">
-      <tr v-for="(row, idx1) in data">
-        <td v-for="(col, idx2) in row">
-          {{ data[idx1][idx2] }}
-        </td>
-      </tr>
-    </Table>`,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="Numeric"
@@ -28,7 +21,17 @@ export const TableStory = (args, { argTypes }) => ({
       [4, 5, 6],
     ],
     size: 'large',
-  }}>
-  {TableStory.bind({})}
-</Story>
+  }}
+  render={(args, { argTypes }) =>({
+    components: { Table },
+    props: Object.keys(argTypes),
+    template: `
+      <Table v-bind="$props">
+        <tr v-for="(row, idx1) in data">
+          <td v-for="(col, idx2) in row">
+            {{ data[idx1][idx2] }}
+          </td>
+        </tr>
+      </Table>`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx b/docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx
index dacb1979565..c5176464e49 100644
--- a/docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx
@@ -7,20 +7,11 @@ import Table from './Table.vue';
 
 <Meta title="Custom Table" component={Table} />
 
-export const TableStory = (args) => ({
-  components: { Table },
-  setup() {
-    return { args };
-  },
-  template: `
-    <Table v-bind="args">
-      <tr v-for="(row, idx1) in data">
-        <td v-for="(col, idx2) in row">
-          {{ data[idx1][idx2] }}
-        </td>
-      </tr>
-    </Table>`,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="Numeric"
@@ -30,7 +21,19 @@ export const TableStory = (args) => ({
       [4, 5, 6],
     ],
     size: 'large',
-  }}>
-  {TableStory.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    components: { Table },
+    setup() {
+      return { args };
+    },
+    template: `
+    <Table v-bind="args">
+      <tr v-for="(row, idx1) in data">
+        <td v-for="(col, idx2) in row">
+          {{ data[idx1][idx2] }}
+        </td>
+      </tr>
+    </Table>`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/your-component-with-decorator.js.mdx b/docs/snippets/vue/your-component-with-decorator.js.mdx
index 15f560e26f4..d6bd32c0d68 100644
--- a/docs/snippets/vue/your-component-with-decorator.js.mdx
+++ b/docs/snippets/vue/your-component-with-decorator.js.mdx
@@ -5,7 +5,7 @@ import YourComponent from './YourComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'YourComponent',
diff --git a/docs/snippets/vue/your-component.2.js.mdx b/docs/snippets/vue/your-component.2.js.mdx
index 4e31094af48..faf3cd115f9 100644
--- a/docs/snippets/vue/your-component.2.js.mdx
+++ b/docs/snippets/vue/your-component.2.js.mdx
@@ -6,22 +6,26 @@ import YourComponent from './YourComponent.vue';
 //👇 This default export determines where your story goes in the story list
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args, { argTypes }) => ({
-  components: { YourComponent },
-  props: Object.keys(argTypes),
-  template: '<YourComponent v-bind="$props"/>',
-});
-
-export const FirstStory = Template.bind({});
-FirstStory.args = {
-  //👇 The args you need here will depend on your component
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const FirstStory = {
+  render: (args, { argTypes }) => ({
+    components: { YourComponent },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" />',
+  }),
+  args: {
+    //👇 The args you need here will depend on your component
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/your-component.3.js.mdx b/docs/snippets/vue/your-component.3.js.mdx
index 9acd73d1c78..02dfb7653b4 100644
--- a/docs/snippets/vue/your-component.3.js.mdx
+++ b/docs/snippets/vue/your-component.3.js.mdx
@@ -6,26 +6,28 @@ import YourComponent from './YourComponent.vue';
 //👇 This default export determines where your story goes in the story list
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => ({
-  components: { YourComponent },
-  setup() {
-    //👇 The args will now be passed down to the template
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const FirstStory = {
+  render: (args) => ({
+    components: { YourComponent },
+    setup() {
+      return { args };
+    },
+    template: '<YourComponent v-bind="args" />',
+  }),
+  args: {
+    //👇 The args you need here will depend on your component
   },
-  template: '<YourComponent v-bind="args"/>',
-});
-
-export const FirstStory = Template.bind({});
-
-FirstStory.args = {
-  /* 👇 The args you need here will depend on your component */
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/your-component.mdx-2.mdx.mdx b/docs/snippets/vue/your-component.mdx-2.mdx.mdx
index 8250437df8f..e2f2af44bb5 100644
--- a/docs/snippets/vue/your-component.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/your-component.mdx-2.mdx.mdx
@@ -8,17 +8,14 @@ import YourComponent from './YourComponent.vue';
 <!--👇 The title prop determines where your story goes in the story list -->
 <Meta title="YourComponent" component={YourComponent} />
 
-<!--👇 We create a “template” of how args map to rendering -->
-export const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { YourComponent },
-  template: `<YourComponent v-bind="$props" />`,
-});
 
 <!-- 👇 The args you need here will depend on your component -->
 <Story
   name="FirstStory"
-  args={{}}>
-  {Template.bind({})}
-</Story>
+  args={{}}
+  render={(args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { YourComponent },
+    template: `<YourComponent v-bind="$props" />`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/your-component.mdx-3.mdx.mdx b/docs/snippets/vue/your-component.mdx-3.mdx.mdx
index f5c6d9d6f78..40643976fa1 100644
--- a/docs/snippets/vue/your-component.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/your-component.mdx-3.mdx.mdx
@@ -8,19 +8,15 @@ import YourComponent from './YourComponent.vue';
 <!--👇 The title prop determines where your story goes in the story list -->
 <Meta title="YourComponent" component={YourComponent} />
 
-<!--👇 We create a “template” of how args map to rendering -->
-export const Template = (args) => ({
-  components: { YourComponent },
-  setup() {
-    return { args };
-  },
-  template: `<YourComponent v-bind="args" />`,
-});
-
 <!-- 👇 The args you need here will depend on your component -->
 <Story
   name="FirstStory"
-  args={{}}>
-  {Template.bind({})}
-</Story>
+  args={{}}
+  render={(args) => ({
+    components: { YourComponent },
+    setup() {
+      return { args };
+    },
+    template: `<YourComponent v-bind="args" />`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index 380d3f800c7..fb59e4cdfe8 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -97,8 +97,7 @@ You can rename any particular story you need. For instance, to give it a more ac
     'react/button-story-rename-story.js.mdx',
     'react/button-story-rename-story.ts.mdx',
     'vue/button-story-rename-story.js.mdx',
-    'vue/button-story-rename-story.ts-2.ts.mdx',
-    'vue/button-story-rename-story.ts-3.ts.mdx',
+    'vue/button-story-rename-story.ts.mdx',
     'angular/button-story-rename-story.ts.mdx',
     'svelte/button-story-rename-story.js.mdx',
     'web-components/button-story-rename-story.js.mdx',