vue3引用element-plus中的progress组件不显示

今天在搞一个文件上传增加进度条的效果，我引用了element-plus中的progress组件，在调试的过程中发现div包裹的progressText文字可以正常展示，但是进度条一直不显示，源代码如下：

<div v-if="elProgress" class="up_progress">
　　<div class="text_con">{{progressText}}</div>
　　<el-progress :percentage="progressPercent" :text-inside="true" :stroke-width="16" status="success" />
</div>

奇怪了，不就直接引用就可以展示么，于是排查原因：

1. 一开始我先看全局注入的element-plus有没有问题，发现正常，全局注入的

2.我看网友有的说，如果包裹div的布局设置了flex就会不显示，我看我的div都没设置flex，排除

3.我把el-progress组件尝试在其他页面引入，是可以正常展示的，我又单独把el-progress组件放在当前页面，里面html代码只有这个组件，还是出不来

4.屏蔽掉当前页面的所有ts代码，可以正常展示，那说明是ts代码里定义有问题，但具体一看也没看不到具体是哪个变量的问题，我就先把代码全部注释掉，然后挨个儿段落式的把代码放开，终于定义到了一个神奇的地方，代码如下：

const elProgress = ref(false);这里是我控制整个div是否展示的变量，我理解不应该干扰到el-progress组件啊，但确实就是它导致的，并且看着这个变量的命名跟el-progress的驼峰式也是一致的，于是我更换了变量名就好了，透，尴尬的一匹，还有这坑，在此搭个桥，看看有没有类似采坑的同胞们，哈哈哈！！！