How to call a vue.js function on page load with vue3.0 and antd2.1.2 - vue.js

Question

my vue project with vue3.0.0 and antd 2.1.2
there is a function "getScriptList", it can be executed automatically when placed in Component "mounted" with vue2.0
and I wonder how can it be automatically executed when loading the page with vue3.0?
I placed it in the component "onMounted" ,but it's useless.
this function "getScriptlist" can be executed mannul by
"
<a-button type="primary" #click="getScriptlist()">
ExecuteScriptList
"
my vue page test.vue:
<template>
<a-table
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:columns="columns"
:data-source="dataSource"
bordered
>
<template #operation="{ record }">
<div>
<span >
<a #click="save(record.key)">Delete</a>
<a #click="edit(record.key)">Edit</a>
</span>
</div>
</template>
</a-table>
</template>
<script>
import { defineComponent, reactive, ref,computed,toRefs,onMounted } from 'vue';
import axios from 'axios';
const columns = [
{
title: 'name',
dataIndex: 'name',
},
{
title: 'timestamp',
dataIndex: 'timestamp',
},
{
title: 'location',
dataIndex: 'location',
},
{
title: 'operation',
dataIndex: 'operation',
slots: {
customRender: 'operation',
},
},
];
export default defineComponent({
setup() {
const dataSource = [];
......
function getScriptlist(){
axios.post(
"/api/script/getPid",
qs.stringify({
pid: 5,
}),
{
headers: { "Content-Type": "application/x-www-form-urlencoded" },
})
.then(response=>{
for( var i=0;i<response.data.length;i++)
{
dataSource.push(response.data[i])
}
})
.catch(function(error){
console.log(error);
});
}
onMounted(() =>
{
getScriptlist();
})
return {
getScriptlist,
dataSource,
columns,
.......
.......
};
},
});
</script>
<style>
</style>

Answer 1

Your component life cycle looks fine, but the dataSource should be defined as ref in order to be reactive:
const dataSource = ref([]);
then replace
for( var i=0;i<response.data.length;i++)
{
dataSource.push(response.data[i])
}
with
dataSource.value=response.data