title: VueJs contenteditable and paragraphs
body: <p>I'm trying to make a reactive <code>contenteditable</code> <code>div</code> with paragraphs, based on a String array.</p>
  <p>Here is my code.</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>Vue.createApp({
    data() {
      return {
        content: ["Paragraph 1", "Paragraph 2"],
      }
    },
    methods: {
      change(e) {
        this.content = [...e.target.children].map(c =&gt; c.innerText);
      }
    }
  }).mount('#app');</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.editor {
    outline: 2px solid blue;
    border-radius: 2px;
    min-width: 50px;
    min-height: 1em;
  }
  
  .editor&gt;p {
    background: #ddd;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.global.prod.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;div :contenteditable @blur="change" ref="editor" class="editor"&gt;
      &lt;p v-for="(part, id) in content" :key="id"&gt;
        {{ part }}
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As you may experience if you try it: as soon as the <code>change</code> method is called, the content of the editable div is concatenated with the content of the data instead of being all replaced like I would like it to.</p>
  <p>How could I do to get the right behaviour ?<br />
  Bonus question : could I manage to make it synchronous, like with the <code>input</code> event without having to struggle with the cursor position ?</p>