autoresize.vue

<template lang="pug">
textarea(ref="input" @input="changed" rows="1" style="height:1em;resize:none;" :id="id")
</template>

<script>
export default {
  mounted() {
    this.$refs.input.value = this.$options._renderChildren ? this.$options._renderChildren[0].text : ''
    this.$refs.input.style.height = this.$refs.input.scrollHeight+'px'
  },
  props: [
    'id',
  ],
  methods: {
    changed() {
      this.$refs.input.style.height = 'auto'
      this.$refs.input.style.height = this.$refs.input.scrollHeight+'px'
    },
  },
}
</script>