Javascript v-for列表中已单击项目的上下计数

我有一个v-for循环，它创建了一组过滤器，在每个过滤器中，另一个v-for为每个过滤器创建了项目。在列表的顶部，我有一个框，用于显示所选项目的数量。因此，每次单击该列表中的过滤器时，它都会显示为该特定框选择了多少过滤器。 例如，选择了4个。（我可以做一个普通的计数器，但每个下拉列表都会显示相同数量的选定项目，这对用户来说不是很友好）

过滤器是根据作为道具发送的数据创建的（

allFilters

），因此我不能添加任何额外的值

{
  filter1:{ 
    items: {australia: 2, america: 1, canada: 3}, 
    isActive: false
  }, 
  filter2: {
    items: {sausages: 5, eggs: 10, bacon: 4},
    isActive: false 
  }
}

我知道'count'不能在data（）对象中，因为我需要在v-for中创建多个实例，但是我想知道是否有一种方法可以在v-for运行后向其添加一个键？ 这就是我现在的处境

<div class="filter" v-for="(filtersList,filterName) in allFilters" :key="filterName">
            <button @click="filtersList.isActive = !filtersList.isActive" class="filter-button">
                <span>{{filterName}}</span><span><img :src="require(`@/assets/chevron-down.png`)" alt=""></span>
            </button>
            <ul :class="{active:filtersList.isActive}">

                <!-- THIS IS WHERE I NEED TO COUNT THE ITEMS SELECTED FROM ITEMS -->
                <li class="filter-options"><span class="filters-selected-amount">{{ count }} selected</span> <span class="filters-clear-button" @click="clearFilters(filtersList.items)">Clear</span></li>
                 <!-- READ ABOVE THIS LINE -->


                <li class="filter--item" v-for="(value,optionName) in filtersList.items" 
                    @click="addSelectedFilter(filtersList.items,optionName);"  
                    :key="optionName" 
                    :value="optionName">
                    <span class="filter__checked"><img :src="require(`@/assets/check.png`)" alt=""></span>
                    {{optionName}} ({{value}})
                </li>
            </ul>
        </div>

请记住，这是我的vue第三周，所以我仍在学习

export default {
    props: {
        allFilters: Object,
        useCaseFilters: Array
    },
    data: function() {
        return {
            filtersSelected: [],
            isSelected: false,
            count: []
        }
    },
    methods: {
        addSelectedFilter(list, val){
            let currentFilters = this.filtersSelected;
            if(currentFilters.includes(val)){
                currentFilters.splice(currentFilters.indexOf(val),1);
            }
            else{
                currentFilters.push(val);
            }
            this.filtersSelected = currentFilters;
            this.$emit("selectedFilters", this.filtersSelected);
        },
        clearFilters(val){
            let currentFilters = this.filtersSelected;
            let filtersToClear = Object.keys(val);
            let filteredArr = currentFilters.filter((el) => {
                return filtersToClear.indexOf(el) === -1;
            })
            this.filtersSelected = filteredArr;
            this.$emit("selectedFilters", this.filtersSelected);
        }
    },
    mounted: function (){
        let allFilterItems = document.querySelectorAll('.filter--item');
        allFilterItems.forEach(el => {
            el.addEventListener('click', function() {
                this.classList.toggle('selected')
            })
        })
    }
}