title: VueJs: Textarea input binding
body: <p>I'm trying to figure out how to detect change of the value on the textarea from within the component.</p>
  
  <p>For input we can simply use </p>
  
  <pre><code>&lt;input
    :value="value"
    @input="update($event.target.value)"
  &gt;
  </code></pre>
  
  <p>However on textarea this won't work.</p>
  
  <p>What I'm working with is the CKEditor component, which should update wysiwyg's content when model value of the parent component (attached to this child component) is updated.</p>
  
  <p>My <code>Editor</code> component currently looks like this:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="editor" :class="groupCss"&gt;
          &lt;textarea :id="id" v-model="input"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: {
              value: {
                  type: String,
                  default: ''
              },
              id: {
                  type: String,
                  required: false,
                  default: 'editor'
              }
          },
          data() {
              return {
                  input: this.$slots.default ? this.$slots.default[0].text : '',
                  config: {
                      ...
                  }
              }
          },
          watch: {
              input(value) {
                  this.update(value);
              }
          },
          methods: {
              update(value) {
                  CKEDITOR.instances[this.id].setData(value);
              },
              fire(value) {
                  this.$emit('input', value);
              }
          },
          mounted () {
              CKEDITOR.replace(this.id, this.config);
              CKEDITOR.instances[this.id].setData(this.input);
              this.fire(this.input);
              CKEDITOR.instances[this.id].on('change', () =&gt; {
                  this.fire(CKEDITOR.instances[this.id].getData());
              });
          },
          destroyed () {
              if (CKEDITOR.instances[this.id]) {
                  CKEDITOR.instances[this.id].destroy()
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>and I include it within the parent component</p>
  
  <pre><code>&lt;html-editor
      v-model="fields.body"
      id="body"
  &gt;&lt;/html-editor&gt;
  </code></pre>
  
  <p>however, whenever parent component's model value changes - it does not trigger the watcher - effectively not updating the editor's window.</p>
  
  <p>I only need <code>update()</code> method to be called when parent component's model <code>fields.body</code> is updated.</p>
  
  <p>Any pointer as to how could I approach it?</p>