diff --git a/docs/fr/guide/essentials/a-crash-course.md b/docs/fr/guide/essentials/a-crash-course.md
index f6a96207f..57e7684e4 100644
--- a/docs/fr/guide/essentials/a-crash-course.md
+++ b/docs/fr/guide/essentials/a-crash-course.md
@@ -113,7 +113,7 @@ Si nous exécutons ce test, il échouera. Modifions `TodoApp.vue` pour avoir les
 <script setup>
 import { ref } from 'vue'
 
-const newTodo = ref(''),
+const newTodo = ref('')
 const todos = ref([
   {
     id: 1,
diff --git a/docs/fr/guide/essentials/conditional-rendering.md b/docs/fr/guide/essentials/conditional-rendering.md
index f901f011c..5b7411c77 100644
--- a/docs/fr/guide/essentials/conditional-rendering.md
+++ b/docs/fr/guide/essentials/conditional-rendering.md
@@ -8,20 +8,20 @@ Cet article est également disponible sous la forme d'une [courte vidéo](https:
 
 L'une des fonctionnalités les plus basiques de Vue est la capacité d'insérer et de supprimer dynamiquement des éléments avec `v-if`. Voyons comment tester un composant qui utilise `v-if`.
 
-```js
-const Nav = {
-  template: `
-    <nav>
-      <a id="profile" href="/profile">Mon Profil</a>
-      <a v-if="admin" id="admin" href="/admin">Administration</a>
-    </nav>
-  `,
-  data() {
-    return {
-      admin: false,
-    };
-  },
-};
+```vue
+<!-- Nav.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const admin = ref(false)
+</script>
+
+<template>
+  <nav>
+    <a id="profile" href="/profile">Mon Profil</a>
+    <a v-if="admin" id="admin" href="/admin">Administration</a>
+  </nav>
+</template>
 ```
 
 Dans le composant `<Nav>`, un lien vers le profil de l'utilisateur est affiché. De plus, si la valeur `admin` est à `true`, nous affichons un lien vers la section administrateur. Il y a trois scénarios dont le comportement doit être vérifié&nbsp;:
@@ -99,22 +99,22 @@ Parfois, vous ne voulez que masquer/afficher un élément tout en le conservant
 
 Voici à quoi ressemble un composant avec `v-show`&nbsp;:
 
-```js
-const Nav = {
-  template: `
-    <nav>
-      <a id="user" href="/profile">Mon Profil</a>
-      <ul v-show="shouldShowDropdown" id="user-dropdown">
-        <!-- dropdown content -->
-      </ul>
-    </nav>
-  `,
-  data() {
-    return {
-      shouldShowDropdown: false,
-    };
-  },
-};
+```vue
+<!-- Nav.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const shouldShowDropdown = ref(false)
+<script>
+
+<template>
+  <nav>
+    <a id="user" href="/profile">Mon Profil</a>
+    <ul v-show="shouldShowDropdown" id="user-dropdown">
+      <!-- dropdown content -->
+    </ul>
+  </nav>
+</template>
 ```
 
 Dans ce scénario, l'élément n'est pas visible, mais toujours rendu dans le DOM. `get()` ou `find()` retournera toujours un `Wrapper` - `find()` avec `.exists()` retournera toujours `true` - car **l'élément est toujours dans le DOM**.
diff --git a/docs/fr/guide/essentials/easy-to-test.md b/docs/fr/guide/essentials/easy-to-test.md
index a13e7adc2..d4cd2bd0f 100644
--- a/docs/fr/guide/essentials/easy-to-test.md
+++ b/docs/fr/guide/essentials/easy-to-test.md
@@ -31,23 +31,21 @@ La règle de base est qu'**un test ne devrait pas échouer lors d'une refonte de
 Par exemple, supposons qu'il existe un composant de compteur de base qui comporte un bouton pour incrémenter un compteur&nbsp;:
 
 ```vue
+<!-- Counter.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+
+const increment = () => {
+  count.value++
+}
+</script>
+
 <template>
   <p class="paragraph">Nombre de clicks: {{ count }}</p>
   <button @click="increment">Incrémenter</button>
 </template>
-
-<script>
-export default {
-  data() {
-    return { count: 0 };
-  },
-  methods: {
-    increment() {
-      this.count++;
-    },
-  },
-};
-</script>
 ```
 
 Nous pourrions écrire le test suivant&nbsp;:
diff --git a/docs/fr/guide/essentials/event-handling.md b/docs/fr/guide/essentials/event-handling.md
index e58f5633e..311520bc1 100644
--- a/docs/fr/guide/essentials/event-handling.md
+++ b/docs/fr/guide/essentials/event-handling.md
@@ -8,21 +8,24 @@ Cet article est également disponible dans cette [courte video](https://www.yout
 
 Voici un composant simple `<Counter>`. Il possède un bouton qui, lorsqu'il est cliqué, incrémente une variable et émet sa valeur.
 
-```js
-const Counter = {
-  template: '<button @click="handleClick">Incrémenter</button>',
-  data() {
-    return {
-      count: 0,
-    };
-  },
-  methods: {
-    handleClick() {
-      this.count += 1;
-      this.$emit('increment', this.count);
-    },
-  },
-};
+```vue
+<!-- Counter.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+
+const emit = defineEmits(['increment'])
+
+const handleClick = () => {
+  count.value += 1
+  emit('increment', count.value)
+}
+</script>
+
+<template>
+  <button @click="handleClick">Incrémenter</button>
+</template>
 ```
 
 Pour tester complètement ce composant, nous devrions vérifier qu'un événement `increment` avec la dernière valeur de `count` est émis.
@@ -90,25 +93,27 @@ Récapitulons et détaillons le retour de la fonction `emmitted()`. Chaque clé
 
 Imaginons maintenant que notre composant `<Counter>` a besoin d'émettre un objet avec des informations supplémentaires. Par exemple, nous devons informer tout composant parent écoutant l'événement `@increment` si la valeur de `count` est paire ou impaire.
 
-```js {12-15}
-const Counter = {
-  template: `<button @click="handleClick">Incrémenter</button>`,
-  data() {
-    return {
-      count: 0,
-    };
-  },
-  methods: {
-    handleClick() {
-      this.count += 1;
-
-      this.$emit('increment', {
-        count: this.count,
-        isEven: this.count % 2 === 0,
-      });
-    },
-  },
-};
+```vue
+<!-- Counter.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+
+const emit = defineEmits(['increment'])
+
+const handleClick = () => {
+  count.value += 1
+  emit('increment', {
+    count: count.value,
+    isEven: count.value % 2 === 0,
+  })
+}
+</script>
+
+<template>
+  <button @click="handleClick">Incrémenter</button>
+</template>
 ```
 
 Comme nous l'avons fait auparavant, nous devons déclencher l'événement `click` sur l'élément `<button>`. Ensuite, nous utilisons `emitted('increment')` pour nous assurer que les bonnes valeurs sont émises.
@@ -142,10 +147,6 @@ test('émet un évènement avec le compteur quand le boutton est cliqué', () =>
 
 En testant des types complexes tels que des objets, cela ne diffère pas des tests de types primaires tels que des nombres ou des chaînes de caractères.
 
-## API de Composition
-
-Si vous utilisez l'API de Composition, vous devez appeler `context.emit()` à la place de `this.$emit()`. `emitted()` capture les événements de l'un ou l'autre, vous pouvez donc tester votre composant en utilisant les mêmes techniques décrites précédemment.
-
 ## Conclusion
 
 - Utilisez `emitted()` pour accéder aux événements émis par un composant Vue.
diff --git a/docs/fr/guide/essentials/forms.md b/docs/fr/guide/essentials/forms.md
index 2cc2f81c2..f5d6e9b18 100644
--- a/docs/fr/guide/essentials/forms.md
+++ b/docs/fr/guide/essentials/forms.md
@@ -11,6 +11,18 @@ Les méthodes que nous utiliserons le plus seront `setValue()` et `trigger()`.
 Jetons un œil à un formulaire très basique&nbsp;:
 
 ```vue
+<!-- Form.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const email = ref('')
+const emit = defineEmits(['submit'])
+
+const submit = () => {
+  emit('submit', email.value)
+}
+</script>
+
 <template>
   <div>
     <input type="email" v-model="email" />
@@ -18,21 +30,6 @@ Jetons un œil à un formulaire très basique&nbsp;:
     <button @click="submit">Soumettre</button>
   </div>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      email: '',
-    };
-  },
-  methods: {
-    submit() {
-      this.$emit('submit', this.email);
-    },
-  },
-};
-</script>
 ```
 
 ### Définir les valeurs des éléments
@@ -111,6 +108,25 @@ Nous avons vu que `setValue` fonctionne avec les `input` simples, mais est en v
 Examinons un formulaire plus complexe, qui comporte plusieurs types d'`input`.
 
 ```vue
+<!-- FormComponent.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const form = ref({
+  email: '',
+  description: '',
+  city: '',
+  subscribe: false,
+  interval: ''
+})
+const emit = defineEmits(['submit'])
+
+const submit = () => {
+  emit('submit', { ...form.value })
+}
+</script>
+
+
 <template>
   <form @submit.prevent="submit">
     <input type="email" v-model="form.email" />
@@ -130,27 +146,6 @@ Examinons un formulaire plus complexe, qui comporte plusieurs types d'`input`.
     <button type="submit">Soumettre</button>
   </form>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      form: {
-        email: '',
-        description: '',
-        city: '',
-        subscribe: false,
-        interval: '',
-      },
-    };
-  },
-  methods: {
-    async submit() {
-      this.$emit('submit', this.form);
-    },
-  },
-};
-</script>
 ```
 
 Notre composant Vue est un peu plus long, a quelques types d'`input` supplémentaires et maintenant, la gestion de la soumission du formulaire est déplacé vers un élément `<form/>`.
@@ -262,29 +257,26 @@ Vue Test Utils lit l'événement et applique les propriétés appropriées à l'
 Supposons que votre code ait besoin de quelque chose à l'intérieur de l'objet `event`. Vous pouvez tester ce cas en passant des données supplémentaires en tant que deuxième paramètre.
 
 ```vue
+<!-- Form.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const inputValue = ref('')
+const emit = defineEmits(['focus-lost'])
+
+const handleBlur = (event) => {
+  if (event.relatedTarget.tagName === 'BUTTON') {
+    emit('focus-lost')
+  }
+}
+</script>
+
 <template>
   <form>
-    <input type="text" v-model="value" @blur="handleBlur" />
+    <input type="text" v-model="inputValue" @blur="handleBlur" />
     <button>Soumettre</button>
   </form>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      value: '',
-    };
-  },
-  methods: {
-    handleBlur(event) {
-      if (event.relatedTarget.tagName === 'BUTTON') {
-        this.$emit('focus-lost');
-      }
-    },
-  },
-};
-</script>
 ```
 
 ```js
@@ -314,6 +306,11 @@ Le test de formulaires utilisant de tels `input` peut être intimidant au début
 Ci-dessous se trouve un composant qui comprend un `label` et un `input`&nbsp;:
 
 ```vue
+<!-- CustomInput.vue -->
+<script setup>
+defineProps(['modelValue', 'label'])
+</script>
+
 <template>
   <label>
     {{ label }}
@@ -324,14 +321,6 @@ Ci-dessous se trouve un composant qui comprend un `label` et un `input`&nbsp;:
     />
   </label>
 </template>
-
-<script>
-export default {
-  name: 'CustomInput',
-
-  props: ['modelValue', 'label'],
-};
-</script>
 ```
 
 Ce composant Vue émet également ce que vous tapez. Vous pouvez l'utiliser comme ceci&nbsp;:
@@ -361,28 +350,24 @@ Le cas échéant, vous pouvez définir la valeur directement en utilisant l'inst
 Supposons que nous ayons un formulaire qui utilise la `<textarea>` Vuetify&nbsp;:
 
 ```vue
+<!-- CustomTextarea.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const description = ref('')
+const emit = defineEmits(['submitted'])
+
+const handleSubmit = () => {
+  emit('submitted', description.value)
+}
+</script>
+
 <template>
   <form @submit.prevent="handleSubmit">
     <v-textarea v-model="description" ref="description" />
     <button type="submit">Envoyer</button>
   </form>
 </template>
-
-<script>
-export default {
-  name: 'CustomTextarea',
-  data() {
-    return {
-      description: '',
-    };
-  },
-  methods: {
-    handleSubmit() {
-      this.$emit('submitted', this.description);
-    },
-  },
-};
-</script>
 ```
 
 Nous pouvons utiliser `findComponent` pour trouver l'instance du composant et définir sa valeur.
diff --git a/docs/fr/guide/essentials/passing-data.md b/docs/fr/guide/essentials/passing-data.md
index 38f72beb3..27d7b4cd7 100644
--- a/docs/fr/guide/essentials/passing-data.md
+++ b/docs/fr/guide/essentials/passing-data.md
@@ -8,19 +8,18 @@ Dans cette section, nous explorons les options de `mount`&nbsp;: `data` et `prop
 
 Nous allons détailler les fonctionnalités ci-dessus en construisant un composant `<Password>`. Ce composant vérifie si un mot de passe répond à certains critères, tels que la longueur et la complexité. Nous commencerons avec ce qui suit et ajouterons des fonctionnalités, ainsi que des tests pour nous assurer que tout se comportent correctement&nbsp;:
 
-```js
-const Password = {
-  template: `
-    <div>
-      <input v-model="password">
-    </div>
-  `,
-  data() {
-    return {
-      password: ''
-    }
-  }
-}
+```vue
+<!-- Password.vue -->
+<script setup>
+import { ref } from 'vue'
+const password = ref('')
+<script>
+
+<template>
+  <div>
+    <input v-model="password" />
+  </div>
+</template>
 ```
 
 Le premier critère que nous allons mettre en place est une longueur minimale.
@@ -32,31 +31,27 @@ Nous voulons réutiliser ce composant dans tous nos projets, chacun ayant des ex
 Nous allons afficher une erreur si `password` est inférieur à `minLength`. Nous pouvons le faire en créant une `computed` nommée `error` et en la rendant de manière conditionnelle à l'aide de `v-if`&nbsp;:
 
 ```js
-const Password = {
-  template: `
-    <div>
-      <input v-model="password">
-      <div v-if="error">{{ error }}</div>
-    </div>
-  `,
-  props: {
-    minLength: {
-      type: Number
-    }
-  },
-  data() {
-    return {
-      password: ''
-    }
-  },
-  computed: {
-    error() {
-      if (this.password.length < this.minLength) {
-        return `Le mot de passe doit contenir au moins ${this.minLength} caractères.`
-      }
-    }
+<!-- Password.vue -->
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps(['minLength'])
+const password = ref('')
+
+const error = computed(() => {
+  if (password.value.length < props.minLength) {
+    return `Le mot de passe doit contenir au moins ${props.minLength} caractères.`
   }
-}
+  return
+})
+<script>
+
+<template>
+  <div>
+    <input v-model="password" />
+    <div v-if="error">{{ error }}</div>
+  </div>
+</template>
 ```
 
 Pour tester cela, nous devons définir `minLength`, ainsi qu'un `password` inférieur à ce nombre minimal. Nous pouvons le faire en utilisant les options de `mount()`&nbsp;: `data` et `props`. Enfin, nous allons vérifier que le message d'erreur correct est affiché&nbsp;:
@@ -87,25 +82,17 @@ Pour vous entraîner, vous pouvez écrire un test pour une règle de `maxLength`
 Parfois, vous pouvez avoir besoin d'écrire un test pour un effet collatéral lorsqu'une `prop` change. Ce simple composant qui suit, nommé `<Show>`, affiche une salutation si la propriété `show` est à `true`.
 
 ```vue
+<!-- Show.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const { show = true } = defineProps(['show'])
+const greeting = ref('Salut')
+</script>
+
 <template>
   <div v-if="show">{{ greeting }}</div>
 </template>
-
-<script>
-export default {
-  props: {
-    show: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      greeting: 'Salut'
-    }
-  }
-}
-</script>
 ```
 
 Pour tester cela de bout en bout, nous voulons peut-être vérifier que `greeting` est affiché par défaut. Nous sommes aussi en mesure de mettre à jour la propriété `show` à l'aide de `setProps()`, ce qui entraîne la disparition de `greeting`&nbsp;:
diff --git a/docs/guide/essentials/a-crash-course.md b/docs/guide/essentials/a-crash-course.md
index 471e67387..3c9814093 100644
--- a/docs/guide/essentials/a-crash-course.md
+++ b/docs/guide/essentials/a-crash-course.md
@@ -114,7 +114,7 @@ If we run this test, it will obviously fail. Let's update `TodoApp.vue` to have
 <script setup>
 import { ref } from 'vue'
 
-const newTodo = ref(''),
+const newTodo = ref('')
 const todos = ref([
   {
     id: 1,
diff --git a/docs/guide/essentials/conditional-rendering.md b/docs/guide/essentials/conditional-rendering.md
index 5e63a2131..c1a1a0dba 100644
--- a/docs/guide/essentials/conditional-rendering.md
+++ b/docs/guide/essentials/conditional-rendering.md
@@ -8,20 +8,20 @@ This article is also available as a [short video](https://www.youtube.com/watch?
 
 One of the most basic features of Vue is the ability to dynamically insert and remove elements with `v-if`. Let's look at how to test a component that uses `v-if`.
 
-```js
-const Nav = {
-  template: `
-    <nav>
-      <a id="profile" href="/profile">My Profile</a>
-      <a v-if="admin" id="admin" href="/admin">Admin</a>
-    </nav>
-  `,
-  data() {
-    return {
-      admin: false
-    }
-  }
-}
+```vue
+<!-- Nav.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const admin = ref(false)
+</script>
+
+<template>
+  <nav>
+    <a id="profile" href="/profile">My Profile</a>
+    <a v-if="admin" id="admin" href="/admin">Admin</a>
+  </nav>
+</template>
 ```
 
 In the `<Nav>` component, a link to the user's profile is shown. In addition, if the `admin` value is `true`, we reveal a link to the admin section. There are three scenarios which we should verify are behaving correctly:
@@ -101,22 +101,22 @@ Sometimes you only want to hide/show an element while keeping it in the DOM. Vue
 
 This is how a component with `v-show` looks like:
 
-```js
-const Nav = {
-  template: `
-    <nav>
-      <a id="user" href="/profile">My Profile</a>
-      <ul v-show="shouldShowDropdown" id="user-dropdown">
-        <!-- dropdown content -->
-      </ul>
-    </nav>
-  `,
-  data() {
-    return {
-      shouldShowDropdown: false
-    }
-  }
-}
+```vue
+<!-- Nav.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const shouldShowDropdown = ref(false)
+<script>
+
+<template>
+  <nav>
+    <a id="user" href="/profile">My Profile</a>
+    <ul v-show="shouldShowDropdown" id="user-dropdown">
+      <!-- dropdown content -->
+    </ul>
+  </nav>
+</template>
 ```
 
 In this scenario, the element is not visible but always rendered. `get()` or `find()` will always return a `Wrapper` – `find()` with `.exists()` always return `true` – because the **element is still in the DOM**.
diff --git a/docs/guide/essentials/easy-to-test.md b/docs/guide/essentials/easy-to-test.md
index 8deb1fe83..c1b425c2d 100644
--- a/docs/guide/essentials/easy-to-test.md
+++ b/docs/guide/essentials/easy-to-test.md
@@ -31,23 +31,21 @@ The rule of thumb is that **a test should not break on a refactor**, that is, wh
 For example, let's assume a basic Counter component that features a button to increment a counter:
 
 ```vue
+<!-- Counter.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+
+const increment = () => {
+  count.value++
+}
+</script>
+
 <template>
   <p class="paragraph">Times clicked: {{ count }}</p>
   <button @click="increment">increment</button>
 </template>
-
-<script>
-export default {
-  data() {
-    return { count: 0 }
-  },
-  methods: {
-    increment() {
-      this.count++
-    }
-  }
-}
-</script>
 ```
 
 We could write the following test:
diff --git a/docs/guide/essentials/event-handling.md b/docs/guide/essentials/event-handling.md
index cf6955024..46359116b 100644
--- a/docs/guide/essentials/event-handling.md
+++ b/docs/guide/essentials/event-handling.md
@@ -8,21 +8,23 @@ This article is also available as a [short video](https://www.youtube.com/watch?
 
 Here is a simple `<Counter>` component. It features a button that, when clicked, increments an internal count variable and emits its value:
 
-```js
-const Counter = {
-  template: '<button @click="handleClick">Increment</button>',
-  data() {
-    return {
-      count: 0
-    }
-  },
-  methods: {
-    handleClick() {
-      this.count += 1
-      this.$emit('increment', this.count)
-    }
-  }
+```vue
+<!-- Counter.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+const emit = defineEmits(['increment'])
+
+const handleClick = () => {
+  count.value += 1
+  emit('increment', count.value)
 }
+</script>
+
+<template>
+  <button @click="handleClick">Increment</button>
+</template>
 ```
 
 To fully test this component, we should verify that an `increment` event with the latest `count` value is emitted.
@@ -92,25 +94,27 @@ Let's recap and break down the output of `emitted()`. Each of these keys contain
 
 Imagine that now our `<Counter>` component needs to emit an object with additional information. For instance, we need to tell any parent component listening to the `@increment` event if `count` is even or odd:
 
-```js {12-15}
-const Counter = {
-  template: `<button @click="handleClick">Increment</button>`,
-  data() {
-    return {
-      count: 0
-    }
-  },
-  methods: {
-    handleClick() {
-      this.count += 1
-
-      this.$emit('increment', {
-        count: this.count,
-        isEven: this.count % 2 === 0
-      })
-    }
-  }
+```vue
+<!-- Counter.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+
+const emit = defineEmits(['increment'])
+
+const handleClick = () => {
+  count.value += 1
+  emit('increment', {
+    count: count.value,
+    isEven: count.value % 2 === 0,
+  })
 }
+</script>
+
+<template>
+  <button @click="handleClick">Increment</button>
+</template>
 ```
 
 As we did before, we need to trigger the `click` event on the `<button>` element. Then, we use `emitted('increment')` to make sure the right values are emitted.
@@ -146,10 +150,6 @@ test('emits an event with count when clicked', () => {
 
 Testing complex event payloads such as Objects is no different from testing simple values such as numbers or strings.
 
-## Composition API
-
-If you are using the Composition API, you will be calling `context.emit()` instead of `this.$emit()`. `emitted()` captures events from both, so you can test your component using the same techniques described here.
-
 ## Conclusion
 
 - Use `emitted()` to access the events emitted from a Vue component.
diff --git a/docs/guide/essentials/forms.md b/docs/guide/essentials/forms.md
index b745692dd..bbb21f2e5 100644
--- a/docs/guide/essentials/forms.md
+++ b/docs/guide/essentials/forms.md
@@ -10,6 +10,18 @@ The methods we will be using the most are `setValue()` and `trigger()`.
 Let's take a look at a very basic form:
 
 ```vue
+<!-- Form.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const email = ref('')
+const emit = defineEmits(['submit'])
+
+const submit = () => {
+  emit('submit', email.value)
+}
+</script>
+
 <template>
   <div>
     <input type="email" v-model="email" />
@@ -17,21 +29,6 @@ Let's take a look at a very basic form:
     <button @click="submit">Submit</button>
   </div>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      email: ''
-    }
-  },
-  methods: {
-    submit() {
-      this.$emit('submit', this.email)
-    }
-  }
-}
-</script>
 ```
 
 ### Setting element values
@@ -43,7 +40,7 @@ To change the value of an input in VTU, you can use the `setValue()` method. It
 
 ```js
 test('sets the value', async () => {
-  const wrapper = mount(Component)
+  const wrapper = mount(Form)
   const input = wrapper.find('input')
 
   await input.setValue('my@mail.com')
@@ -68,7 +65,7 @@ To trigger a click event, we can use the `trigger` method.
 
 ```js
 test('trigger', async () => {
-  const wrapper = mount(Component)
+  const wrapper = mount(Form)
 
   // trigger the element
   await wrapper.find('button').trigger('click')
@@ -88,7 +85,7 @@ Let's combine these two to test whether our simple form is emitting the user inp
 
 ```js
 test('emits the input to its parent', async () => {
-  const wrapper = mount(Component)
+  const wrapper = mount(Form)
 
   // set the value
   await wrapper.find('input').setValue('my@mail.com')
@@ -112,6 +109,25 @@ We saw `setValue` works with input elements, but is much more versatile, as it c
 Let's take a look at a more complicated form, which has more types of inputs.
 
 ```vue
+<!-- FormComponent.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const form = ref({
+  email: '',
+  description: '',
+  city: '',
+  subscribe: false,
+  interval: ''
+})
+const emit = defineEmits(['submit'])
+
+const submit = () => {
+  emit('submit', { ...form.value })
+}
+</script>
+
+
 <template>
   <form @submit.prevent="submit">
     <input type="email" v-model="form.email" />
@@ -131,27 +147,6 @@ Let's take a look at a more complicated form, which has more types of inputs.
     <button type="submit">Submit</button>
   </form>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      form: {
-        email: '',
-        description: '',
-        city: '',
-        subscribe: false,
-        interval: ''
-      }
-    }
-  },
-  methods: {
-    async submit() {
-      this.$emit('submit', this.form)
-    }
-  }
-}
-</script>
 ```
 
 Our extended Vue component is a bit longer, has a few more input types and now has the `submit` handler moved to a `<form/>` element.
@@ -264,29 +259,26 @@ Vue Test Utils reads the event and applies the appropriate properties to the eve
 Let's say your code needs something from inside the `event` object. You can test such scenarios by passing extra data as a second parameter.
 
 ```vue
+<!-- Form.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const inputValue = ref('')
+const emit = defineEmits(['focus-lost'])
+
+const handleBlur = (event) => {
+  if (event.relatedTarget.tagName === 'BUTTON') {
+    emit('focus-lost')
+  }
+}
+</script>
+
 <template>
   <form>
-    <input type="text" v-model="value" @blur="handleBlur" />
+    <input type="text" v-model="inputValue" @blur="handleBlur" />
     <button>Submit</button>
   </form>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      value: ''
-    }
-  },
-  methods: {
-    handleBlur(event) {
-      if (event.relatedTarget.tagName === 'BUTTON') {
-        this.$emit('focus-lost')
-      }
-    }
-  }
-}
-</script>
 ```
 
 ```js
@@ -316,6 +308,11 @@ Testing forms that use such inputs can be daunting at first, but with a few simp
 Following is a Component that wraps a `label` and an `input` element:
 
 ```vue
+<!-- CustomInput.vue -->
+<script setup>
+defineProps(['modelValue', 'label'])
+</script>
+
 <template>
   <label>
     {{ label }}
@@ -326,14 +323,6 @@ Following is a Component that wraps a `label` and an `input` element:
     />
   </label>
 </template>
-
-<script>
-export default {
-  name: 'CustomInput',
-
-  props: ['modelValue', 'label']
-}
-</script>
 ```
 
 This Vue component also emits back whatever you type. To use it you do:
@@ -363,28 +352,24 @@ In such cases you can set the value directly, using the component instance and `
 Assume we have a form that uses the Vuetify textarea:
 
 ```vue
+<!-- CustomTextarea.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const description = ref('')
+const emit = defineEmits(['submitted'])
+
+const handleSubmit = () => {
+  emit('submitted', description.value)
+}
+</script>
+
 <template>
   <form @submit.prevent="handleSubmit">
     <v-textarea v-model="description" ref="description" />
     <button type="submit">Send</button>
   </form>
 </template>
-
-<script>
-export default {
-  name: 'CustomTextarea',
-  data() {
-    return {
-      description: ''
-    }
-  },
-  methods: {
-    handleSubmit() {
-      this.$emit('submitted', this.description)
-    }
-  }
-}
-</script>
 ```
 
 We can use `findComponent` to find the component instance, and then set its value.
diff --git a/docs/guide/essentials/passing-data.md b/docs/guide/essentials/passing-data.md
index 5f7cef47d..2797a79ec 100644
--- a/docs/guide/essentials/passing-data.md
+++ b/docs/guide/essentials/passing-data.md
@@ -8,19 +8,18 @@ In this section, we explore the `data` and `props` mounting options, as well as
 
 We will demonstrate the above features by building a `<Password>` component. This component verifies a password meets certain criteria, such as length and complexity. We will start with the following and add features, as well as tests to make sure the features are working correctly:
 
-```js
-const Password = {
-  template: `
-    <div>
-      <input v-model="password">
-    </div>
-  `,
-  data() {
-    return {
-      password: ''
-    }
-  }
-}
+```vue
+<!-- Password.vue -->
+<script setup>
+import { ref } from 'vue'
+const password = ref('')
+<script>
+
+<template>
+  <div>
+    <input v-model="password" />
+  </div>
+</template>
 ```
 
 The first requirement we will add is a minimum length.
@@ -31,33 +30,28 @@ We want to reuse this component in all our projects, each of which may have diff
 
 We will show an error if `password` is less than `minLength`. We can do this by creating an `error` computed property, and conditionally rendering it using `v-if`:
 
-```js
-const Password = {
-  template: `
-    <div>
-      <input v-model="password">
-      <div v-if="error">{{ error }}</div>
-    </div>
-  `,
-  props: {
-    minLength: {
-      type: Number
-    }
-  },
-  data() {
-    return {
-      password: ''
-    }
-  },
-  computed: {
-    error() {
-      if (this.password.length < this.minLength) {
-        return `Password must be at least ${this.minLength} characters.`
-      }
-      return
-    }
+```vue
+<!-- Password.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps(['minLength'])
+const password = ref('')
+
+const error = computed(() => {
+  if (password.value.length < props.minLength) {
+    return `Password must be at least ${props.minLength} characters.`
   }
-}
+  return
+})
+<script>
+
+<template>
+  <div>
+    <input v-model="password" />
+    <div v-if="error">{{ error }}</div>
+  </div>
+</template>
 ```
 
 To test this, we need to set the `minLength`, as well as a `password` that is less than that number. We can do this using the `data` and `props` mounting options. Finally, we will assert the correct error message is rendered:
@@ -86,25 +80,17 @@ Writing a test for a `maxLength` rule is left as an exercise for the reader! Ano
 Sometimes you may need to write a test for a side effect of a prop changing. This simple `<Show>` component renders a greeting if the `show` prop is `true`.
 
 ```vue
+<!-- Show.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const { show = true } = defineProps(['show'])
+const greeting = ref('Hello')
+</script>
+
 <template>
   <div v-if="show">{{ greeting }}</div>
 </template>
-
-<script>
-export default {
-  props: {
-    show: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      greeting: 'Hello'
-    }
-  }
-}
-</script>
 ```
 
 To test this fully, we might want to verify that `greeting` is rendered by default. We are able to update the `show` prop using `setProps()`, which causes `greeting` to be hidden:
diff --git a/docs/zh/guide/essentials/a-crash-course.md b/docs/zh/guide/essentials/a-crash-course.md
index cc6d1a9ed..fb3267f14 100644
--- a/docs/zh/guide/essentials/a-crash-course.md
+++ b/docs/zh/guide/essentials/a-crash-course.md
@@ -113,7 +113,7 @@ test('creates a todo', () => {
 <script setup>
 import { ref } from 'vue'
 
-const newTodo = ref(''),
+const newTodo = ref('')
 const todos = ref([
   {
     id: 1,
diff --git a/docs/zh/guide/essentials/conditional-rendering.md b/docs/zh/guide/essentials/conditional-rendering.md
index ee0002a20..39bfb9c10 100644
--- a/docs/zh/guide/essentials/conditional-rendering.md
+++ b/docs/zh/guide/essentials/conditional-rendering.md
@@ -8,20 +8,20 @@ Vue Test Utils 提供了一系列功能，用于渲染组件并对其状态进
 
 Vue 最基础的特性之一是能够使用 `v-if` 动态地插入和移除元素。让我们看看如何测试一个使用了 `v-if` 的组件。
 
-```js
-const Nav = {
-  template: `
-    <nav>
-      <a id="profile" href="/profile">My Profile</a>
-      <a v-if="admin" id="admin" href="/admin">Admin</a>
-    </nav>
-  `,
-  data() {
-    return {
-      admin: false
-    }
-  }
-}
+```vue
+<!-- Nav.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const admin = ref(false)
+</script>
+
+<template>
+  <nav>
+    <a id="profile" href="/profile">My Profile</a>
+    <a v-if="admin" id="admin" href="/admin">Admin</a>
+  </nav>
+</template>
 ```
 
 在 `<Nav>` 组件中，我们首先显示指向个人资料的链接。此外，如果 `admin` 的值为 `true`，我们还会显示指向管理中心的链接。这里有三个我们需要验证的场景：
@@ -99,22 +99,22 @@ test('renders an admin link', () => {
 
 使用 `v-show` 的组件如下所示：
 
-```js
-const Nav = {
-  template: `
-    <nav>
-      <a id="user" href="/profile">My Profile</a>
-      <ul v-show="shouldShowDropdown" id="user-dropdown">
-        <!-- dropdown content -->
-      </ul>
-    </nav>
-  `,
-  data() {
-    return {
-      shouldShowDropdown: false
-    }
-  }
-}
+```vue
+<!-- Nav.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const shouldShowDropdown = ref(false)
+<script>
+
+<template>
+  <nav>
+    <a id="user" href="/profile">My Profile</a>
+    <ul v-show="shouldShowDropdown" id="user-dropdown">
+      <!-- dropdown content -->
+    </ul>
+  </nav>
+</template>
 ```
 
 在这种场景下，元素虽然不可见但始终被渲染。`get()` 或 `find()` 将始终返回一个 `Wrapper`——因为**该元素仍然在 DOM 中**，所以 `find()` 结合 `.exists()` 始终返回 `true`。
diff --git a/docs/zh/guide/essentials/easy-to-test.md b/docs/zh/guide/essentials/easy-to-test.md
index 60d26a515..23f0e52fe 100644
--- a/docs/zh/guide/essentials/easy-to-test.md
+++ b/docs/zh/guide/essentials/easy-to-test.md
@@ -31,23 +31,21 @@ Vue Test Utils 帮助你为 Vue 组件编写测试。然而，VTU 的功能是
 例如，假设有一个简单的计数器组件，包含一个增加计数的按钮：
 
 ```vue
-<template>
-  <p class="paragraph">Times clicked: {{ count }}</p>
-  <button @click="increment">increment</button>
-</template>
+<!-- Counter.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
 
-<script>
-export default {
-  data() {
-    return { count: 0 }
-  },
-  methods: {
-    increment() {
-      this.count++
-    }
-  }
+const increment = () => {
+  count.value++
 }
 </script>
+
+<template>
+  <p class="paragraph">Times clicked: {{ count }}</p>
+  <button @click="increment">Increment</button>
+</template>
 ```
 
 我们可以编写以下测试：
diff --git a/docs/zh/guide/essentials/event-handling.md b/docs/zh/guide/essentials/event-handling.md
index d8a3eabfc..73f6ceca3 100644
--- a/docs/zh/guide/essentials/event-handling.md
+++ b/docs/zh/guide/essentials/event-handling.md
@@ -8,21 +8,24 @@ Vue 组件通过 props 和调用 `$emit` 触发事件来进行交互。在本指
 
 这是一个简单的 `<Counter>` 组件。它包含一个按钮，当点击时，会增加一个内部计数变量并触发该值的事件：
 
-```js
-const Counter = {
-  template: '<button @click="handleClick">Increment</button>',
-  data() {
-    return {
-      count: 0
-    }
-  },
-  methods: {
-    handleClick() {
-      this.count += 1
-      this.$emit('increment', this.count)
-    }
-  }
+```vue
+<!-- Counter.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+
+const emit = defineEmits(['increment'])
+
+const handleClick = () => {
+  count.value += 1
+  emit('increment', count.value)
 }
+</script>
+
+<template>
+  <button @click="handleClick">Increment</button>
+</template>
 ```
 
 为了全面测试这个组件，我们需要验证是否触发了带有最新 `count` 值的 `increment` 事件。
@@ -90,25 +93,27 @@ test('emits an event with count when clicked', () => {
 
 假设我们的 `<Counter>` 组件现在需要触发一个包含附加信息的对象。例如，我们需要告诉任何监听 `@increment` 事件的父组件 `count` 是偶数还是奇数：
 
-```js {12-15}
-const Counter = {
-  template: `<button @click="handleClick">Increment</button>`,
-  data() {
-    return {
-      count: 0
-    }
-  },
-  methods: {
-    handleClick() {
-      this.count += 1
-
-      this.$emit('increment', {
-        count: this.count,
-        isEven: this.count % 2 === 0
-      })
-    }
-  }
+```vue
+<!-- Counter.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+
+const emit = defineEmits(['increment'])
+
+const handleClick = () => {
+  count.value += 1
+  emit('increment', {
+    count: count.value,
+    isEven: count.value % 2 === 0,
+  })
 }
+</script>
+
+<template>
+  <button @click="handleClick">Increment</button>
+</template>
 ```
 
 正如我们之前所做的那样，我们需要在 `<button>` 元素上触发 `click` 事件。然后，我们使用 `emitted('increment')` 来确保触发了正确的值。
@@ -142,10 +147,6 @@ test('emits an event with count when clicked', () => {
 
 测试复杂事件负载 (如对象) 与测试简单值 (如数字或字符串) 没有区别。
 
-## 组合 API
-
-如果你使用的是组合 API，你将调用 `context.emit()` 而不是 `this.$emit()`。`emitted()` 可以捕获两者的事件，因此你可以使用本文中描述的相同方法来测试你的组件。
-
 ## 结论
 
 - 使用 `emitted()` 来访问从 Vue 组件触发的事件。
diff --git a/docs/zh/guide/essentials/forms.md b/docs/zh/guide/essentials/forms.md
index 67b837a90..382a01bb7 100644
--- a/docs/zh/guide/essentials/forms.md
+++ b/docs/zh/guide/essentials/forms.md
@@ -9,6 +9,18 @@
 让我们看一个非常基本的表单：
 
 ```vue
+<!-- Form.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const email = ref('')
+const emit = defineEmits(['submit'])
+
+const submit = () => {
+  emit('submit', email.value)
+}
+</script>
+
 <template>
   <div>
     <input type="email" v-model="email" />
@@ -16,21 +28,6 @@
     <button @click="submit">Submit</button>
   </div>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      email: ''
-    }
-  },
-  methods: {
-    submit() {
-      this.$emit('submit', this.email)
-    }
-  }
-}
-</script>
 ```
 
 ### 给元素赋值
@@ -110,6 +107,25 @@ test('emits the input to its parent', async () => {
 让我们看一个更复杂的表单，它包含更多类型的输入。
 
 ```vue
+<!-- FormComponent.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const form = ref({
+  email: '',
+  description: '',
+  city: '',
+  subscribe: false,
+  interval: ''
+})
+const emit = defineEmits(['submit'])
+
+const submit = () => {
+  emit('submit', { ...form.value })
+}
+</script>
+
+
 <template>
   <form @submit.prevent="submit">
     <input type="email" v-model="form.email" />
@@ -129,27 +145,6 @@ test('emits the input to its parent', async () => {
     <button type="submit">Submit</button>
   </form>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      form: {
-        email: '',
-        description: '',
-        city: '',
-        subscribe: false,
-        interval: ''
-      }
-    }
-  },
-  methods: {
-    async submit() {
-      this.$emit('submit', this.form)
-    }
-  }
-}
-</script>
 ```
 
 我们扩展的 Vue 组件稍微长一些，包含更多输入类型，并且 `submit` 处理程序已移至 `<form/>` 元素。
@@ -262,29 +257,26 @@ Vue Test Utils 会读取事件并将适当的属性应用于事件对象。在
 假设你的代码需要从 `event` 对象中获取一些信息。你可以通过将额外数据作为第二个参数来测试这种情况。
 
 ```vue
+<!-- Form.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const inputValue = ref('')
+const emit = defineEmits(['focus-lost'])
+
+const handleBlur = (event) => {
+  if (event.relatedTarget.tagName === 'BUTTON') {
+    emit('focus-lost')
+  }
+}
+</script>
+
 <template>
   <form>
-    <input type="text" v-model="value" @blur="handleBlur" />
+    <input type="text" v-model="inputValue" @blur="handleBlur" />
     <button>Submit</button>
   </form>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      value: ''
-    }
-  },
-  methods: {
-    handleBlur(event) {
-      if (event.relatedTarget.tagName === 'BUTTON') {
-        this.$emit('focus-lost')
-      }
-    }
-  }
-}
-</script>
 ```
 
 ```js
@@ -314,6 +306,11 @@ test('emits an event only if you lose focus to a button', () => {
 以下是一个包装 `label` 和 `input` 元素的组件：
 
 ```vue
+<!-- CustomInput.vue -->
+<script setup>
+defineProps(['modelValue', 'label'])
+</script>
+
 <template>
   <label>
     {{ label }}
@@ -324,14 +321,6 @@ test('emits an event only if you lose focus to a button', () => {
     />
   </label>
 </template>
-
-<script>
-export default {
-  name: 'CustomInput',
-
-  props: ['modelValue', 'label']
-}
-</script>
 ```
 
 这个 Vue 组件也会回显用户输入。使用它的方法如下：
@@ -361,28 +350,24 @@ test('fills in the form', async () => {
 假设我们有一个使用 Vuetify 文本区域的表单：
 
 ```vue
+<!-- CustomTextarea.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const description = ref('')
+const emit = defineEmits(['submitted'])
+
+const handleSubmit = () => {
+  emit('submitted', description.value)
+}
+</script>
+
 <template>
   <form @submit.prevent="handleSubmit">
     <v-textarea v-model="description" ref="description" />
     <button type="submit">Send</button>
   </form>
 </template>
-
-<script>
-export default {
-  name: 'CustomTextarea',
-  data() {
-    return {
-      description: ''
-    }
-  },
-  methods: {
-    handleSubmit() {
-      this.$emit('submitted', this.description)
-    }
-  }
-}
-</script>
 ```
 
 我们可以使用 `findComponent` 找到组件实例，然后给它赋值。
diff --git a/docs/zh/guide/essentials/passing-data.md b/docs/zh/guide/essentials/passing-data.md
index d6bb5cfda..305ded187 100644
--- a/docs/zh/guide/essentials/passing-data.md
+++ b/docs/zh/guide/essentials/passing-data.md
@@ -8,19 +8,18 @@ Vue Test Utils 提供了几种方法来设置组件的数据和属性，以便
 
 我们将通过构建一个 `<Password>` 组件来演示上述功能。该组件验证密码是否符合某些标准，例如长度和复杂性。我们将从以下代码开始，并添加功能以及测试以确保这些功能正常工作：
 
-```js
-const Password = {
-  template: `
-    <div>
-      <input v-model="password">
-    </div>
-  `,
-  data() {
-    return {
-      password: ''
-    }
-  }
-}
+```vue
+<!-- Password.vue -->
+<script setup>
+import { ref } from 'vue'
+const password = ref('')
+<script>
+
+<template>
+  <div>
+    <input v-model="password" />
+  </div>
+</template>
 ```
 
 我们将添加的第一个要求是最小长度。
@@ -31,33 +30,28 @@ const Password = {
 
 如果 `password` 的长度小于 `minLength`，我们将显示一个错误。我们可以通过创建一个 `error` 计算属性，并使用 `v-if` 有条件地渲染它来实现：
 
-```js
-const Password = {
-  template: `
-    <div>
-      <input v-model="password">
-      <div v-if="error">{{ error }}</div>
-    </div>
-  `,
-  props: {
-    minLength: {
-      type: Number
-    }
-  },
-  data() {
-    return {
-      password: ''
-    }
-  },
-  computed: {
-    error() {
-      if (this.password.length < this.minLength) {
-        return `密码必须至少包含 ${this.minLength} 个字符.`
-      }
-      return
-    }
+```vue
+<!-- Password.vue -->
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps(['minLength'])
+const password = ref('')
+
+const error = computed(() => {
+  if (password.value.length < props.minLength) {
+    return `Password must be at least ${props.minLength} characters.`
   }
-}
+  return
+})
+<script>
+
+<template>
+  <div>
+    <input v-model="password" />
+    <div v-if="error">{{ error }}</div>
+  </div>
+</template>
 ```
 
 为了测试这一点，我们需要设置 `minLength` 以及一个小于该数字的 `password`。我们可以使用 `data` 和 `props` 的挂载选项来实现。最后，我们将断言错误消息是否被正确渲染：
@@ -86,25 +80,17 @@ test('renders an error if length is too short', () => {
 有时你可能需要编写测试来验证属性更改的副作用。这个简单的 `<Show>` 组件在 `show` 属性为 `true` 时渲染一个问候语。
 
 ```vue
+<!-- Show.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const { show = true } = defineProps(['show'])
+const greeting = ref('Hello')
+</script>
+
 <template>
   <div v-if="show">{{ greeting }}</div>
 </template>
-
-<script>
-export default {
-  props: {
-    show: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      greeting: 'Hello'
-    }
-  }
-}
-</script>
 ```
 
 为了全面测试这一点，我们可能想要验证 `greeting` 是否默认渲染。我们可以使用 `setProps()` 更新 `show` 属性，这将导致 `greeting` 被隐藏：