How to get editor instance in vue?

[X-X-X-X-X-X-X-X-X-X-X-X-X]

Initial checklist

• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Affected packages and versions

7.6.2

Link to runnable example

No response

Steps to reproduce

<!-- MilkdownEditor.vue -->
<template>
  <Milkdown ref="milkdown"></Milkdown>
</template>

<script lang="ts" setup>
import { Crepe } from "@milkdown/crepe";
import { Milkdown, useEditor } from "@milkdown/vue";
import "@milkdown/crepe/theme/common/style.css";
import "@milkdown/crepe/theme/frame.css";
import { nextTick, ref } from "vue";

const editor = ref<Crepe>();

useEditor((root) => {
  // I want to use its getMarkdown () method
  const crepe = new Crepe({
    root,
    defaultValue: "# 1325321532",
  });

  editor.value = crepe;
  return crepe;
})

nextTick(() => {
  console.log("->", editor.value?.getMarkdown())
})

</script>

Expected behavior

How can I use the getMarkdown() method correctly?

Actual behavior

editor.value?.getMarkdown() The error was prompted

Runtime

No response

OS

No response

Build and bundle tools

No response

[X-X-X-X-X-X-X-X-X-X-X-X-X]

I have found a solution, but I am more curious about why the above approach is not feasible

import { getMarkdown } from "@milkdown/kit/utils";

let editor = useEditor(
   //...
)

// Use this method after loading is complete
editor.get()?.action(getMarkdown())

[Saul-Mirone]

You'll need the editor to be created before getting the instance. You can use

const crepe = new Crepe({
  root,
  defaultValue: "# 1325321532",
});
crepe.on(listener => {
  listener.mounted(() => {
    editor.value = crepe;
  });
});

But it's not recommended. You should use the return value of useEditor