VueJs contenteditable and paragraphs

Question

I'm trying to make a reactive contenteditable div with paragraphs, based on a String array.

Here is my code.

Vue.createApp({
  data() {
    return {
      content: ["Paragraph 1", "Paragraph 2"],
    }
  },
  methods: {
    change(e) {
      this.content = [...e.target.children].map(c => c.innerText);
    }
  }
}).mount('#app');

.editor {
  outline: 2px solid blue;
  border-radius: 2px;
  min-width: 50px;
  min-height: 1em;
}

.editor>p {
  background: #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.global.prod.min.js"></script>

<div id="app">
  <div :contenteditable @blur="change" ref="editor" class="editor">
    <p v-for="(part, id) in content" :key="id">
      {{ part }}
    </p>
  </div>
</div>

As you may experience if you try it: as soon as the change 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.

How could I do to get the right behaviour ?
Bonus question : could I manage to make it synchronous, like with the input event without having to struggle with the cursor position ?