approach

src/components/FetchData.vue

@@ -36,10 +36,10 @@ const $props = defineProps({
 
 const emit = defineEmits(['onFetch']);
 defineExpose({ fetch });
-
+const fetchData = useFetchData({ ...$props });
 onMounted(async () => {
     if ($props.autoLoad) {
-        await useFetchData(...$props).fetch();
+        await fetchData.fetch();
     }
 });
 

src/components/common/VnSelect.vue

@@ -2,7 +2,6 @@
 import { ref, toRefs, computed, watch, h } from 'vue';
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FetchData from 'src/components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 import { useArrayData } from 'src/composables/useArrayData';
 import { useFetchData } from 'src/composables/useFetchData';
@@ -78,18 +77,6 @@ const dataRef = ref(
         fields: $props.fields,
     })
 );
-// const fetchDataComponent = ref(null);
-// fetchDataComponent.value = h(FetchData, {
-//     url: $props.url,
-//     where: $props.where,
-//     limit: $props.limit,
-//     sortBy: $props.sortBy,
-//     fields: $props.fields,
-//     onFetch: (data) => {
-//         setOptions(data); // Tu función para manejar los datos
-//     },
-// });
-//   const dataRef = ref(null);
 const selectValue = computed({
     get() {
         return $props.modelValue;
@@ -108,10 +95,10 @@ const useURL = computed(() => $props.url?.length > 0);
 const arrayData = useURL.value
     ? useArrayData($props.url, {
           url: $props.url,
-          fields: $props.fields,
           where: $props.where,
-          sortBy: $props.sortBy,
           limit: $props.limit,
+          sortBy: $props.sortBy,
+          fields: $props.fields,
       })
     : ref(null);
 onMounted(async () => {

src/composables/useAxios.js

@@ -0,0 +1,21 @@
+import axios from 'axios';
+
+export function useAxios() {
+    const fetch = async (url, filter, params) => {
+        axios.get(url, { params: { ...params, ...filter } });
+    };
+
+    const push = async (url, method = 'PUT', filter, params) => {
+        axios({ url, method, params: { ...params, ...filter } });
+    };
+
+    const pop = async (url, filter, params) => {
+        axios.delete(url, { params: { ...params, ...filter } });
+    };
+
+    return {
+        fetch,
+        push,
+        pop,
+    };
+}