uni-data-select 不生效

<template>
<view class="container">
<view class="info-item">
<text class="label">MBTI</text>
<view class="value">
<uni-data-select v-model="mbti" :localdata="mbtiOptions" placeholder="请选择MBTI类型" />
</view>
</view>
</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const mbti = ref('');
const mbtiOptions = [
{ value: 'INTJ', text: 'INTJ-建筑师' },
{ value: 'INTP', text: 'INTP-逻辑学家' },
{ value: 'ENTJ', text: 'ENTJ-指挥官' },
{ value: 'ENTP', text: 'ENTP-辩论家' },
{ value: 'INFJ', text: 'INFJ-提倡者' },
{ value: 'INFP', text: 'INFP-调停者' },
{ value: 'ENFJ', text: 'ENFJ-主人公' },
{ value: 'ENFP', text: 'ENFP-竞选者' },
{ value: 'ISTJ', text: 'ISTJ-物流师' },
{ value: 'ISFJ', text: 'ISFJ-守卫者' },
{ value: 'ESTJ', text: 'ESTJ-总经理' },
{ value: 'ESFJ', text: 'ESFJ-执政官' },
{ value: 'ISTP', text: 'ISTP-鉴赏家' },
{ value: 'ISFP', text: 'ISFP-探险家' },
{ value: 'ESTP', text: 'ESTP-企业家' },
{ value: 'ESFP', text: 'ESFP-表演者' }
];
</script>

<style>
page {
height: 100%;
}

.container {  
    height: 100%;  
    display: flex;  
    flex-direction: column;  
    background-color: #f5f5f5;  
}  

:deep(.uni-data-select) {  
    border: none;  
}  

:deep(.uni-data-select .uni-select__input-box) {  
    background-color: #f5f5f5;  
    border-radius: 8px;  
    height: 80rpx;  
    border: none;  
}  

:deep(.uni-number-box) {  
    background-color: #f5f5f5;  
    height: 80rpx;  
    width: 240rpx;  
}  

:deep(.uni-number-box__value) {  
    background-color: #ffffff;  
}  

</style>

上面是test.uvue的代码，设置了uni-data-select，但是点击没有任何效果，也没有报错，请问是怎么回事呢。uni_modules也引用了