docs: explain how to use ClientOnly with onMounted hook (#30670)

docs/3.api/1.components/1.client-only.md

@@ -51,3 +51,26 @@ The content of the default slot will be tree-shaken out of the server build. (Th
   </div>
 </template>
 ```
+
+## Examples
+
+### Accessing HTML Elements
+
+Components inside `<ClientOnly>` are rendered only after being mounted. To access the rendered elements in the DOM, you can watch a template ref:
+
+```vue [pages/example.vue]
+<script setup lang="ts">
+const nuxtWelcomeRef = ref()
+
+// The watch will be triggered when the component is available
+watch(nuxtWelcomeRef, () => {
+ console.log('<NuxtWelcome /> mounted')
+}, { once: true })
+</script>
+
+<template>
+  <ClientOnly>
+    <NuxtWelcome ref="nuxtWelcomeRef" />
+  </ClientOnly>
+</template>
+```