title: How to manipulate DOM both after server-side and client-side rendering?
body: <p>Here is my code (it is a Vue component in a Nuxt app):</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;comment-editor&quot; v-if=&quot;loggedIn&quot;&gt;
      &lt;div class=&quot;leftside&quot;&gt;
        &lt;!-- &lt;client-only&gt; --&gt;
        &lt;textarea
          ref=&quot;editor&quot;
          v-model=&quot;content&quot;
          placeholder=&quot;your comment&quot;
        &gt;&lt;/textarea&gt;
        &lt;!-- &lt;/client-only&gt; --&gt;
        &lt;Message v-bind=&quot;message&quot; /&gt;
      &lt;/div&gt;
      &lt;Button
        text=&quot;Publish&quot;
        color=&quot;main&quot;
        v-if=&quot;message.type != 'loading'&quot;
        @click=&quot;publish&quot;
      /&gt;
    &lt;/div&gt;
    &lt;div class=&quot;notLoggedIn&quot; v-else&gt;
      You should &lt;nuxt-link to=&quot;/signup&quot;&gt;register&lt;/nuxt-link&gt; or
      &lt;nuxt-link to=&quot;/login&quot;&gt;log in&lt;/nuxt-link&gt; to write comments.
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        content: &quot;&quot;,
      };
    },
    mounted() {
      const tx = document.querySelector(&quot;textarea&quot;);
      fh(tx);
      tx.style.overflowY = &quot;hidden&quot;;
      tx.addEventListener(&quot;input&quot;, function () {
        fh(this);
      });
      function fh(x) {
        while (x.style.height + &quot;&quot; != x.scrollHeight + &quot;px&quot;)
          x.style.height = x.scrollHeight + &quot;px&quot;;
      }
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>What you can see in the &quot;mounted&quot; function is used to dynamically change the height of a textarea. It works properly when the component is client-side rendered (i.e. when navigating from another page), but the app crashes after SSR (when directly opening the page with the component). How to make that code work properly in both cases?</p>