Passing in html values and editing them with tiptap/vue-3

Question

In a different component that sends a IBlog typescript interface to the Pinia store which is consumed by a component that is using import { EditorContent, useEditor } from '@tiptap/vue-3'; tiptap.

The HTML is rendering in the component with console.log, but is not in the Tiptap editor?

<template>
<div v-if="editor">
    <div class="flex items-center justify-center p-4 ">
        <input
            v-model="blog.title"
            type="text"
            placeholder="Enter blog title"
            class="border rounded-md p-2"
        />
    </div>
  <div>
  <div class="tiptap ">
      <editor-content :editor="editor" class="border-2" />
  </div>
</template>

<script setup lang="ts">
import StarterKit from '@tiptap/starter-kit';
import { EditorContent, useEditor } from '@tiptap/vue-3';
import { api } from "../../lib/api";
import {onBeforeMount, onMounted, ref} from "vue";
import { useStore } from "../../store/store";

const store = useStore();

let blogContent = ref('');
let blog = store.blog || {
  objectId: '',
  id: '',
  title: '',
  content: '',
  type: '',
  author: '',
  picture: '',
  date: '',
  tags: [],
  approved: false,
};

const editor = useEditor({
  content: blogContent,
  extensions: [
    StarterKit,
  ],
});
console.log("Is Editor Ready:", editor.value);


onBeforeMount(() => {
  if (store.blog) {
    blog = store.blog;
    tags.value = store.blog?.tags;
    blogContent.value = store.blog?.content || "";
  }
})

onMounted(() => {
  console.log(blogContent.value);
});
</script>

How can I get the <editor-content :editor="editor" class="border-2" /> to render the HTML so I can edit it?