title: set value of input programatically doesn't refresh component DOM
body: <p>I have an input which is bidden to property message. I have a set button , which I use for changing of input value programmatically. When the button is pressed, value of input is correctly changed to <code>'xxxx'</code>. when I press clean button after that , the input is correctly cleaned but when I repeat pressing set and clean again the input does not get cleared anymore. </p>
  
  <p>Working example is here:</p>
  
  <p><a href="https://codepen.io/dan-ouek/pen/rNBjxRO" rel="nofollow noreferrer">https://codepen.io/dan-ouek/pen/rNBjxRO</a></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div id='root' class="box"&gt;
      &lt;input ref="templateFilter" type='text' id='input' v-model='message'&gt;
      {{ message }}
      &lt;button @click="set"&gt;set&lt;/button&gt;
      &lt;button @click="clean"&gt;clean&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>new Vue({
    el: '#root',
    data: {
      message: 'Hello Vue'
    },
    methods: {
      set: function () {
         let element = this.$refs.templateFilter
         Vue.set(element, 'value', 'xxxx')
    }, clean: function () {
        this.message = ""
    }
  }})
  </code></pre>
  
  <p><strong>Questions:</strong></p>
  
  <p>1) Is it possible to change input programmatically without working with bidden property value? Something like direct DOM manipulation:</p>
  
  <pre><code>let element = document.getElementsByClassName("templateFilter")[0]
  element.value = 'xxxxx'
  </code></pre>
  
  <p>but with proper component refresh?</p>
  
  <p>2) Why is the <code>{{ message }}</code> not refreshed after calling set method?</p>