docs: add custom strategies example via LazyIf

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

@@ -205,14 +205,23 @@ If you would like to hydrate a component once a promise is fulfilled, use the `L
 </template>
 ```
 
-Nuxt also provides a way to extend this feature by each developer. If you have highly specific hydration triggers that aren't covered by the default strategies, you can use the general purpose conditional hydration, via the `LazyIf` prefix:
+Nuxt's delayed hydration system is highly flexible, allowing each developer to build upon it and implement their own hydration strategy.
+If you have highly specific hydration triggers that aren't covered by the default strategies, or you want to have conditional hydraion, you can use the general purpose `LazyIf` prefix:
 
 ```vue [pages/index.vue]
 <template>
   <div>
-    <LazyIfMyComponent />
+    <button @click="myFunction">Click me to start the custom hydration strategy</button>
+    <LazyIfMyComponent :hydrate="myCondition" />
   </div>
 </template>
+<script setup lang="ts">
+const myCondition = ref(false)
+function myFunction() {
+  // trigger custom hydration strategy...
+  myCondition.value = true
+}
+</script>
 ```
 
 ### Custom hydration triggers