docs: update

Author: AngusFu

README.md

@@ -20,13 +20,18 @@ npm i -D vue-container-query
 
 ```html
 <template>
-  <container-query :query="query" v-model="params">
+  <container-query
+    :query="query"
+    v-model="params"
+    @change="handleChange"
+  >
     <pre class="app">{{ params }}</pre>
   </container-query>
 </template>
 
 <script>
 import { ContainerQuery } from './'
+
 const query = {
   'width-between-400-and-599': {
     minWidth: 400,
@@ -38,10 +43,12 @@ const query = {
 }
 
 export default {
-  name: 'app',
   components: { ContainerQuery },
   data () {
     return { query, params: {} }
+  },
+  methods: {
+    handleChange () {}
   }
 }
 </script>
@@ -71,6 +78,7 @@ export default {
 
 <script>
 import { createContainerQueryMixin } from './'
+
 const query = {
   'width-between-400-and-599': {
     minWidth: 400,
@@ -82,13 +90,9 @@ const query = {
 }
 
 export default {
-  name: 'app',
   mixins: [
     createContainerQueryMixin(query)
-  ],
-  data () {
-    return { query, params: {} }
-  }
+  ]
 }
 </script>
 ```

src/App.vue

@@ -6,6 +6,7 @@
 
 <script>
 import { ContainerQuery } from './'
+
 const query = {
   'width-between-400-and-599': {
     minWidth: 400,

src/AppMixin.vue

@@ -4,6 +4,7 @@
 
 <script>
 import { createContainerQueryMixin } from './'
+
 const query = {
   'width-between-400-and-599': {
     minWidth: 400,
@@ -18,9 +19,6 @@ export default {
   name: 'app2',
   mixins: [
     createContainerQueryMixin(query)
-  ],
-  data () {
-    return { query, params: {} }
-  }
+  ]
 }
 </script>