Bidirectional binding not effective <CodeEdit v-model:code="code" />

[xjie0626]

Describe the bug

When I write the binding in the parent component, using concise mode is not effective(). It is not a problem to write it in this way in other components. Is there a problem with where I wrote it? Please help me take a look, thank you!

this is my parent component

<template>
  <div>
    <el-button @click="console.log(code)">check1</el-button>
    <CodeEdit v-model:code="code" />
    // there is no problem using the following method
    <!-- <CodeEdit
      :code="code"
      @update:value="
        newVal => {
          code = newVal
        }
      "
    /> -->
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import CodeEdit from "./CodeEdit.vue"
const code = ref("")
</script>

this is my subcomponents

<template>
  <div>
    <el-button @click="check2">queding</el-button>
    <codemirror
      v-model="valueCode"
      class="code-content"
      @ready="handleReady"
      :style="{ height }"
      placeholder="Please enter the code."
      :extensions="extensions"
      :autofocus="config.autofocus"
      :disabled="config.disabled"
      :indent-with-tab="config.indentWithTab"
      :tab-size="config.tabSize"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue"
import { Codemirror } from "vue-codemirror"
import { StreamLanguage } from "@codemirror/language"
import { javascript } from "@codemirror/lang-javascript"
import { shell } from "@codemirror/legacy-modes/mode/shell"
const view = ref<any>()
const handleReady = (payload: { view: any }) => {
  view.value = payload.view
}
interface CodeEditorProps {
  code: string
  placeholder?: string
  autofocus?: boolean
  disabled?: boolean
  language?: string
  height?: string
  tabSize?: number
  theme?: string
}
const props = withDefaults(defineProps<CodeEditorProps>(), {
  placeholder: "please input...",
  disabled: false,
  indentWithTab: true,
  tabSize: 4,
  autofocus: true,
  height: "500px",
  language: "javascript",
  theme: ""
})
const config = reactive<any>({
  placeholder: props.placeholder,
  disabled: props.disabled,
  tabSize: props.tabSize,
  autofocus: props.autofocus,
  height: props.height,
  indentWithTab: true
})
const extensions = computed(() => {
  const result = []
  if (props.language) {
    result.push(props.language === "javascript" ? javascript() : StreamLanguage.define(shell))
  }
  if (props.theme) {
    result.push([])
  }
  return result
})
const emits = defineEmits<{
  "update:value": [value: string]
}>()
const valueCode = computed({
  get() {
    return props.code
  },
  set(val: string) {
    console.log(val)
    emits("update:value", val)
  }
})
const check2 = () => {
  console.log(valueCode.value)
  console.log(props)
}
</script>
<style lang="scss" scoped>
.code-content {
  :deep(.cm-editor) {
    height: 200px;
    background-color: #fbfbfb;
    border: 1px solid #e5e6eb;
    &.cm-focused {
      outline: none;
    }
  }
}
</style>

Reproduction

.

System Info

win11,Google Chrome,"vue-codemirror": "^6.1.1"

Used Package Manager

pnpm

Validations

• Read the the documentation in detail.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.