diff --git a/website/docs/en-US/collapse.md b/website/docs/en-US/collapse.md
index 5d68f8c633..4a0a27b7c0 100644
--- a/website/docs/en-US/collapse.md
+++ b/website/docs/en-US/collapse.md
@@ -41,6 +41,26 @@ You can expand multiple panels
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const activeNames = ref(['1']);
+      const handleChange = (val) => {
+        console.log(val);
+      };
+      return {
+        activeNames,
+        handleChange,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -78,6 +98,23 @@ In accordion mode, only one panel can be expanded at once
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const activeName = ref('1');
+
+      return {
+        activeName,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/es/collapse.md b/website/docs/es/collapse.md
index 26a9363562..056b573ab2 100644
--- a/website/docs/es/collapse.md
+++ b/website/docs/es/collapse.md
@@ -41,6 +41,26 @@ Puede expandir varios paneles
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const activeNames = ref(['1']);
+      const handleChange = (val) => {
+        console.log(val);
+      };
+      return {
+        activeNames,
+        handleChange,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -78,6 +98,23 @@ En modo acordeón sólo un panel puede ser expandido a la vez
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const activeName = ref('1');
+
+      return {
+        activeName,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/fr-FR/collapse.md b/website/docs/fr-FR/collapse.md
index 4384e09208..212b478f40 100644
--- a/website/docs/fr-FR/collapse.md
+++ b/website/docs/fr-FR/collapse.md
@@ -41,6 +41,26 @@ Vous pouvez agrandir plusieurs panneaux.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const activeNames = ref(['1']);
+      const handleChange = (val) => {
+        console.log(val);
+      };
+      return {
+        activeNames,
+        handleChange,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -78,6 +98,23 @@ En mode accordéon, un seul panneau peut être ouvert à la fois.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const activeName = ref('1');
+
+      return {
+        activeName,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/jp/collapse.md b/website/docs/jp/collapse.md
index 4366ae8804..cad10f5bd0 100644
--- a/website/docs/jp/collapse.md
+++ b/website/docs/jp/collapse.md
@@ -41,6 +41,26 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const activeNames = ref(['1']);
+      const handleChange = (val) => {
+        console.log(val);
+      };
+      return {
+        activeNames,
+        handleChange,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -78,6 +98,23 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const activeName = ref('1');
+
+      return {
+        activeName,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/zh-CN/collapse.md b/website/docs/zh-CN/collapse.md
index dda429ef67..33366de20b 100644
--- a/website/docs/zh-CN/collapse.md
+++ b/website/docs/zh-CN/collapse.md
@@ -41,6 +41,26 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const activeNames = ref(['1']);
+      const handleChange = (val) => {
+        console.log(val);
+      };
+      return {
+        activeNames,
+        handleChange,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -78,6 +98,23 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const activeName = ref('1');
+
+      return {
+        activeName,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::