title: Caret position in editable div after prop change using Vue.js
body: <p>I'm using Vue.js and have the following code. 
  When I type in <em>div</em> and <em>this.content</em> is updated, the caret is always reset to the beginning. </p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt; 
    &lt;div contenteditable="true"
      v-html="content"
      @input="onContentChange($event)"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    props: ['content'],
    methods: {
      onContentChange: function(e) {
        this.content = e.target.innerHTML;
      },
    }, 
  }
  &lt;/script&gt;
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>How can I preserve the caret's position and update the content?</p>
  
  <p>I've seen some other similar posts, but the solutions there either are not for Vue.js, or don't work in my case, or I might have failed to apply them correctly.</p>