I want to show Filtered products in Vue Js based upon the selection made by user in 3 diffrent parameters from All products - vue.js

Question

This is step 1 which will appear & user will select one category from this
<div class="w-100 text-center step-div py-5">
<h3>step 1 </h3>
<p class="step-p"> for Men, Women or Unisex</p>
<div class="container">
<div id="categorytype" class="responsive">
<div v-for="(type,typeIndex) in types" class="filter-slider-div col-4 p-5" #click= "addfiltertype(typeIndex,type.typeslug)">
<img :src="type.typeImage" class="filter-img mx-auto">
<p>{{type.typename}}</p>
</div>
</div>
</div>
</div>
Out put will be something like Men,Women,Both,Kids etc & On click It is saving slug of this type. which I'll share below,
<h3>step 2 </h3>
<p class="step-p">Select your case size</p>
<div class="container">
<div id="categorydials" class="responsive">
<div v-for="(dial,dialIndex) in dials" class="filter-slider-div col-4 p-5" #click= "addfilterdial(dialIndex,dial.dialname)">
<img :src="dial.dialimage" class="filter-img mx-auto">
<p>{{dial.dialname}}mm</p>
</div>
</div>
</div>
In step 2 User will select Size it can be anything,
<h3>step 3 </h3>
<p class="step-p">Select your case colour</p>
<div class="container">
<div id="categorycolors" class="responsive">
<div v-for="(color,colorIndex) in colors" class="filter-slider-div p-5" #click= "addfiltercolor(colorIndex,color.colorslug)">
<img :src="color.colorimage" class="filter-img mx-auto">
<p>{{color.colorname}}</p>
</div>
</div>
</div>
In Step 3 User will select Colour
Now After this I am updating & saving the slug of these categoies in my js in method
Here is code how my Categories are coming from & saving the category slug in typeslugFilter
I used alert Js to check if it's working & saving correctly or not & It's Saving the exact slug,
var filters = new Vue ({
el: '#categorytype',
data:{
types: [
{
typeId: 1,
typename: 'Men',
typeImage: 'assets/images/filter1.png',
typeslug: 'men',
},
{
typeId: 2,
typename: 'Women',
typeImage: 'assets/images/filter2.png',
typeslug: 'women',
},
{
typeId: 3,
typename: 'Watches',
typeImage: 'assets/images/filter3.png',
typeslug: 'both',
}
] },
methods: {
addfiltertype (typeIndex,typeslug) {
this.typeslugFilter = typeslug;
// alert(this.typeslugFilter+ '+' + typeslug);
}
}
});
Consider similar code for other two categories with variable dialnameFilter & colorslugFilter,
Now I am trieng to fetch filtered products using below code it's not working for me as of now
I am getting my products from json file & they are working fine I am using typeslug & dialname as category type in single product details & using productslider as el: element .
<div id="productslider" class="container py-5">
<p>{{typeslugFilter}}</p>
<div v-for="(variant,variantIndex) in variants" v-if="typeslugFilter === typeslug && dialnameFilter === dialname">
<div class="watch-slider-div">
<img :src="variant.variantImage" class="w-100 py-3">
</div>
</div>
</div>
Please help me out in this If any tech geek an help will be appreciated