docs: hydration event callback example

docs/2.guide/2.directory-structure/1.components.md

@@ -268,6 +268,24 @@ This also means you would need to explicitly add the prefix to those components
 For example, if you have a component named `IdleBar` and you'd like it to be delayed based on network idle time, you would need to use it like `<LazyIdleIdleBar>` and not `<LazyIdleBar>` to make it a delayed hydration component. Otherwise, it would be treated as a regular [dynamic import](/docs/guide/directory-structure/components#dynamic-imports)
 ::
 
+### Listening to hydration events
+
+All delayed hydration components have a `@hydrated` event that is fired whenever they are hydrated. You can listen to this event to trigger some action that depends on the component:
+
+```vue [pages/index.vue]
+<template>
+  <div>
+    <LazyVisibleMyComponent @hydrated="onHydrate" />
+  </div>
+</template>
+
+<script setup lang="ts">
+function onHydrate() {
+  console.log("Component has been hydrated!")
+}
+</script>
+```
+
 ### Caveats and best practices
 
 Delayed hydration has many performance benefits, but in order to gain the most out of it, it's important to use it correctly: