Not getting data through emit event. How do you communicate an array of selected IDs to the parent? - vuejs3

Question

I am building this ecommerce site based on strapi and vue3/pinia.
My products come from ProductStore.js through this function:
async fillArchive() {
this.loading = true;
this.products = await fetch(
apiUrl +
"/api/products?fields=name,featured,description,price,slug&populate=image,category"
)
.then((res) => res.json())
.then((data) => (this.products = data.data))
.catch((err) => (error.value = console.log(err)));
this.loading = false;
},
I get my categories from CategoryStore.js:
async fill() {
this.loading = true;
this.categories = await fetch(apiUrl + "/api/categories?fields=name,slug")
.then((res) => res.json())
.then((data) => (this.categories = data.data))
.catch((err) => (error.value = err));
this.loading = false;
},
So the problem is that I am able to collect the selectedCategories in an array in the ProductFilters.vue child component, its also printed and shows up, but..
<script setup>
import { ref } from "vue";
import { useCategoryStore } from "#/stores/CategoryStore";
const categoryStore = useCategoryStore();
categoryStore.fill();
const checkedCategories = ref([]);
const emit = defineEmits(["changeCheck"]);
const changeCheck = function () {
emit("changeCheck", checkedCategories.value);
};
</script>
<template>
<div>
<label
v-for="category in categoryStore.categories"
:key="category.id"
class="text-sm flex flex-row items-center gap-1.5"
><input
type="checkbox"
:value="category.attributes.name"
v-model="checkedCategories"
#input="changeCheck"
/>{{ category.attributes.name }}</label
>
</div>
{{ checkedCategories }}
</template>
.. i am not getting the checkCategories array in the parent component, whereby I'd like to filter my rendered products. If a category is checked i'd like to render the related products, if all categories are checked render all, none checked also all.
In my parent component - ProductsView.vue - the emited data is not showing up, i'm always getting undefined.
<script setup>
import { computed } from "vue";
import { useProductStore } from "#/stores/ProductStore";
import IconDown from "../components/icons/IconDown.vue";
import IconUp from "../components/icons/IconUp.vue";
import ProductFilters from "../components/ProductFilters.vue";
import ProductArchiveCard from "../components/ProductArchiveCard.vue";
const imageLink = import.meta.env.VITE_STRAPI_URL;
const productStore = useProductStore();
function updateCategories(catName) {
let selected = [];
selected.push(catName);
return console.log(selected);
}
const filteredProducts = computed(() => {
// filter by catName or id and v-for filteredProducts
});
productStore.fillArchive();
</script>
<template>
<section class="px-2 flex flex-col xl:flex-row">
<div class="pt-24 xl:pt-36 xl:w-1/4 relative">
<!-- order by category -->
<ProductFilters #changeCheck="updateCategories(catName)" />
</div>
<div v-if="!productStore.loading">
<div
class="mx-auto grid grid-flow-row gap-10 md:gap-10 lg:gap-16 xl:gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"
>
<ProductArchiveCard
class="mx-auto"
v-for="product in productStore.products"
:key="product.name"
:product="product"
:imageLink="imageLink"
/>
</div>
</div>
<div v-else class="flex justify-center py-16 min-h-screen">
<div class="spinner w-8 h-8"></div>
</div>
</section>
</template>
What am I doing wrong in the event handling? Can someone point it out? :) Thanks in advance folks!