Quill offset error in vue 3

[chris-chan-dev]

Has anybody encountered this offset error for quill v2 integrated in vue 3 with composition api? It persists due to vue ref but I need the editor instance to be reactive as it would be passed to custom EditorToolbar.

quill.js?v=aafeac6a:12568 Uncaught TypeError: Cannot read properties of null (reading 'offset')
at quill.js?v=aafeac6a:12568:26
at Array.map ()
at Selection.normalizedToRange (quill.js?v=aafeac6a:12565:31)
at Selection.getRange (quill.js?v=aafeac6a:12554:25)
at Selection.update (quill.js?v=aafeac6a:12689:43)
at quill.js?v=aafeac6a:12450:12
at quill.js?v=aafeac6a:12336:9
at Array.forEach ()
at Emitter.handleDOM (quill.js?v=aafeac6a:12330:43)
at quill.js?v=aafeac6a:12308:23

// Editor.vue

    <template>
       <div class="editor-wrapper">
               <EditorToolbar
                   :editor="editor"
               />
               <div
                   ref="uid"
                  class="editor-container"
              />
       </div>
    </template>
    
    <script>
       import { ref, onMounted } from 'vue';
       import Quill from 'quill';
       import { useUniqueID } from 'source/composables/useUniqueID';
       
       import EditorToolbar from 'source/components/editor/EditorToolbar.vue';
   
      export default {
        name: 'Editor',
        components: { EditorToolbar },
        props: {
           modelValue: {
               type: Object,
               default: () => ({ ops: [] })
          },
          disabled: {
             type: Boolean,
             default: true
           },
           placeholder: {
              type: String,
              default: ''
            }
        },
        emits: ['update:modelValue'],
        
        setup(props, { emit }) {
            const { uid } = useUniqueID('Editor');
            const editor = ref(null);
            
            onMounted(() => {
                 const config = {
                    debug: 'info',
                    placeholder: props.placeholder,
                    readOnly: props.disabled,
                    theme: 'snow',
                    modules: {
                        toolbar: '#toolbar'
                    }
                };
                editor.value = new Quill(uid.value, config);
                // Initialize the editor with the initial value (if any)
                if (props.modelValue) {
                    editor.value.setContents(props.modelValue);
                }

                if (props.disabled) {
                    editor.value.disable();
                }
                editor.value.on('text-change', () => {
                        if (!editor.value) return;
                        const contents = editor.value.getContents();
                        emit('update:modelValue', contents); // Emit contents to the parent
                 });
                 return {
                    uid,
                    editor
                  }
            });
      <style lang="scss" scoped>
          @import 'quill/dist/quill.core.css';
      </style>

[chris-chan-dev]

Had resolved it using shallowRef.