vue3使用<script setup>获取ref的值为什么是null?

 <el-dialog ref="dialogEditMenuForm" draggable :title="editMenuFormTitle+'权限'"         append-to-body v-model="treeDialogShow" width="40%">
    <el-tree
        :data="tableDataMenus"
        ref="tableDataMenusRef"
        show-checkbox
        node-key="id"
        :default-checked-keys=cheackKeys
        :props="defaultProps"
        @check-change="treeChange"
      />

        <template #footer>
        <div class="dialog-footer">
          <el-button @click="treeDialogShow = false">取 消</el-button>
          <el-button type="primary" @click="treeEditMeny()">确 定</el-button>
        </div>
    </template>
  </el-dialog>
<script setup>
import { onMounted, ref } from "vue";
const tableDataMenusRef=(null)
onMounted(()=>{
setTimeout(()=>{
  console.log("ref",tableDataMenusRef.value);
},5000)
 ; 
})
</script>