Addon-controls: Update vue-cli example

examples/vue-cli/.storybook/main.js

@@ -1,5 +1,10 @@
 module.exports = {
   stories: ['../src/**/*.stories.@(ts|js|mdx)'],
   logLevel: 'debug',
-  addons: ['@storybook/addon-docs', '@storybook/addon-storysource', '@storybook/preset-scss'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-controls',
+    '@storybook/addon-storysource',
+    '@storybook/preset-scss',
+  ],
 };

examples/vue-cli/package.json

@@ -15,6 +15,7 @@
     "vue-property-decorator": "^8.4.1"
   },
   "devDependencies": {
+    "@storybook/addon-controls": "6.0.0-beta.32",
     "@storybook/addon-essentials": "6.0.0-beta.32",
     "@storybook/preset-scss": "^1.0.2",
     "@storybook/source-loader": "6.0.0-beta.32",

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

@@ -4,15 +4,16 @@ import { ButtonSizes } from './types';
 export default {
   title: 'Button',
   component: Button,
+  argTypes: {
+    size: { control: { type: 'select', options: ButtonSizes } },
+  },
 };
 
 export const ButtonWithProps = (args: any) => ({
   components: { Button },
   template: '<Button :size="size">Button text</Button>',
-  data() {
-    return args;
-  },
+  props: Object.keys(args),
 });
-ButtonWithProps.argTypes = {
-  size: { control: { type: 'select', options: ButtonSizes } },
+ButtonWithProps.args = {
+  size: 'big',
 };