updated docs

Author: dipaksarkar

docs/src/components/ComponentBased.vue

@@ -1,14 +1,17 @@
 <template>
   <div class="component-based">
     <div class="title">Component</div>
-    <VueNumber v-bind="config" v-model="price" />
+    <VueNumber @input="onInput" @change="onChange" @blur="onBlur" v-bind="config" v-model="price" />
     <div>Price: {{ price }}</div>
     <div>Calculated: {{ calculated }}</div>
   </div>
 </template>
 
 <script>
+import { InputMixin } from '../mixins'
+
 export default {
+  mixins:[InputMixin],
   data() {
     return {
       price: 123456.86,

docs/src/components/DirectiveBased.vue

@@ -1,14 +1,17 @@
 <template>
   <div class="directive-based">
     <div class="title">Directive</div>
-    <input v-number="config" v-model="price" />
+    <input @input="onInput" @change="onChange" @blur="onBlur" v-number="config" v-model="price" />
     <div>Price: {{ price }}</div>
     <div>Calculated: {{ calculated }}</div>
   </div>
 </template>
 
 <script>
+import { InputMixin } from '../mixins'
+
 export default {
+  mixins:[InputMixin],
   data() {
     return {
       price: 123456.86,

docs/src/mixins/index.js

@@ -0,0 +1,13 @@
+export const InputMixin = {
+  methods: {
+    onChange() {
+      console.log('onChange', arguments)
+    },
+    onInput() {
+      console.log('onInput', arguments)
+    },
+    onBlur() {
+      console.log('onBlur', arguments)
+    }
+  }
+}