Does CM6 not support vue3.2 (syntax sugar) +ts+vite ?

The code is as follows

in main.ts

import VueCodemirror from 'vue-codemirror';
import 'codemirror/lib/codemirror.css';
...use(VueCodemirror)

in component

<template>
<vue-codemirror
                v-model="state.ruleForm.Content"
                placeholder="Code gose here..."
                :style="{ height: '400px' }"
                :autofocus="true"
                :indent-with-tab="true"
                :tabSize="2"
                :extensions="view.state"
            />
</template>
<script lang="ts" setup>
import VueCodemirror from 'vue-codemirror'

console.log(VueCodemirror)
import 'codemirror/lib/codemirror.css'
import {EditorState} from "@codemirror/state"
import {EditorView, keymap} from "@codemirror/view"
import {defaultKeymap} from "@codemirror/commands"

let startState = EditorState.create({
  doc: "Hello World",
  extensions: [keymap.of(defaultKeymap)]
})

let view = new EditorView({
  state: startState,
  parent: document.body
})
<script/>

error
[Vue warn]: Component is missing template or render function.

@ marijn

EditorState etc. should not be necessary because it is read by vue-codemirror6 side.

It’s a bit old-fashioned, but I think it works.

<template>
  <code-mirror v-model="value" :extensions="extensions" />
</template>

<script>
import { ref, defineComponent } from 'vue';

import CodeMirror from 'vue-codemirror6';
import {defaultKeymap} from "@codemirror/commands"
import {keymap} from "@codemirror/view"

export default defineComponent({
  components: {
    CodeMirror,
  },
  setup() {
    const value = ref('Hello World');
    const extensions =  [keymap.of(defaultKeymap)];

    return { value, extensions };
  },
});
</script>

thank you ~~~