refactor: simplify data fetching logic in VnCard.vue

src/components/common/VnCard.vue

@@ -26,11 +26,7 @@ const route = useRoute();
 const stateStore = useStateStore();
 const router = useRouter();
 const entityId = computed(() => props.id || route?.params?.id);
-const arrayData = useArrayData(props.dataKey, {
-    url: props.url,
-    userFilter: props.filter,
-    oneRecord: true,
-});
+let arrayData = getArrayData();
 
 onBeforeRouteLeave(() => {
     stateStore.cardDescriptorChangeValue(null);
@@ -61,16 +57,31 @@ onBeforeRouteUpdate(async (to, from) => {
 });
 
 async function fetch(id, append = false) {
-    const regex = /\/(\d+)/;
     if (props.idInWhere) arrayData.store.filter.where = { id };
-    else if (!regex.test(props.url)) arrayData.store.url = `${props.url}/${id}`;
-    else arrayData.store.url = props.url.replace(regex, `/${id}`);
+    else {
+        arrayData = getArrayData();
+    }
     await arrayData.fetch({ append, updateRouter: false });
     emit('onFetch', arrayData.store.data);
 }
 function hasRouteParam(params, valueToCheck = ':addressId') {
     return Object.values(params).includes(valueToCheck);
 }
+
+function formatUrl(id) {
+    const newId = id || entityId.value;
+    const regex = /\/(\d+)/;
+    if (!regex.test(props.url)) return `${props.url}/${newId}`;
+    return props.url.replace(regex, `/${newId}`);
+}
+
+function getArrayData() {
+    return useArrayData(props.dataKey, {
+        url: formatUrl(),
+        userFilter: props.filter,
+        oneRecord: true,
+    });
+}
 </script>
 <template>
     <template v-if="visual">