Vue 3 - component listen to event - vue.js

Question

I have following code for the main page:
<script setup>
import {useProductStore} from "#/store/products";
import {useTableOrderStore} from "#/store/tableOrder";
import {computed, reactive, ref} from "vue";
import {storeToRefs} from "pinia";
import CounterComponent from "#/components/Counter.vue"
const productStore = useProductStore()
const tableOrderStore = useTableOrderStore()
const categoryId = ref('all')
let { products } = storeToRefs(productStore)
let { categories } = storeToRefs(productStore)
const filteredProducts = computed(() => {
if(categoryId.value === 'all')
{
return products.value
}
return products.value.filter(product => product.productCategoryID == categoryId.value)
})
</script>
<template>
<div>
<div class="row">
<div class="col-md-2">
<button class="d-block w-100"
#click="categoryId = 'all'">All</button>
<button class="d-block w-100"
#click="categoryId = category.id"
:key="category.id"
v-for="category in categories">{{ category.name }}</button>
</div>
<div class="col">
<p v-for="product in filteredProducts"
:key="product.id">{{ product.name }}
<CounterComponent />
<span #click="tableOrderStore.addToOrder(product); $emit('productAdded')">Add to order</span>
</p>
</div>
</div>
</div>
</template>
And Counter component:
<script setup>
import {ref} from "vue"
let count = ref(1)
let increase = () => {
count.value++
}
let decrease = () =>
{
if(count.value === 1)
return
count.value--
}
let reset = () => {
count.value = 1
}
</script>
<template>
<div class="input-group">
<span class="input-group-btn">
<button type="button"
class="btn btn-danger btn-number"
data-type="minus"
#click="decrease"
>
<font-awesome-icon icon="fas fa-minus-circle" />
</button>
</span>
<input type="text"
name="quantity"
:value="count"
class="form-control input-number"
min="1"
>
<span class="input-group-btn">
<button type="button"
class="btn btn-success btn-number"
data-type="plus"
#click="increase"
>
<font-awesome-icon icon="fas fa-plus-circle" />
</button>
</span>
</div>
</template>
How can I reset counter once this element is clicked:
<span #click="tableOrderStore.addToOrder(product); $emit('productAdded')">Add to order</span>

Answer 1

You can do 3 things:
Make a counter store with pinia to mutate the counter state from anywhere
Install mitt (npm install --save mitt), to emitt and receive events from anywhere and update your component on('productAdded')
Create a ref to the CounterComponent to access directly to the component properties from the parent,
like following:
JS
const counterRef = ref()
Template
<CounterComponent ref='counterRef' />
And then in the span event handler:
counterRef.count = 1;