this belong to sigma-by-ali

shop-sigmawebstore-issue.js

const Shop = {
	template: /* html */ `
		<main>
			<section class="breadcrumb-area">
				<Breadcrumb :title="title" :itemActive="itemActive"/>
			</section>

			<section class="shop-category-area pt-100px pb-100px">
				<div class="container">
					<div class="row">
						<div class="col-lg-9 order-lg-last col-md-12 order-md-first">
              <ShopBanner />

							<ShopTopArea :options="options" :selected="selected" :getLime="fetchProductsPerLimit" />
							<MobileShopBar />

							<div class="shop-bottom-area">

								<div class="row">
									<div class="col">
										<div class="tab-content">
											<div class="tab-pane fade show active" id="shop-grid">
												<div class="row mb-n-30px">

													<LargeProductCard
														v-for="product in products"
														:key="product"
														:title="product.title"
													/>

												</div>
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>

						<ShopSidebar />

					</div>
				</div>
			</section>
		</main>
	`,

	components: {
		ShopTopArea,
		MobileShopBar,
		ShopSidebar,
		Pagination,
	},
	data() {
		return {
			title: "Shop",
			itemActive: "Shop",
			selected: 10,
			options: [10, 15, 20, 25, 50],
		};
	},

	computed: {
		...Vuex.mapGetters({
			products: "getProductsPerPage",
		}),
	},
	mounted() {
		this.fetchProductsPerPage();
	},
	updadated() {
		this.fetchProductsPerLimit();
	},
	methods: {
		...Vuex.mapActions(["fetchProductsPerPage"]),
		fetchProductsPerLimit() {
			const url = `https://fakestoreapi.com/products?limit=${this.selected}`;
			console.log(`${this.selected}`);
		},
	},
};