title: Vue model not updating
body: <p>When I try to update my custom text-area component's model data <code>this.message='&lt;span id=&quot;foo&quot;&gt;bar&lt;/span&gt;</code> the text and html does not display in the htmltextarea tag like it should, but I can see the update applied in the Vue dev tool's console. I've also tried switching to an object instead of a string and using <a href="https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats" rel="nofollow noreferrer">Vue.set</a>, but this does not work either.</p>
  <p>Any suggestions on how to fix this?</p>
  <p>The goal with the <code>htmlTextArea</code> component is to get the users text from the htmlTextArea tag (this works), manipulate this text and bind it back to the textarea, but with HTML in it.</p>
  <p>Custom text-area component:</p>
  <pre><code>&lt;template&gt;
    &lt;div contenteditable=&quot;true&quot; @input=&quot;updateHTML&quot; class=&quot;textareaRoot&quot;&gt;&lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    // Custom textarea 
    name: 'htmlTextArea',
    props:['value'],
    mounted: function () {
        this.$el.innerHTML = this.value;
    },
    methods: {
        updateHTML: function(e) {
            this.$emit('input', e.target.innerHTML);
        }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>Other component:</p>
  <pre><code>&lt;template&gt;
  ...
  &lt;htmlTextArea id=&quot;textarea&quot; v-model=&quot;message&quot;&gt;&lt;/htmlTextArea&gt;
  ...
  &lt;/template&gt;
  &lt;script&gt;
        data: {
          return {
            message: 'something'//this works
          }
        }
       ...
       methods: {
        changeText() {
          this.message='&lt;span id=&quot;foo&quot;&gt;bar&lt;/span&gt;'//this does not
        }
       },
       components: {
           htmlTextArea
       }
  &lt;/script&gt;
  </code></pre>