<template>
  <div>
    <h1>fooooo</h1>
    products: #{{ products }}#
    product: #{{ product }}#
  </div>
</template>
<script>
import { productGetters, useProduct } from '@vue-storefront/zincplatformfrontend';
import { computed, useRoute } from '@nuxtjs/composition-api';

export default {
  setup() {
    const route = useRoute();
    const { products } = useProduct('products');

    const product = computed(() => productGetters.getFiltered(products.value, { master: true, attributes: route.value.query })[0]);

    return {
      product,
      products
    };
  }
};
</script>

<template>
  <div>
    <h1>fooooo</h1>
    products: #{{ products }}#
    product: #{{ product }}#
  </div>
</template>
<script>
import { productGetters, useProduct } from '@vue-storefront/zincplatformfrontend';
import { computed, useRoute } from '@nuxtjs/composition-api';

export default {
  setup() {
    const route = useRoute();
    const { products } = useProduct('products');

    const product = computed(() => productGetters.getFiltered(products.value, { master: true, attributes: route.value.query })[0]);

    return {
      product,
      products
    };
  }
};
</script>