[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>