Vue3 路由查詢參數更新後，執行更新方法

import { ref, defineComponent, watch,getCurrentInstance  } from "vue";
import { useRoute } from 'vue-router';
export default defineComponent({
    setup() {
        const table = ref({
            key: 'spec_id',
            footer: "Foots",
            cnName: '',
            name: '',
            url: "//",
            sortName: ""
        });
        const editFormFields = ref({});
        const editFormOptions = ref([]);
        const searchFormFields = ref({ "goods_no": "", "goods_name": "" });
        const searchFormOptions = ref([[]]);
        const columns = ref([]);
        const detail = ref({
            cnName: "#detailCnName",
            table: "#detailTable",
            columns: [],
            sortName: "",
            key: ""
        });
        const route = useRoute();
        const instance = getCurrentInstance();
        watch(
            () => route.query,
            (newQuery, oldQuery) => {
                // 當查詢參數發生變化時執行相應的邏輯
               
                instance.refs.grid.refresh();
                // 在這裏可以根據新的查詢參數進行相應的處理
            }
        );

        return {
            table,
            extend,
            editFormFields,
            editFormOptions,
            searchFormFields,
            searchFormOptions,
            columns,
            detail,
        };
    },
});
</script>