I'm using this free coffee API to fetch data.

Each coffee drink item is populated in a Vue Card component. The Card component has a counter: 0 that the user can increment() and decrement().

Card.vue

import {store} from '../store'
import {ref} from 'vue'
export default {
    data() {
        return {
            store,
            count: ref(0)
        }
    },
    props: ['drink'],
    methods: {
        decrement(){
            (this.count != 0) ? this.count-- : this.count = 0
            store.decrement(this.drink.title,this.drink.id,this.count)
        },
        increment(){
            this.count++
            store.increment(this.drink.title,this.drink.id,this.count)
        }
    },
}

I'm using the Reactivity API for state management.

Store.js(state management)

import { reactive, ref } from 'vue'

export const store = reactive({
    drinks : ref([]),

    increment(drinkName,id,count) {
        let drink = this.drinks.find(drink => drink.drinkID === id);

        if(drink) {
            drink.drinkCount = count
        } else {
            this.drinks.push({
                drinkID : id,
                drinkName : drinkName,
                drinkCount : count,
            })
        }
    },
    decrement(drinkName,id,count) {
        let drink = this.drinks.find(drink => drink.drinkID === id);
        if(drink) {
            drink.drinkCount = count
            if(drink.drinkCount == 0) this.drinks.splice(this.drinks.indexOf(drink),1);
        }
    },
    remove(id) {
        let drink = this.drinks.find(drink => drink.drinkID === id);
        if(drink) {
            drink.drinkCount = 0
            if(drink.drinkCount == 0) this.drinks.splice(this.drinks.indexOf(drink),1);
        }
    }
})

Finally, I have a Sidebar(shopping cart) component that uses the Reactivity API to reactively add coffee drinks to the cart based on the Changes on the Card component.

I implemented a remove button for the sidebar such that the remove() function will reset the count to zero and remove it from the cart. You can see the code in the Store.js section. The issue I am having is that everything is updated in the shopping cart and the item is removed as expected but nothing happens in the Card Component. The counter in the Card Component does not update.

note: that the Card Component and Sidebar Compnent do not have a parent and child relationship.

Here is a link for the codesandbox