Vue3 での textareaの高さを自動で設定する方法

結論

Vue

 props: {
        text: String,
        id: String,
    },
    data() {
        return {
            txt: this.text,
            i: this.id,
        }
    },
computed:{
        rows() {
            if(this.txt === null) {
                return 4
            }
            else{
                let num = (this.txt.match(/\n/g) || []).length + 1
                return (num > 4) ? num : 4
            }
        }
    }

HTML

<textarea class="editable-contents-textarea" v-on:blur="saveText" v-model="txt" :id="'textarea'+ i" :rows="rows"></textarea>

css

.editable-contents-textarea{
  height:auto;
}

補足

rows関数の４って言う数字は適当です．強いて言うなら最低の行数ですね

あと，if(this.txt === null)の分岐なんですけど，これはtexareaに文字がない場合のものです．

以上です