How to implement a filter function for multiple conditions in Vue?

Question

I want to implement a filter function in Vue3 using two filter conditions. I would like to know how to combine object arraies to narrow down the conditions. I have implemented the followings, but I'm not sure know how to fix it because There is no errors. I'm trying to debug, but if you could give me some advice, that would be really helpful. Thank you.

<template>
        <div>
          <div>City</div>
          <a-checkbox-group :options="plainOptions" >
            <div v-for="city in cityList" >
              <a-checkbox :value="city" @change="cityFilter(city)"/> {{ city.cityName }}
            </div>
          </a-checkbox-group>
          <div>Category</div>
          <a-checkbox-group :options="plainOptions" >
            <div v-for="category in cattegoryList" >
              <a-checkbox :value="category" @change="categoryFilter(category)"/> {{ category.categoryName }}
            </div>
            <div>
              <a-checkbox @change="categoryFilter(category)"/> ALL
            </div>
          </a-checkbox-group>
        </div>
      </template>

let filteredProducts = ref();
let filteredByCity = ref();
let filteredByCategory = ref();

// City filter event
const cityFilter = (city) => {
    filteredByStatus.value = products.value.filter(function(x){
      return x.cityName === city.cityName
    });

  // Filter by city and category
  filteredProducts.value = filteredByCity.value.push(filteredByCategory.value);

}

// Category filter event
const categoryFilter = (category) => {
   filteredByCategory.value = products.value.filter(function(x){
      return x.categoryName === category.categoryName
   });

   // Filter by city and category
   filteredProducts.value = filteredByCategory.value.push(filteredByCity.value);
 }

const products = [
    { categoryName: "A", cityName: "Canada", walk: 5 },
    { categoryName: "A", cityName: "Canada", walk: 5 },
    { categoryName: "A", cityName: "America", walk: 5 },
    { categoryName: "B", cityName: "Canada", walk: 10 },
    { categoryName: "C", cityName: "America", walk: 15 },
]

const categoryList = [
   {categoryName:"A", categoryId: 0},
   {categoryName:"B", categoryId: 1},
   {categoryName:"C", categoryId: 2}
];

const cityList = [
   {cityName:"America", cityId: 0},
   {cityName:"Canada", cityId: 1}
];