vue3 element-plus but is not defined on instance 问题错在哪？

Question

      <el-dialog
        v-model="dialogVisible"
        title="Tips"
        width="30%"
      >
          <span>This is a message</span>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">Cancel</el-button>
              <el-button type="primary" @click="dialogVisible = false"
                >Confirm</el-button
              >
            </span>
          </template>
      </el-dialog>
<script>
  import { reactive } from 'vue'
  export default {
    name:'AffixButton',
    setup(props, { emit }){
      const data = reactive({
        dialogVisbile: false
      }),
      return { data }
    }
}
</script>
    

**为什么 报错：[Vue warn]: Property "dialogVisible" was accessed during render but is not defined on instance. **
而且我还遇上一次，把 dialogVisbile 类似这种变量拿到 data 外面声明ref()就没事，但这次不行

Answer 1

会不会是这里不应该用v-model="dialogVisible",
用:visible.sync=之类的?

Answer 2

我这个抄的官网的用法，没去研究

Answer 3

v-model 如果不写 ，会报错

Answer 4

额。。。 是你变量名写错了。
const data = reactive({
dialogVisbile: false
}),
这里的变量名，跟上面的对不上