Vue3如何在hook中执行异步函数并同步返回响应式数据

import { ref, Ref } from 'vue';

import { listCountry } from '@/api/mainData/country';

type MainDataType = 'countryList' | 'areaList';

interface Methods {
  countryList: () => Promise<void>;
  areaList: () => Promise<void>;
}

export default (mainDataType: MainDataType): Ref<any[]> => {
  const result = ref<any[]>([]);

  if (!mainDataType) return result;
  // 获取国家列表
  const countryList = async () => {
    const language = useStorage('language', 'en_US');
    const languageField = language.value === 'en_US' ? 'enName' : 'zhName';
    const res = await listCountry();
    result.value = (res?.data ?? []).map((item: any) => ({
      ...item,
      key: item.id,
      label: item[languageField]
    }));
  };

  // 获取区域列表
  const areaList = async () => {};

  const methods: Methods = {
    countryList,
    areaList
  };

  methods?.[mainDataType]?.();

  return result;
};