Vue3 双向绑定报错

用到的组件：el-drawer

父组件：

<template>
  <div>
    <el-button
        type="primary"
        @click="openDetailsDrawer">
      View Details
    </el-button>
    <p>{{ myDrawer.visible }}</p>

    <details-drawer
        v-model:visible="myDrawer.visible"
        :payload="myDrawer.payload"/>
  </div>
</template>

<script lang="ts" setup>
import {reactive, nextTick, ref} from 'vue'
import DetailsDrawer from './components/DetailsDrawer/index.vue'

const myDrawer = reactive({
  visible: false,
  payload: {
    title: '',
    content: ''
  }
})

const openDetailsDrawer = () => {
  myDrawer.visible = true
  nextTick(() => {
    myDrawer.payload.title = '标题' + new Date().getTime()
    myDrawer.payload.content = '内容' + new Date().getTime()
  })
}
</script>

子组件：

<template>
  <el-drawer
      v-model="visible"
      :title="payload.title"
      :before-close="updateVisible">
    <template #default>
      {{ payload.content }}
      <el-button @click="handleClose">Close</el-button>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import {defineProps, defineEmits} from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  payload: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const emits = defineEmits<{
  (e: 'update:visible', visible: boolean): void
}>()

const updateVisible = () => {
  emits('update:visible', false)
}
</script>

问题
不论我在子组件<el-drawser/>的

ReferenceError: visible is not defined