<template>
  <div>
    <!-- Hydrate when user clicks. -->
    <Hydrate on-click>
      <MyComponent />
      <MyComponent />
      <MyComponent />
    </Hydrate>
    <!-- Just in time hydration. When user hovers over content -->
    <Hydrate on-hover>
      ...
    </Hydrate>
    <!-- Hydrate on any event -->
    <Hydrate on="fullscreen">
      ...
    </Hydrate>
    <!-- or events -->
    <Hydrate :on="['fullscreen', 'mousedown']">
      ...
    </Hydrate>
    <!-- When user hover over or keyboard focus into. -->
    <Hydrate on-interaction>
      ...
    </Hydrate>
    <!-- Requires IntersectionObserver. Polyfill not included. -->
    <Hydrate when-visible>
      ...
    </Hydrate>
    <!-- Requires requestIdleCallback. Polyfill not included. -->
    <Hydrate when-idle>
      ...
    </Hydrate>
    <!-- Only in SSR. -->
    <Hydrate ssr-only>
      ...
    </Hydrate>
    <!-- Scheduled hydration. In 2s of initial render. -->
    <Hydrate :with-delay="2000">
      ...
    </Hydrate>
    <!-- Controlled hydration -->
    <Hydrate :force="isItReady">
      ...
    </Hydrate>
  </div>
</template>

<template>
  <Hydrate ref="child">
    ...
  </Hydrate>
</template>
<script>
export default {
  methods: {
    foo() {
      this.$refs.child.hydrate()
    }
  }
}
</script>