[Vue3] textarea 자동 높이 조절

<template>
  <!-- 댓글 input -->
    <textarea
      ref="textArea"
      rows="{1}"
      id="comment-textarea"
      @input="resize"
      v-if="isLogined"
      type="text"
      class="comment_textarea"
      @change="changeInput"
      placeholder="글 남기기..."
    />
    <button class="comment_submit" @click="clicksubmitBtn">등록</button>
</template>
<script>
import { ref } from 'vue';

export default {
  name: 'CommentInput',
  setup() {
    let content = '';
  
    const changeInput = (e) => {
      return (content = e.target.value);
    };

    const textArea = ref(null);
    const resize = () => {
      textArea.value.style.height = '1.5rem';
      textArea.value.style.height = textArea.value.scrollHeight + 'px';
    };

    // 등록버튼 눌렀을 때
    const clicksubmitBtn = () => {
      // input 비워주기
      document.querySelector('#comment-textarea').value = '';
      content = '';
    };

    return {
      content,
      clicksubmitBtn,
      changeInput,
      resize,
      textArea,
    };
  },
};
</script>