title: How to keep carel onInput event in vue.js
body: <p>I want to use <code>contenteditable</code> attribute of HTML for my component to make a area editable.</p>
  
  <p>For this, I use @input directive but it does not work as I expect.
  I expect the caret keeps the end of the entire input value but it moves to the head position.</p>
  
  <h1>Animation Gif Image</h1>
  
  <p><a href="https://i.stack.imgur.com/fL2eg.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fL2eg.gif" alt="enter image description here"></a></p>
  
  <h1>Demo</h1>
  
  <p><a href="https://codesandbox.io/s/oj9p82kvp6" rel="nofollow noreferrer">https://codesandbox.io/s/oj9p82kvp6</a></p>
  
  <h1>Code</h1>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;p contenteditable="true" @input="update"&gt;{{ text }}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'ReadWrite',
              data () {
                  return {
                      text: 'edit here!'
                  }
              },
          methods: {
              update (e) {
                  this.text = e.target.textContent
              }
          }
      }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
      :read-write {
          border: solid 1px #cccccc;
          padding: 5px;
      }
  &lt;/style&gt;
  </code></pre>