diff --git a/examples/vue-kitchen-sink/src/stories/SimpleKnobExample.vue b/examples/vue-kitchen-sink/src/stories/SimpleKnobExample.vue
new file mode 100644
index 00000000000..1f0b9897089
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/SimpleKnobExample.vue
@@ -0,0 +1,23 @@
+<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 cf8a0a7d74e..2240c341865 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -12,15 +12,20 @@ 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);
-    const content = `I am ${name} and I'm ${age} years old.`;
 
     return {
-      template: `<div>${content}</div>`,
+      components: { SimpleKnobExample },
+      template: '<simple-knob-example :name="name" :age="age" />',
+      data() {
+        return { name, age };
+      },
     };
   })
   .add('All knobs', () => {