title: How to change a Vue.js data value within a method called by a DOM event?
body: <p>Disclaimer: I know that there is data biding in Vue.js.</p>
  
  <p>So I have this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  
      &lt;div id="app"&gt;
          &lt;input @input="update"&gt;
      &lt;/div&gt;
  
      &lt;script src="https://unpkg.com/vue@2.1.10/dist/vue.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
          new Vue({
  
              el: '#app',
  
              data: {
  
                  info: '',
  
              },
  
              methods: {
  
                  update: function (event) {
  
                      value = event.target.value;
  
                      this.info = value;
                      console.log(value);
  
                  }
  
              }
  
          });
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>An input that will trigger a method called <code>update</code> every time the user type in something. The idea here is to change the value of the data property called <code>info</code> with the value typed in the input by the user.</p>
  
  <p>But, for some reason, the value of the data attribute doesn't change. The current input value is printed normally in the console with the <code>console.log(value)</code> call every time the <code>update</code> method is fired, but nothing changes to the <code>info</code> attribute.</p>
  
  <p>So, how to make this work?</p>