diff --git a/website/docs/en-US/alert.md b/website/docs/en-US/alert.md
index 3db4f3284c..4d9d56e175 100644
--- a/website/docs/en-US/alert.md
+++ b/website/docs/en-US/alert.md
@@ -87,13 +87,17 @@ Customize the close button as texts or other symbols.
 </template>
 
 <script>
-  export default {
-    methods: {
-      hello() {
+  import { defineComponent } from 'vue'
+  export default defineComponent({
+    setup() {
+      const hello = () => {
         alert('Hello World!');
       }
+      return {
+        hello
+      }
     }
-  }
+  })
 </script>
 ```
 :::
diff --git a/website/docs/es/alert.md b/website/docs/es/alert.md
index 6ab0fa51d2..67d0462ae6 100644
--- a/website/docs/es/alert.md
+++ b/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 {
-    methods: {
-      hello() {
+  import { defineComponent } from 'vue'
+  export default defineComponent({
+    setup() {
+      const hello = () => {
         alert('Hello World!');
       }
+      return {
+        hello
+      }
     }
-  }
+  })
 </script>
 ```
 :::
diff --git a/website/docs/fr-FR/alert.md b/website/docs/fr-FR/alert.md
index aab56d1a27..742fc77e73 100644
--- a/website/docs/fr-FR/alert.md
+++ b/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 {
-    methods: {
-      hello() {
+  import { defineComponent } from 'vue'
+  export default defineComponent({
+    setup() {
+      const hello = () => {
         alert('Hello World!');
       }
+      return {
+        hello
+      }
     }
-  }
+  })
 </script>
 ```
 :::
diff --git a/website/docs/zh-CN/alert.md b/website/docs/zh-CN/alert.md
index 7f84a0f16f..53439ba59d 100644
--- a/website/docs/zh-CN/alert.md
+++ b/website/docs/zh-CN/alert.md
@@ -87,13 +87,17 @@ Alert 组件提供了两个不同的主题：`light`和`dark`。
 </template>
 
 <script>
-  export default {
-    methods: {
-      hello() {
+  import { defineComponent } from 'vue'
+  export default defineComponent({
+    setup() {
+      const hello = () => {
         alert('Hello World!');
       }
+      return {
+        hello
+      }
     }
-  }
+  })
 </script>
 ```
 :::