How to manipulate DOM both after server-side and client-side rendering?

Here is my code:

<template>
  <div class="comment-editor" v-if="loggedIn">
    <div class="leftside">
      <!-- <client-only> -->
      <textarea
        ref="editor"
        v-model="content"
        placeholder="your comment"
      ></textarea>
      <!-- </client-only> -->
      <Message v-bind="message" />
    </div>
    <Button
      text="Publish"
      color="main"
      v-if="message.type != 'loading'"
      @click="publish"
    />
  </div>
  <div class="notLoggedIn" v-else>
    You should <nuxt-link to="/signup">register</nuxt-link> or
    <nuxt-link to="/login">log in</nuxt-link> to write comments.
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: {},
      content: "",
    };
  },
  computed: {/*not important*/},
  mounted() {
    const tx = document.querySelector("textarea");
    fh(tx);
    tx.style.overflowY = "hidden";
    tx.addEventListener("input", function () {
      fh(this);
    });
    function fh(x) {
      while (x.style.height + "" != x.scrollHeight + "px")
        x.style.height = x.scrollHeight + "px";
    }
  },
  methods: {/*not important*/},
  props: ["number"],
};
</script>

What you can see in the “mounted” 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?