composition-api: ref does not feel reactive on this

[handhikadj]

Asked stackoverflow, forum.vuejs.org, and also vuejs's github but got no answer on those

After I insert some <img> to the contenteditable, I notice the ref() can’t “catch up” the inserted image to the text.

1. Go to: https://codesandbox.io/s/zealous-ardinghelli-b05ph
2. Place cursor to text
3. Click the “INSERT IMAGE BETWEEN TEXT” button
4. Pay attention to the shown ref() below the button

notice on the image above, the shown ref() still counts the <img> as one instead of two like the text

[Léo Flaventin Hauchecorne]

The problem is somehow, I don't get the event in the component. This is definitively not a ref() problem.
But anyway, universal event forwarding is completely "hacky" with vue2 (you'll notice in contenteditable source code I have to manually forward all the events...)

So, Two options :

1. I invite you to try with Vue3 (I stopped further developpment of vue-contenteditable for Vue2, only Vue3 is maintained)

2. If you really can't move to vue 3, then you can use this hack to "patch" your problem :

<div id="app">
    <contenteditable
+++   ref="ce"
      v-model="string"
      tag="p"
      class="text-data"
[...]
--- setup() {
+++ setup(props, {refs}) {
[...]
    const insertImgTag = () => {
      const image =
        '<img class="separator" src="/text-image.png" width="27px" height="19px">';

      let sel, range, node;
      if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
          range = window.getSelection().getRangeAt(0);
          node = range.createContextualFragment(image);
          range.insertNode(node);
        }
      } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(image);
      }
+++   string.value = refs.ce.current_content();
    };

https://codesandbox.io/s/lucid-glitter-8c4qp?file=/src/App.vue