el-dialog在vue3项目中不显示问题

刚开始的代码:

<template>

<div>

<el-button type="primary" @click="showMessage()">新增 +</el-button>

<el-dialog v-model="dialogVisible" title="Warning" width="30%" center>

    <span>

      It should be noted that the content will not be aligned in center by

      default

    </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>

</div>

</template>

<script setup>

let dialogVisible=false;

const showMessage=()=>{

  console.log("只有我才能行使让对话框出现的权利");

  dialogVisible = true

  console.log("我出现啦",dialogVisible);

}

</script>

       本人用的是vue3框架,相应的用的elementplus. 在做某项目的时候需要用到点击某按钮出现对话框,在之前vue2项目中用到的v-show,v-if都能出现,但在这次开发中,始终不出现,检查了好几遍代码都觉得没问题,最后通过一位博主的博客发现,改变是否显示的参数需要定义在data里.部分代码如下:

export default{

  data(){

    return{

      dialogVisible:false

    }

  },

  methods:{

    showMessage(){

      this.dialogVisible=true

    }

  }

}

      虽然最后解决了问题,但是还是不清楚为什么要这样.......