Use codemirror 6.0 and vue-codemirror6.11 to set the class name for the specified character on the specified line

[Yuppiezero]

Describe the issue
I am using version 6.1.1 of vue-codemirror、version 6.21.2 of @codemirror/view、version 6.2.1 of @codemirror/state, @blur Set the class name for the third to fifth characters on the seventh line of the view , But I have tried many methods and failed to get the correct results. Please provide a sample code to help me use it correctly

I have tried many solutions, but they are all mixed versions of 5.0 and 6.0, Bugs such as addMark、deco.addTo is not a function may appear

Here is the code I wrote, I hope it can help me provide a correct example that I can refer to

<template>
 <Codemirror class="codeviewleft" v-model="codeview" :linters="linter" :heightChanged="true" placeholder="Code goes here..." :style="{ height: '96vh' }" :indent-with-tab="true" :tab-size="2" :extensions="extensions" :styleActiveLine="true" @ready="handleReady" @blur="getValue" />
</template>
<script setup>
import { ref,reactive,computed,shallowRef,onMounted } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { json,jsonParseLinter  } from '@codemirror/lang-json' 
import { oneDark } from '@codemirror/theme-one-dark'
import { compare } from 'fast-json-patch'
import { Decoration } from '@codemirror/view'
import { RangeSet, Range,EditorState  } from '@codemirror/state'
const view = ref()
const state = ref()
const codeview =ref('');
const extensions = computed(() => [json(),oneDark])
const handleReady = (payload) => {
  view.value = payload.view
  state.value = payload.state
}
const getValue = (e) => {
const deco = Decoration.mark({
  class: 'highlighted',
  attributes: { style: 'background-color: yellow;' }
});
  const start = view.value.state.doc.line(2).from + 4;
  const end = view.value.state.doc.line(2).from + 7;
  view.value.dispatch({
    effects: view.valueState.transaction(view.value.state).addMark(start, end, { className: 'highlight' })
  });
}
</script>