组件 uni-popup Cannot read property 'open' of undefined

新建一个uniapp 项目 引用系统组件 uni-popup 竟然报错，项目是vue2 版本，真是离谱 ，完全是官方使用，没别的了 报错信息是

TypeError: Cannot read property 'open' of undefined  
    at VueComponent.open (index.vue:21)  
    at index.js:2147  
    at Array.forEach (<anonymous>)  
    at index.js:2102  
    at Array.forEach (<anonymous>)  
    at li.handleEvent [as __e] (index.js:2092)  
    at Object.o.safeCallback (WASubContext.js?t=wechat&s=1758588055695&v=3.10.1:1)  
    at WASubContext.js?t=wechat&s=1758588055695&v=3.10.1:1  
    at wn (WASubContext.js?t=wechat&s=1758588055695&v=3.10.1:1)  
    at WASubContext.js?t=wechat&s=1758588055695&v=3.10.1:1(env: Windows,mp,1.06.2412050; lib: 3.10.1)

页面代码是

<template>
<view>
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup>
</view>
</template>

<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {

    },  
    methods: {  
        open() {  
            // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']  
            this.$refs.popup.open()  
        }  

    }  
}  

</script>

<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.logo {  
    height: 200rpx;  
    width: 200rpx;  
    margin-top: 200rpx;  
    margin-left: auto;  
    margin-right: auto;  
    margin-bottom: 50rpx;  
}  

.text-area {  
    display: flex;  
    justify-content: center;  
}  

.title {  
    font-size: 36rpx;  
    color: #8f8f94;  
}  

</style>