Laravel Vue js Filters Custom Filters

Question

Custom filters are not working, This is what I have tried so far,

This HTML code is for filters selection,

<div class="woocommerce-widget filter-list-widget">
    <h3 class="woocommerce-widget-title"  style="cursor: pointer;">Chart Size <i class='bx bx-chevron-down' style="float: right;"></i></h3>
    <div class="selected-filters-wrap-list collapse show">
        <div class="brands-list-row">
            <ul>
                <li class="hover1" v-for="(size, index) in sizes" :key="size.id">
                    <input type="checkbox" :id="size" name="chart_size[]" :value="size" @click = "setActive({type: 'size', value: size.toUpperCase()})" :checked=" isActive({type: 'size', value: size.toUpperCase()}) " v-model="selectedCategory"> 
                    <label :for="size" class="label">{{size.toUpperCase()}}</label> 
                    <label :for="size" class="label_total"> ({{ filteredItemsCount(size.toUpperCase()) }})</label>
                </li>
            </ul>
        </div>
    </div>
</div>

This HTML code is for Get Dynamic Data selection,

<div id="products-collections-filter" class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 products-col-item" v-for="(item, index) in filteredItems">
        <div class="single-products-box">
            <div class="products-image">
                <a :href="link.replace('arg',item.slug)">
                    <img :src="imageload(item)" class="main-image" alt="image">
                    <img :src="imageload(item)" class="hover-image" alt="image">
                </a>
            </div>

            <div class="products-content">
                <h3><a :href="link.replace('arg',item.slug)"
                        style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;">{{
                        item.name }}</a></h3>
                <p style="margin-bottom: 0;">{{ item.brand_name }} | {{ item.brand_size }}</p>
                <p>Chart Size | {{ item.chart_size }}</p>
                <div class="price">

                    <span class="new-price">AED {{ item.price }}.00</span>
                </div>

                <button>Add To Cart</button>
            </div>
        </div>
    </div>
</div>

Vue JS script using which I want to implement custom filter,

export default {
    data(){
        return{  
            loading: true,
            viewGridSwitch: false,
            isChartSizeActive: true,
            sizes : ['xs', 's', 'm', 'l', 'xl', 'xxl'],
            items: this.products,
            filtersApplied: [],
            selectedCategory: [],
            userId: 0,
        }

    },

    mounted() {
        this.filteredItemsCount();
    },

    watch: {
        selected: {
            handler: function () {
                this.filteredItemsCount();
            },
            deep: true
        }
    },

    props:[
        "brands",
        "link",
        "products",
    ],

    computed: {
        filteredItems: function() {
         return this.items.filter( item => {
            return this.filtersApplied.every( filtersApplied => {                  
             if (filtersApplied.type === 'size' && item.chart_size == filtersApplied.value) {
                return true
              }
              else{
                 return false;
              }
            });
          });
        },
      },

    methods:{
        imageload(id){
            return "http://localhost/fashion/fashion_cms/public/uploads/"+id.thumbnail;
        },

        uncollape(id){
            switch (id){
                case 'Chart Size':
                    if(this.isChartSizeActive){this.isChartSizeActive = false}
                    else{this.isChartSizeActive = true}
                    break
            }
        },

        removeTags : function (item) {
          this.filtersApplied.pop(item)
        },

        setActive: function(element){
          if(this.filtersApplied.find(({ value }) => value === element.value)){
            this.filtersApplied.pop(this.filtersApplied.find(({ value }) => value === element.value))
          }else{
            this.filtersApplied.push(element)
          }
        },

        isActive: function (menuItem) {
          return this.filtersApplied.indexOf(menuItem) > -1
        },            

        filteredItemsCount(size) {
          const filteredItems = this.items.filter(item => {
            return this.filtersApplied.every(filtersApplied => {
              if (filtersApplied.type === 'size' && item.chart_size === size) {
                return true
              }
            })
          })
          return filteredItems.length
          console.log(filteredItems.length);
        },
    },
}

I want to implement it something like this but not proper work code. my requirement this function.. https://i.stack.imgur.com/lNxsI.jpg

Required Count function and multiple check select multiple data get..