How can I add notification automatic after add to

Question

My vue component to add to cart like this :

<template> 
    <div class="wrapper">
        ...
        <b-btn variant="warning" class="btn-square mt-2 col-md-12" @click="addToCart(item)"><i class="fa fa-cart-arrow-down"></i> Add to cart</b-btn>
        ...
    </div>
</template>
<script>
    export default {
        ...
        methods: {
            addToCart(item) {
                let data = [{
                    number: item.number,
                    price: item.price,
                    description: item.description,
                    quantity: this.quantity,
                }]
                if (this.$session.get(SessionKeys.Cart) === undefined || this.$session.get(SessionKeys.Cart) === null) {
                    this.$session.set(SessionKeys.Cart, data);
                }
                else {
                    let newData = this.$session.get(SessionKeys.Cart)
                    newData.push(data[0])
                    this.$session.set(SessionKeys.Cart, newData);
                }
            }
        }
    }
</script>

If click add to cart, it will save the data in the session storage

I have global.js and I set session storage there. It like this :

export const SessionKeys = {
    Cart: 'logCart'
};

And I have vue component header to display notification cart like this :

<template>
    <b-navbar-nav>
        <div class="d-md-down-none mr-2" @click="showCart = !showCart" v-show="!verified">
            <i class="icon-basket"></i>
            <b-badge pill variant="danger" class="ml-1">{{items.length}}</b-badge>
        </div>
        <div class="cart" v-show="showCart">
            <div v-show="items.length > 0" class="m-0 p-1 border ">
                <b-list-group>
                    <b-list-group-item v-for="item in items" transition="fade">
                        <b-row>
                            <b-col cols="2" class="m-0 p-0">
                                <b-img src="./img/products/test.jpg" height="50" />
                            </b-col>
                            <b-col class="p-0 pl-3">
                                <i class="fa fa-dropbox"></i><small><b>{{item.description }}</b></small><br/>
                                <small class="p-1"><i class="fa fa-check"></i> {{ item.quantity }} pcs x Rp. {{ item.price }}</small><br/>
                                <small class="p-1"><i class="fa fa-check"></i> Sub: Rp. {{item.quantity * item.price}}</small>
                                <i class="fa fa-trash text-danger float-right" @click="removeFromCart(item)"></i>
                            </b-col>
                        </b-row>
                    </b-list-group-item>
                    <b-list-group-item class="p-0 align-middle">
                        <div class="bg-secondary text-lg-center text-dark font-lg font-weight-bold">Rp. 123</div>
                    </b-list-group-item>
                </b-list-group>
                <b-btn class="btn-square col-md-12 mt-1" variant="warning" href="/#/orders/payment"><i class="fa fa-credit-card-alt"></i> Check out</b-btn>
            </div>
            <div v-show="items.length === 0">
                <p>Your cart is empty!</p>
            </div>
        </div>
    </b-navbar-nav>
</template>

<script>
    export default {
        name: "cartDropdown",
        data() {
            return{
                items: this.$session.get(SessionKeys.Cart) ? this.$session.get(SessionKeys.Cart) : [],
                showCart: false,
                verified: false
            }
        }
    }
</script>

If I click add to cart, the notification in the header is not update automatic. I must refresh the page first

How can I make it automatic update when click add to cart?

Seems it will using watch, but i'm still confused to implement it