[Vue.js]改行された時に改行分の高さをとるテキストエリア

やりたいこと

普段何気なくテキストエリアに文字を入れたり、改行したりしますが、
その際、改行分の高さをとってくれるようなテキストエリアのcomponentをつくりたかった

ソース

javascript　BaseTextarea.vue

<template>
 <textarea
   ref="adjust_textarea"
   v-model="textareaVal"
   class="c-input-textarea"
   :placeholder="placeholder"
   @keydown="adjustHeight"
 />
</template>

<script>
export default {
 name: 'BaseTextarea',
 props: {
   placeholder: {
     type: String,
     required: true,
   },
 },
 data() {
   return {
     textareaVal: '',
   }
 },
 methods: {
   adjustHeight() {
     const textarea = this.$refs.adjust_textarea
     const resetHeight = new Promise(function(resolve) {
       resolve((textarea.style.height = 'auto'))
     })
     resetHeight.then(function() {
       textarea.style.height = textarea.scrollHeight + 'px'
     })
   },
 },
}
</script>