diff --git a/packages/core/useActiveElement/index.md b/packages/core/useActiveElement/index.md
index 243d1691a24..e102e2a2d8d 100644
--- a/packages/core/useActiveElement/index.md
+++ b/packages/core/useActiveElement/index.md
@@ -8,14 +8,17 @@ Reactive `document.activeElement`
 
 ## Usage
 
-```js
+```vue
+<script setup lang="ts">
 import { useActiveElement } from '@vueuse/core'
+import { watch } from 'vue'
 
 const activeElement = useActiveElement()
 
 watch(activeElement, (el) => {
   console.log('focus changed to', el)
 })
+</script>
 ```
 
 ## Component Usage
diff --git a/packages/core/useDocumentVisibility/index.md b/packages/core/useDocumentVisibility/index.md
index c0b2e06573f..d7aa771c27c 100644
--- a/packages/core/useDocumentVisibility/index.md
+++ b/packages/core/useDocumentVisibility/index.md
@@ -8,10 +8,12 @@ Reactively track [`document.visibilityState`](https://developer.mozilla.org/en-U
 
 ## Usage
 
-```js
+```vue
+<script setup lang="ts">
 import { useDocumentVisibility } from '@vueuse/core'
 
 const visibility = useDocumentVisibility()
+</script>
 ```
 
 ## Component Usage
diff --git a/packages/core/useDropZone/index.md b/packages/core/useDropZone/index.md
index 236110bdbfe..237a3a14168 100644
--- a/packages/core/useDropZone/index.md
+++ b/packages/core/useDropZone/index.md
@@ -17,6 +17,7 @@ Due to Safari browser limitations, file type validation is only possible during
 ```vue
 <script setup lang="ts">
 import { useDropZone } from '@vueuse/core'
+import { ref } from 'vue'
 
 const dropZoneRef = ref<HTMLDivElement>()
 
diff --git a/packages/core/useMutationObserver/index.md b/packages/core/useMutationObserver/index.md
index 6fbf5371330..fdfa37119ac 100644
--- a/packages/core/useMutationObserver/index.md
+++ b/packages/core/useMutationObserver/index.md
@@ -8,26 +8,25 @@ Watch for changes being made to the DOM tree. [MutationObserver MDN](https://dev
 
 ## Usage
 
-```ts
+```vue
+<script setup lang="ts">
 import { useMutationObserver } from '@vueuse/core'
 import { ref, useTemplateRef } from 'vue'
 
-export default {
-  setup() {
-    const el = useTemplateRef('el')
-    const messages = ref([])
+const el = useTemplateRef('el')
+const messages = ref([])
 
-    useMutationObserver(el, (mutations) => {
-      if (mutations[0])
-        messages.value.push(mutations[0].attributeName)
-    }, {
-      attributes: true,
-    })
+useMutationObserver(el, (mutations) => {
+  if (mutations[0])
+    messages.value.push(mutations[0].attributeName)
+}, {
+  attributes: true,
+})
+</script>
 
-    return {
-      el,
-      messages,
-    }
-  },
-}
+<template>
+  <div ref="el">
+    Hello VueUse
+  </div>
+</template>
 ```
diff --git a/packages/core/useParentElement/index.md b/packages/core/useParentElement/index.md
index f5bc4c0eaf3..27f0c40ee16 100644
--- a/packages/core/useParentElement/index.md
+++ b/packages/core/useParentElement/index.md
@@ -10,7 +10,8 @@ Get parent element of the given element
 
 When no argument is passed, it will return the parent element of the current component.
 
-```js
+```vue
+<script setup lang="ts">
 import { useParentElement } from '@vueuse/core'
 
 const parentEl = useParentElement()
@@ -18,15 +19,16 @@ const parentEl = useParentElement()
 onMounted(() => {
   console.log(parentEl.value)
 })
+</script>
 ```
 
 It can also accept a `ref` as the first argument.
 
-```ts
+```vue
+<script setup lang="ts">
 import { useParentElement } from '@vueuse/core'
 import { shallowRef } from 'vue'
 
-// Don't forget to bind the ref to the element
 const tooltip = shallowRef<HTMLElement | undefined>()
 
 const tooltipWrapper = useParentElement(tooltip)
@@ -34,4 +36,11 @@ const tooltipWrapper = useParentElement(tooltip)
 onMounted(() => {
   console.log(tooltipWrapper.value)
 })
+</script>
+
+<template>
+  <div>
+    <p ref="tooltip" />
+  </div>
+</template>
 ```
diff --git a/packages/core/useResizeObserver/index.md b/packages/core/useResizeObserver/index.md
index b9309163d32..50361839a00 100644
--- a/packages/core/useResizeObserver/index.md
+++ b/packages/core/useResizeObserver/index.md
@@ -9,7 +9,7 @@ Reports changes to the dimensions of an Element's content or the border-box
 ## Usage
 
 ```vue
-<script setup>
+<script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core'
 import { ref, useTemplateRef } from 'vue'
 
diff --git a/packages/core/useWindowFocus/index.md b/packages/core/useWindowFocus/index.md
index 3affa59d6b9..271ff037a4b 100644
--- a/packages/core/useWindowFocus/index.md
+++ b/packages/core/useWindowFocus/index.md
@@ -8,10 +8,16 @@ Reactively track window focus with `window.onfocus` and `window.onblur` events.
 
 ## Usage
 
-```js
+```vue
+<script setup lang="ts">
 import { useWindowFocus } from '@vueuse/core'
 
 const focused = useWindowFocus()
+</script>
+
+<template>
+  <div>{{ focused }}</div>
+</template>
 ```
 
 ## Component Usage
diff --git a/packages/core/useWindowScroll/index.md b/packages/core/useWindowScroll/index.md
index 3fe70161337..d21e652359c 100644
--- a/packages/core/useWindowScroll/index.md
+++ b/packages/core/useWindowScroll/index.md
@@ -8,10 +8,22 @@ Reactive window scroll
 
 ## Usage
 
-```js
+```vue
+<script setup lang="ts">
 import { useWindowScroll } from '@vueuse/core'
 
 const { x, y } = useWindowScroll()
-console.log(x.value) // read current x scroll value
-y.value = 100 // scroll y to 100
+</script>
+
+<template>
+  <div>
+    read current x, y scroll: {{ x }}, {{ y }}
+  </div>
+  <button @click="x = 100">
+    scroll X to 100
+  </button>
+  <button @click="y = 100">
+    scroll Y to 100
+  </button>
+</template>
 ```
diff --git a/packages/core/useWindowSize/index.md b/packages/core/useWindowSize/index.md
index 944196cb2de..afecafd0426 100644
--- a/packages/core/useWindowSize/index.md
+++ b/packages/core/useWindowSize/index.md
@@ -8,10 +8,19 @@ Reactive window size
 
 ## Usage
 
-```js
+```vue
+<script setup lang="ts">
 import { useWindowSize } from '@vueuse/core'
 
 const { width, height } = useWindowSize()
+</script>
+
+<template>
+  <div>
+    Width: {{ width }}
+    Height: {{ height }}
+  </div>
+</template>
 ```
 
 ## Component Usage

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/vueuse/vueuse/pull/4901.diff" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/vueuse/vueuse/pull/4901.diff" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/vueuse/vueuse/pull/4901.diff" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/vueuse/vueuse/pull/4901.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>