代码拉取完成，页面将自动刷新
#问题描述：
columns使用静态赋值，或者通过props从组件外部入传入的方式初始化可以正常显示选项。在组件内部调用接口数据赋值给columns，则无法显示选项。目前我是通过从父组件传入columns的方式解决的，但这种方式对封装组件不是很友好。
如下代码所示，方法二可以正常显示选项，但是使用方法一无法显示选项，并且把方法二代码移入showPicker方法中也无法显示选项。
自定义组件代码
<template>
<uv-input v-model="selected" border="none" disabled @click="showPicker" placeholder="请选择xxx"></uv-input>
<uv-picker ref="pickerRef" :columns="columns" @confirm="confirm"
key-name="name" :loading="loading" title="选择xxx"></uv-picker>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {$get} from "@/common/util/http";
const emits = defineEmits(['update:modelValue'])
const props = defineProps({
modelValue: {type: String},
})
let pickerRef = ref()
const columns = ref([])
let selected = ref('')
let loading = ref(false)
//方法一
function load() {
$get('/api/getXXX')
.then((res: any) => {
//data是一个数组
const {data} = res;
columns.value.push(data);
})
}
load();
//方法二
// columns.value.push([
// {name: 'Item1', id: '1'},
// {name: 'Item2', id: '2'},
// ])
function showPicker() {
pickerRef.value.open()
}
</script>
<style scoped lang="scss">
</style>