title: Nuxt: How to know that hydration has been finished?
body: <p><strong>Situation</strong></p>
  <p>I save tour pages that user has visited in order to show &quot;Recently visited tours&quot; on the home page when user comes back to the site. Visited tours I save with <a href="https://github.com/robinvdvleuten/vuex-persistedstate" rel="nofollow noreferrer">vuex-persistedstate</a>.</p>
  <p>The code is simple: <code>&lt;TheVisitedTours v-show=toursRecentlyViewed.length&quot; /&gt;</code></p>
  <p><strong>Problem</strong></p>
  <p>When user comes back, there are the next hydration issues:</p>
  <pre><code>Parent:  &lt;div style=​&quot;display:​none;​&quot; data-v-24f9a6f4&gt;​…​&lt;/div&gt;​ 
  
  Mismatching childNodes vs. VNodes:  NodeList(3) [comment, text, comment] (5) [VNode, VNode, VNode, VNode, VNode]
   
  [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside &lt;p&gt;, or missing &lt;tbody&gt;. Bailing hydration and performing full client-side render.
  </code></pre>
  <p>It is obvious that SSR does not have info about Visited tours and vuex-persistedstate restores info about visited tours before hydration is finished.</p>
  <p>In case if I use v-show instead of v-if I see:</p>
  <p><code>[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside &lt;p&gt;, or missing &lt;tbody&gt;. Bailing hydration and performing full client-side render.</code></p>
  <p>I have tried to wrap it into <code>&lt;client-only&gt;...&lt;/client-only&gt;</code> but it does not help.</p>
  <p>Also I have tried to use:</p>
  <pre><code>mounted () {
    this.isMounted = true
  }
  </code></pre>
  <p>and</p>
  <pre><code>mounted () {
    window.onNuxtReady(() =&gt; {
      this.isMounted = true
    })
  }
  </code></pre>
  <p>with</p>
  <p><code>&lt;TheVisitedTours v-if=isMounted &amp;&amp; toursRecentlyViewed.length&quot; /&gt;</code></p>
  <p>but it also does not work.</p>
  <p><strong>Question</strong></p>
  <p>Is there any event I can listen for to know that hydration has been finished? If no, maybe someone have any workaround ideas?</p>
  <p>Thanks a lot.</p>