diff --git a/docs/fr/guide/essentials/a-crash-course.md b/docs/fr/guide/essentials/a-crash-course.md
index eca8f208a..f6a96207f 100644
--- a/docs/fr/guide/essentials/a-crash-course.md
+++ b/docs/fr/guide/essentials/a-crash-course.md
@@ -16,22 +16,16 @@ Commençons par un simple composant TodoApp avec une seule tâche :
   <div></div>
 </template>
 
-<script>
-export default {
-  name: 'TodoApp',
-
-  data() {
-    return {
-      todos: [
-        {
-          id: 1,
-          text: 'Apprendre Vue.js 3',
-          completed: false,
-        },
-      ],
-    };
-  },
-};
+<script setup>
+import { ref } from 'vue'
+
+const todos = ref([
+  {
+    id: 1,
+    text: 'Apprendre Vue.js 3',
+    completed: false
+  }
+])
 </script>
 ```
 
@@ -116,33 +110,25 @@ Si nous exécutons ce test, il échouera. Modifions `TodoApp.vue` pour avoir les
   </div>
 </template>
 
-<script>
-export default {
-  name: 'TodoApp',
-
-  data() {
-    return {
-      newTodo: '',
-      todos: [
-        {
-          id: 1,
-          text: 'Apprendre Vue.js 3',
-          completed: false,
-        },
-      ],
-    };
-  },
-
-  methods: {
-    createTodo() {
-      this.todos.push({
-        id: 2,
-        text: this.newTodo,
-        completed: false,
-      });
-    },
-  },
-};
+<script setup>
+import { ref } from 'vue'
+
+const newTodo = ref(''),
+const todos = ref([
+  {
+    id: 1,
+    text: 'Apprendre Vue.js 3',
+    completed: false
+  }
+])
+
+const createTodo = () => {
+  todos.value.push({
+    id: 2,
+    text: newTodo.value,
+    completed: false
+  })
+}
 </script>
 ```
 
diff --git a/docs/guide/essentials/a-crash-course.md b/docs/guide/essentials/a-crash-course.md
index fb9d68679..471e67387 100644
--- a/docs/guide/essentials/a-crash-course.md
+++ b/docs/guide/essentials/a-crash-course.md
@@ -17,22 +17,16 @@ We will start off with a simple `TodoApp` component with a single todo:
   <div></div>
 </template>
 
-<script>
-export default {
-  name: 'TodoApp',
-
-  data() {
-    return {
-      todos: [
-        {
-          id: 1,
-          text: 'Learn Vue.js 3',
-          completed: false
-        }
-      ]
-    }
+<script setup>
+import { ref } from 'vue'
+
+const todos = ref([
+  {
+    id: 1,
+    text: 'Learn Vue.js 3',
+    completed: false
   }
-}
+])
 </script>
 ```
 
@@ -117,32 +111,24 @@ If we run this test, it will obviously fail. Let's update `TodoApp.vue` to have
   </div>
 </template>
 
-<script>
-export default {
-  name: 'TodoApp',
-
-  data() {
-    return {
-      newTodo: '',
-      todos: [
-        {
-          id: 1,
-          text: 'Learn Vue.js 3',
-          completed: false
-        }
-      ]
-    }
-  },
-
-  methods: {
-    createTodo() {
-      this.todos.push({
-        id: 2,
-        text: this.newTodo,
-        completed: false
-      })
-    }
+<script setup>
+import { ref } from 'vue'
+
+const newTodo = ref(''),
+const todos = ref([
+  {
+    id: 1,
+    text: 'Learn Vue.js 3',
+    completed: false
   }
+])
+
+const createTodo = () => {
+  todos.value.push({
+    id: 2,
+    text: newTodo.value,
+    completed: false
+  })
 }
 </script>
 ```
diff --git a/docs/zh/guide/essentials/a-crash-course.md b/docs/zh/guide/essentials/a-crash-course.md
index 0af8fb3ec..cc6d1a9ed 100644
--- a/docs/zh/guide/essentials/a-crash-course.md
+++ b/docs/zh/guide/essentials/a-crash-course.md
@@ -16,22 +16,16 @@
   <div></div>
 </template>
 
-<script>
-export default {
-  name: 'TodoApp',
-
-  data() {
-    return {
-      todos: [
-        {
-          id: 1,
-          text: 'Learn Vue.js 3',
-          completed: false
-        }
-      ]
-    }
+<script setup>
+import { ref } from 'vue'
+
+const todos = ref([
+  {
+    id: 1,
+    text: 'Learn Vue.js 3',
+    completed: false
   }
-}
+])
 </script>
 ```
 
@@ -116,32 +110,24 @@ test('creates a todo', () => {
   </div>
 </template>
 
-<script>
-export default {
-  name: 'TodoApp',
-
-  data() {
-    return {
-      newTodo: '',
-      todos: [
-        {
-          id: 1,
-          text: 'Learn Vue.js 3',
-          completed: false
-        }
-      ]
-    }
-  },
-
-  methods: {
-    createTodo() {
-      this.todos.push({
-        id: 2,
-        text: this.newTodo,
-        completed: false
-      })
-    }
+<script setup>
+import { ref } from 'vue'
+
+const newTodo = ref(''),
+const todos = ref([
+  {
+    id: 1,
+    text: 'Learn Vue.js 3',
+    completed: false
   }
+])
+
+const createTodo = () => {
+  todos.value.push({
+    id: 2,
+    text: newTodo.value,
+    completed: false
+  })
 }
 </script>
 ```