I've frequently encountered this data fetching pattern in Vue applications and found it convenient initially, but now I view it as an anti-pattern. I'd like to confirm my concerns.

If data like products is used only in one specific page or a smart component there's no need for a global store in the first place. However that's not my primary concern here.

In a large application with 10–50 such composables that each fetch and manage their own data throughout the app, what is the impact on memory usage? I guess this data is not garbage collected when the user navigates away from a page or component unmounts potentially causing the browser's memory usage to creep up over time.

// composable/useProducts.ts

const products = ref([])
const isLoading = ref(false)
  
const useProducts = () => {
  const fetchProducts = async () => {
    try {
      isLoading.value = true
      const response = await fetch('https://api.example.com/products')
      // parsing response and extracting data
      products.value = data
    } catch (error) {
      // generic error handling
    } finally {
      isLoading.value = false
    }
  }

  return { 
    products,
    isLoading,
    fetchProducts 
  }
}