<div id="app">
  <resizable-textarea>
    <textarea rows="1" class="resize-none outline-0" 
      placeholder="Write something..."
    ></textarea>
  </resizable-textarea>
</div>
* {
  margin: 0;
  padding: 0;
}

html, body {
  height:100%;
  font-family: system, helvetica;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('http://res.cloudinary.com/lorisleiva/image/upload/v1526037760/backgrounds/8.svg') center;
  background-size: 50%;
}

#app {
  width:300px;
  padding: 1rem;
  padding-bottom: .7rem;
  border-radius: 1rem;
  background-color: white;
  border: 3px solid #FED759;
  box-shadow: 2px 2px 20px rgba(0,0,0,0.2), inset 0 0 2px #514747;
}

.outline-0 {
  outline: 0;
}

/**
 * Component script.
 */

Vue.component('resizable-textarea', {
  methods: {
    resizeTextarea (event) {
      event.target.style.height = 'auto'
      event.target.style.height = (event.target.scrollHeight) + 'px'
    },
  },
  mounted () {
    this.$nextTick(() => {
      this.$el.setAttribute('style', 'height:' + (this.$el.scrollHeight) + 'px;overflow-y:hidden;')
    })

    this.$el.addEventListener('input', this.resizeTextarea)
  },
  beforeDestroy () {
    this.$el.removeEventListener('input', this.resizeTextarea)
  },
  render () {
    return this.$slots.default[0]
  },
});



/**
 * Start the VueJS application.
 */
new Vue({
  el: '#app',
});
View Compiled
Rerun