title: Vue.js v-html contenteditable prevent dom refresh to keep cursor / caret from jumping
body: <p>For reference I'm using Vue 2.0, Vuex, and Firebase.</p>
  <p>I am building a contenteditable component using the v-html binding to render the innerHTML. The data is updated onKeyUp. Whenever the data is updated the DOM element refreshes with the &quot;new&quot; data, causing the caret / cursor to jump back to the beginning of the contenteditable div.</p>
  <p>I have looked into Rangy and a few other stackoverflow solutions, but I feel the easiest solution would be to unbind the DOM element from the data refresh. I would like for the data to still update in firebase but not result in an element refresh.</p>
  <p>Is there a way for me to still use v-html but prevent the DOM element from refreshing with the data? Or is there another way to render the HTML without auto binding?</p>
  <p><strong>Edit: 11/18/16</strong></p>
  <p>So I’ve continued to work on a fix for this. Here are my current ideas.</p>
  <ol>
  <li>Use a <a href="https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram" rel="nofollow noreferrer">lifecycle hook</a> and stop component re-render. I’ve looked through the Vue docs but can’t seem to find something to stop the cycle.</li>
  <li>Use something like <a href="https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate" rel="nofollow noreferrer">React’s “componentShouldRender”</a>. Again, it doesn’t look like Vue.js has a comparable method in the lifecycle.</li>
  </ol>
  <p>If anybody knows of any methods to end the lifecycle, stop re-render, or a way to get React's &quot;componentShouldRender&quot; functionality out of vue, that should be enough fix this issue.</p>
  <p>-</p>
  <p><strong>Update: 11/29/16</strong></p>
  <p>This update is a little late coming. I've logged a <a href="https://github.com/vuejs/vue/issues/4255" rel="nofollow noreferrer">feature request</a> with Vue on Github.</p>
  <p>There are a few JSFiddles in the issue discussion which could provide a <a href="https://jsfiddle.net/9upfskLy/" rel="nofollow noreferrer">potential solution</a>. However none of them I believe qualifies as a complete solution. The only promising one has recently yielded <a href="https://stackoverflow.com/questions/40877280/vue-js-force-re-render-of-component-which-contains-v-once-directive">more issues</a>.</p>
  <p>All of these problems would be non-issues with the addition of a <code>componentShouldRender</code> lifecycle hook. I will continue to look for a complete solution</p>