1<template>
2  <div>
3    <p
4      v-for="(value, index) in content"
5      :id="`content-${index}`"
6      :key="index"
7      contenteditable
8      @input="event => onInput(event, index)"
9      @keyup.delete="onRemove(index)"
10    />
11  </div>
12</template>
13
14<script>
15export default {
16  data() {
17    return {
18      content: [
19        { value: 'paragraph 1' },
20        { value: 'paragraph 2' },
21        { value: 'paragraph 3' },
22      ],
23    };
24  },
25  mounted() {
26    this.updateAllContent();
27  },
28  methods: {
29    onInput(event, index) {
30      const value = event.target.innerText;
31      this.content[index].value = value;
32    },
33    onRemove(index) {
34      if (this.content.length > 1 && this.content[index].value.length === 0) {
35        this.$delete(this.content, index);
36        this.updateAllContent();
37      }
38    },
39    updateAllContent() {
40      this.content.forEach((c, index) => {
41        const el = document.getElementById(`content-${index}`);
42        el.innerText = c.value;
43      });
44    },
45  },
46};
47</script>