perf: emit options from VnSelectProvince

src/components/CreateNewPostcodeForm.vue

@@ -25,7 +25,6 @@ const townsFetchDataRef = ref(false);
 const townFilter = ref({});
 
 const countriesRef = ref(false);
-const provincesFetchDataRef = ref(false);
 const provincesOptions = ref([]);
 const townsOptions = ref([]);
 const town = ref({});
@@ -71,9 +70,6 @@ async function setProvince(id, data) {
     await fetchTowns();
 }
 async function onProvinceCreated(data) {
-    await provincesFetchDataRef.value.fetch({
-        where: { countryFk: postcodeFormData.countryFk },
-    });
     postcodeFormData.provinceFk = data.id;
 }
 function provinceByCountry(countryFk = postcodeFormData.countryFk) {
@@ -92,7 +88,6 @@ function setTown(newTown, data) {
     data.countryFk = newTown?.province?.countryFk ?? newTown;
 }
 async function onCityCreated(newTown, formData) {
-    await provincesFetchDataRef.value.fetch();
     newTown.province = provincesOptions.value.find(
         (province) => province.id === newTown.provinceFk
     );
@@ -125,14 +120,6 @@ async function filterTowns(name) {
 </script>
 
 <template>
-    <FetchData
-        ref="provincesFetchDataRef"
-        @on-fetch="handleProvinces"
-        :sort-by="['name ASC']"
-        :limit="30"
-        auto-load
-        url="Provinces/location"
-    />
     <FetchData
         ref="townsFetchDataRef"
         :sort-by="['name ASC']"
@@ -205,6 +192,11 @@ async function filterTowns(name) {
                     :country-fk="data.countryFk"
                     :province-selected="data.provinceFk"
                     @update:model-value="(value) => setProvince(value, data)"
+                    @update:options="
+                        (data) => {
+                            provincesOptions = data;
+                        }
+                    "
                     v-model="data.provinceFk"
                     @on-province-created="onProvinceCreated"
                     required

src/components/VnSelectProvince.vue

@@ -7,7 +7,7 @@ import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import FetchData from 'components/FetchData.vue';
 import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
 
-const emit = defineEmits(['onProvinceCreated', 'onProvinceFetched']);
+const emit = defineEmits(['onProvinceCreated', 'onProvinceFetched', 'update:options']);
 const $props = defineProps({
     countryFk: {
         type: Number,
@@ -41,6 +41,7 @@ async function onProvinceCreated(_, data) {
 }
 async function handleProvinces(data) {
     provincesOptions.value = data;
+    emit('update:options', data);
 }
 
 watch(