diff --git a/docs/snippets/vue/list-story-with-sub-components.js.mdx b/docs/snippets/vue/list-story-with-sub-components.js.mdx
index 0c6e082e6a92..a19b58f3b3d1 100644
--- a/docs/snippets/vue/list-story-with-sub-components.js.mdx
+++ b/docs/snippets/vue/list-story-with-sub-components.js.mdx
@@ -16,9 +16,12 @@ export const Empty = {
 };
 
 export const OneItem = {
-  render: () => ({
+  render: (args) => ({
     components: { List, ListItem },
-    template: '<List><ListItem /></List>',
+    setup() {
+      return { args }
+    }
+    template: '<List v-bind="args"><ListItem /></List>',
   }),
 };
 ```
diff --git a/docs/snippets/vue/list-story-with-sub-components.ts-4-9.mdx b/docs/snippets/vue/list-story-with-sub-components.ts-4-9.mdx
index 7d9c073bfa83..6e99a25445df 100644
--- a/docs/snippets/vue/list-story-with-sub-components.ts-4-9.mdx
+++ b/docs/snippets/vue/list-story-with-sub-components.ts-4-9.mdx
@@ -21,9 +21,12 @@ export const Empty: Story = {
 };
 
 export const OneItem: Story = {
-  render: () => ({
+  render: (args) => ({
     components: { List, ListItem },
-    template: '<List><ListItem /></List>',
+    setup() {
+      return { args }
+    }
+    template: '<List v-bind="args"><ListItem /></List>',
   }),
 };
 ```
diff --git a/docs/snippets/vue/list-story-with-sub-components.ts.mdx b/docs/snippets/vue/list-story-with-sub-components.ts.mdx
index b299d5350314..87ae30aed24a 100644
--- a/docs/snippets/vue/list-story-with-sub-components.ts.mdx
+++ b/docs/snippets/vue/list-story-with-sub-components.ts.mdx
@@ -21,9 +21,12 @@ export const Empty: Story = {
 };
 
 export const OneItem: Story = {
-  render: () => ({
+  render: (args) => ({
     components: { List, ListItem },
-    template: '<List><ListItem /></List>',
+    setup() {
+      return { args }
+    }
+    template: '<List v-bind="args"><ListItem /></List>',
   }),
 };
 ```