создаю телегу товаров

composables/useProduct.ts

@@ -1,6 +1,6 @@
 import { useGetProductsDetail, useGetProductsVariationsList } from '~/api/queries/wp'
 
-export const useProduct = (variantId) => {
+export const useProduct = (variantId?: string) => {
   const route = useRoute()
   const currentId = ref<number>(route.params.id ?? variantId)
 

composables/useProductsList.ts

@@ -1,18 +1,24 @@
+import { computed } from 'vue'
 import { useGetProductsList } from '~/api/queries/wp'
 import { useProduct } from '~/composables'
 
 export const useProductsList = () => {
   const { getAttribute } = useProduct()
+
+  // TODO перенести запрос на сервер, на сервере получать id вариантов и делать запросы у useProduct(id),
+  //  получать варианты и вместе со всеми вариантами ренедрить список товаров
   const { data: productData } = useGetProductsList()
 
-  const productCardData = computed(() => productData?.value?.map(product => ({
-    id: product?.id,
-    name: product?.name,
-    price: product?.price,
-    variations: product?.variations,
-    images: product?.images?.slice(0, 5),
-    colors: getAttribute(product?.attributes, 'color')?.options,
-  })) ?? [])
+  const productCardData = computed(() =>
+    productData?.value?.map(product => ({
+      id: product?.id,
+      name: product?.name,
+      price: product?.price,
+      variations: product?.variations,
+      images: product?.images?.slice(0, 5),
+      colors: getAttribute(product?.attributes, 'color')?.options,
+    })) ?? [],
+  )
 
   return {
     productCardData,