title: Input cursor jumps to end of input field on input event
body: <p>I’m trying to convert the user input to uppercase on input event</p>
  
  <p>so, whenever I type a key in the input field I’m facing the following issues</p>
  
  <ol>
  <li>The cursor jumps to end of the input value when user types in the middle.</li>
  <li>the last typed character (not the last character) is not converting to uppercase.</li>
  </ol>
  
  <p>Here is the link to JS fiddle <a href="https://jsfiddle.net/aeL051od/" rel="noreferrer">https://jsfiddle.net/aeL051od/</a> to reproduce the issue</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: "#app",
    data() {
      return {
        input: null
      }
    },
    methods: {
      handleInput(e) {
        this.input = e.target.value ?
          e.target.value.toString().toUpperCase() :
          e.target.value;
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;input type="text" v-model="input" @input="handleInput"&gt; {{ input }}
    &lt;!-- {{ input }} is just for reference --&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>