I have a very basic tiptap editor setup in VueJS, something like this:

// TipTap.vue

<template>
  <div>
    <editor-content :editor="editor" spellcheck="false" />
  </div>
</template>
<script setup>
// Imports
const editor = ref(null)

onMounted(() => {
  editor.value = new Editor({
    editable: true,
    extensions: [
      StarterKit
    ],
    content: props.modelValue,
  })
})
</script>

And it works fine, but when I want to centralize my state in a Pinia store so that I'd be able to check editors state or call its' methods from different components, like so:

// editorStore.js

export const useEditorStore = defineStore('editor', () => {
  const editorRef = ref(null)
  const textEditorContent = ref('')

  const initializeEditor = () => {
    editorRef.value = new Editor({
      editable: true,
      extensions: [
        StarterKit
      ],
      content: textEditorContent.value,
    })
  }
})

<template>
  <div>
    <editor-content :editor="editor" spellcheck="false" />
  </div>
</template>
<script setup>

const editorStore = useEditorStore()
const editor = editorStore.editorRef
onMounted(() => {
  editorStore.initializeEditor()
})

It either breaks the reactivity

• when using const editor = shallowRef(null) in the store

Or creates too much recursion

• when using const editor = ref(null)

I feel like I am missing crucial logic when it comes to reactivity/state management here. What could be the problem?