Multi-Condition Dynamic Array Filtering Inside Computed Properties

import { ref, computed } from 'vue';
 
export function useProductCatalog(initialProducts) {
  const products = ref(initialProducts);
  const searchQuery = ref('');
  const selectedTags = ref([]);
  const maxPrice = ref(Infinity);
 
  const filteredProducts = computed(() => {
    const query = searchQuery.value.trim().toLowerCase();
    const requiredTags = selectedTags.value;
 
    return products.value.filter(item => {
      const matchesName = !query || item.name.toLowerCase().includes(query);
      const matchesPrice = item.price <= maxPrice.value;
      const matchesTags = requiredTags.length === 0 ||
        requiredTags.every(tag => item.tags?.includes(tag));
 
      return matchesName && matchesPrice && matchesTags;
    });
  });
 
  return { searchQuery, selectedTags, maxPrice, filteredProducts };
}