title: Vue JS v-model value update not working for on-click events
body: <p>I have a application where I'm updating value of <code>input</code> element on button click.</p>
  
  <p>I'm using Vue JS <code>v-model</code> for data binding.</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div id="app"&gt;
  &lt;div&gt;{{ response }}&lt;/div&gt; &lt;br&gt;
   &lt;input type="text" v-model="response.ruleName" value="" placeholder="" class="editing"&gt;
   &lt;button @click="myalert"&gt;Click me&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS :</p>
  
  <pre><code>var response = {
      ruleName: "ruleJohn",
  }
  new Vue({
    el: "#app",
    data () {
          return {
              response
          }
    },
    methods: {
      myalert: function(e) {
        document.querySelector('.editing').value = e.target.innerText;
          },
  
    }
  })
  </code></pre>
  
  <p>Here is working fiddle : <a href="https://jsfiddle.net/38Lj971g/" rel="nofollow noreferrer">https://jsfiddle.net/38Lj971g/</a></p>
  
  <p>Now, When I try to edit input value with keyboard, response values does change.</p>
  
  <p>When I try to click button, Though input value changes but response doesn't.</p>
  
  <p>How to deal with <code>v-model</code> for such on-click data updates ?</p>