fixes for the list and table examples

docs/snippets/vue/button-story-click-handler-args.vue3.js.mdx

@@ -6,12 +6,12 @@ export const Text = (args) => ({
   setup() {
     return {
       label: args.label,
+      onClick: action('clicked'),
     };
   },
   template: '<Button @onClick="onClick" :label="label" />',
 });
 Text.args = {
   label: 'Hello',
-  onClick: action('clicked'),
 };
-```
+```

docs/snippets/vue/list-story-template.vue2.js.mdx

@@ -12,8 +12,8 @@ const ListTemplate = (args, { argTypes }) => ({
   components: { List, ListItem },
   template: `
     <List v-bind="$props">
-        <div v-for="item in items" :key="item.someString">
-            <ListItem v-bind="$props"/>
+        <div v-for="item in items" :key="item.title">
+            <ListItem :item="item" />
         </div>
     </List>
     `,

docs/snippets/vue/list-story-template.vue3.js.mdx

@@ -14,15 +14,15 @@ const ListTemplate = (args) => ({
   },
   template: `
     <List v-bind="args">
-        <div v-for="item in items" :key="item.someString">
-            <ListItem v-bind="args"/>
-        </div>
+      <div v-for="item in items" :key="item.title">
+        <ListItem :item="item"/>
+      </div>
     </List>
     `,
 });
 
 export const Empty = ListTemplate.bind({});
-EmptyListTemplate.args = {
+Empty.args = {
   items: [],
 };
 

docs/snippets/vue/table-story-fully-customize-controls.vue2.js.mdx

@@ -5,12 +5,13 @@ const TableStory = (args, { argTypes }) => ({
   components: { Table },
   props: Object.keys(argTypes),
   template: `
-    <tr v-for="(row, idx1) in data">
+    <Table v-bind="$props">
+      <tr v-for="(row, idx1) in data">
         <td v-for="(col, idx2) in row">
-            {{ data[idx1][idx2] }}
+          {{ data[idx1][idx2] }}
         </td>
-    </tr>
-  `,
+      </tr>
+    </Table>`,
 });
 
 export const Numeric = TableStory.bind({});

docs/snippets/vue/table-story-fully-customize-controls.vue3.js.mdx

@@ -7,11 +7,13 @@ const TableStory = (args) => ({
     return { args };
   },
   template: `
-    <tr v-for="(row, idx1) in data">
+    <Table v-bind="args">
+      <tr v-for="(row, idx1) in data">
         <td v-for="(col, idx2) in row">
             {{ data[idx1][idx2] }}
         </td>
-    </tr>
+      </tr>
+    </Table>
   `,
 });