From 0ab99ea939a66170966d78741ef18a24409b760e Mon Sep 17 00:00:00 2001
From: Julien Barbay <barbay.julien@gmail.com>
Date: Wed, 14 Nov 2018 19:17:12 +0900
Subject: [PATCH] defining typical use-case

---
 .../src/stories/SimpleKnobExample.vue         | 23 -------------
 .../src/stories/addon-knobs.stories.js        | 33 +++++++++++--------
 2 files changed, 20 insertions(+), 36 deletions(-)
 delete mode 100644 examples/vue-kitchen-sink/src/stories/SimpleKnobExample.vue

diff --git a/examples/vue-kitchen-sink/src/stories/SimpleKnobExample.vue b/examples/vue-kitchen-sink/src/stories/SimpleKnobExample.vue
deleted file mode 100644
index 1f0b9897089..00000000000
--- a/examples/vue-kitchen-sink/src/stories/SimpleKnobExample.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div @click="i++">I am {{ name }} and I'm {{ age }} years old. Inner State Counter {{ i }}</div>
-</template>
-
-<script>
-  export default {
-    props: {
-      name: String,
-      age: Number,
-    },
-    data() {
-      return {
-        i: 40,
-      };
-    },
-    created() {
-      console.log('created');
-    },
-    destroyed() {
-      console.log('destroyed');
-    },
-  }
-</script>
\ No newline at end of file
diff --git a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
index 2240c341865..869d756804f 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -12,22 +12,29 @@ import {
   button,
 } from '@storybook/addon-knobs';
 
-import SimpleKnobExample from './SimpleKnobExample.vue';
-
 storiesOf('Addon|Knobs', module)
   .addDecorator(withKnobs)
-  .add('Simple', () => {
-    const name = text('Name', 'John Doe');
-    const age = number('Age', 44);
-
-    return {
-      components: { SimpleKnobExample },
-      template: '<simple-knob-example :name="name" :age="age" />',
-      data() {
-        return { name, age };
+  .add('Simple', () => ({
+    props: {
+      name: {
+        type: String,
+        default: text('Name', 'John Doe'),
       },
-    };
-  })
+    },
+
+    template: `<div @click="age++">I am {{ name }} and I'm {{ age }} years old.</div>`,
+
+    data() {
+      return { age: 40 };
+    },
+
+    created() {
+      console.log('created');
+    },
+    destroyed() {
+      console.log('destroyed');
+    },
+  }))
   .add('All knobs', () => {
     const name = text('Name', 'Jane');
     const stock = number('Stock', 20, {