docs(badge): use composition api (#972)

src/badge/demos/enUS/basic.demo.md

@@ -24,17 +24,18 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
 import { MdAdd, MdRemove } from '@vicons/ionicons4'
 
-export default {
+export default defineComponent({
   components: {
     MdAdd,
     MdRemove
   },
-  data () {
+  setup () {
     return {
-      value: 5
+      value: ref(5)
     }
   }
-}
+})
 ```

src/badge/demos/enUS/index.demo-entry.md

@@ -12,6 +12,7 @@ show-zero
 overflow
 manual
 custom-content
+color
 raw
 ```
 

src/badge/demos/enUS/manual.demo.md

@@ -25,18 +25,19 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
 import { MdAdd, MdRemove } from '@vicons/ionicons4'
 
-export default {
+export default defineComponent({
   components: {
     MdAdd,
     MdRemove
   },
-  data () {
+  setup () {
     return {
-      value: 5,
-      show: true
+      value: ref(5),
+      show: ref(true)
     }
   }
-}
+})
 ```

src/badge/demos/enUS/overflow.demo.md

@@ -32,17 +32,18 @@ Set `max` prop to handle overflow situation.
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
 import { MdAdd, MdRemove } from '@vicons/ionicons4'
 
-export default {
+export default defineComponent({
   components: {
     MdAdd,
     MdRemove
   },
-  data () {
+  setup () {
     return {
-      value: 101
+      value: ref(101)
     }
   }
-}
+})
 ```

src/badge/demos/enUS/raw.demo.md

@@ -20,17 +20,18 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
 import { MdAdd, MdRemove } from '@vicons/ionicons4'
 
-export default {
+export default defineComponent({
   components: {
     MdAdd,
     MdRemove
   },
-  data () {
+  setup () {
     return {
-      value: 5
+      value: ref(5)
     }
   }
-}
+})
 ```

src/badge/demos/enUS/show-zero.demo.md

@@ -26,17 +26,18 @@ Set `show-zero` prop to display zero.
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
 import { MdAdd, MdRemove } from '@vicons/ionicons4'
 
-export default {
+export default defineComponent({
   components: {
     MdAdd,
     MdRemove
   },
-  data () {
+  setup () {
     return {
-      value: 0
+      value: ref(0)
     }
   }
-}
+})
 ```

src/badge/demos/enUS/type.demo.md

@@ -21,13 +21,3 @@ Badge has `default`, `error`, `info`, `success`, `warning` types.
   </n-badge>
 </n-space>
 ```
-
-```js
-export default {
-  data () {
-    return {
-      value: 10
-    }
-  }
-}
-```

src/badge/demos/zhCN/basic.demo.md

@@ -24,17 +24,18 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
 import { MdAdd, MdRemove } from '@vicons/ionicons4'
 
-export default {
+export default defineComponent({
   components: {
     MdAdd,
     MdRemove
   },
-  data () {
+  setup () {
     return {
-      value: 5
+      value: ref(5)
     }
   }
-}
+})
 ```

src/badge/demos/zhCN/manual.demo.md

@@ -25,18 +25,19 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
 import { MdAdd, MdRemove } from '@vicons/ionicons4'
 
-export default {
+export default defineComponent({
   components: {
     MdAdd,
     MdRemove
   },
-  data () {
+  setup () {
     return {
-      value: 5,
-      show: true
+      value: ref(5),
+      show: ref(true)
     }
   }
-}
+})
 ```

src/badge/demos/zhCN/overflow.demo.md

@@ -32,17 +32,18 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
 import { MdAdd, MdRemove } from '@vicons/ionicons4'
 
-export default {
+export default defineComponent({
   components: {
     MdAdd,
     MdRemove
   },
-  data () {
+  setup () {
     return {
-      value: 101
+      value: ref(101)
     }
   }
-}
+})
 ```

src/badge/demos/zhCN/raw.demo.md

@@ -20,17 +20,18 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
 import { MdAdd, MdRemove } from '@vicons/ionicons4'
 
-export default {
+export default defineComponent({
   components: {
     MdAdd,
     MdRemove
   },
-  data () {
+  setup () {
     return {
-      value: 5
+      value: ref(5)
     }
   }
-}
+})
 ```

src/badge/demos/zhCN/show-zero.demo.md

@@ -26,17 +26,18 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
 import { MdAdd, MdRemove } from '@vicons/ionicons4'
 
-export default {
+export default defineComponent({
   components: {
     MdAdd,
     MdRemove
   },
-  data () {
+  setup () {
     return {
-      value: 0
+      value: ref(0)
     }
   }
-}
+})
 ```

src/badge/demos/zhCN/type.demo.md

@@ -21,13 +21,3 @@
   </n-badge>
 </n-space>
 ```
-
-```js
-export default {
-  data () {
-    return {
-      value: 10
-    }
-  }
-}
-```