docs[alert]: update alert docs (#493)

website/docs/en-US/alert.md

@@ -87,13 +87,17 @@ Customize the close button as texts or other symbols.
 </template>
 
 <script>
-  export default {
+  import { defineComponent } from 'vue'
-    methods: {
+  export default defineComponent({
-      hello() {
+    setup() {
+      const hello = () => {
         alert('Hello World!');
       }
+      return {
+        hello
+      }
     }
-  }
+  })
 </script>
 ```
 :::

website/docs/es/alert.md

@@ -88,13 +88,17 @@ Personalizar el botón de cerrar como texto u otros símbolos.
 </template>
 
 <script>
-  export default {
+  import { defineComponent } from 'vue'
-    methods: {
+  export default defineComponent({
-      hello() {
+    setup() {
+      const hello = () => {
         alert('Hello World!');
       }
+      return {
+        hello
+      }
     }
-  }
+  })
 </script>
 ```
 :::

website/docs/fr-FR/alert.md

@@ -87,13 +87,17 @@ Personnalisez le bouton de fermeture avec du texte ou des symboles.
 </template>
 
 <script>
-  export default {
+  import { defineComponent } from 'vue'
-    methods: {
+  export default defineComponent({
-      hello() {
+    setup() {
+      const hello = () => {
         alert('Hello World!');
       }
+      return {
+        hello
+      }
     }
-  }
+  })
 </script>
 ```
 :::

website/docs/zh-CN/alert.md

@@ -87,13 +87,17 @@ Alert 组件提供了两个不同的主题：`light`和`dark`。
 </template>
 
 <script>
-  export default {
+  import { defineComponent } from 'vue'
-    methods: {
+  export default defineComponent({
-      hello() {
+    setup() {
+      const hello = () => {
         alert('Hello World!');
       }
+      return {
+        hello
+      }
     }
-  }
+  })
 </script>
 ```
 :::