exchange-2.0/resources/assets/vue/components/accounts/elements/VouchersNavigationBarComponent.vue

<template>
    <div class="row h-100 parentContainer">
        <div class="col">
            <a :href="route('rewards')" >
                <div class="text-white all-caps fs-12">Vouchers</div>
                <div v-if="showVoucherUpdateIndicator" class="update-indicator"></div>
            </a>
        </div>
    </div>
</template>
<script>
    export default {
        computed: {
            showVoucherUpdateIndicator() {
                return this.$store.getters.showVoucherUpdateIndicator;
            }
        },
        created(){
            this.submit(this.route('api.voucher.user.list') + '?filters=' + JSON.stringify( { 'has_vouchers_all_with_user': true,  order_by:{ column:'id', DESC:true }} ), 'get', 'voucherNavigationSection', false, false);
        },
        methods: {
            successHandler(response){
                this.$store.dispatch('updateLatestVoucherTimestamp', response.payload.data.length > 0 ? response.payload.data[0].created_at : null)
                .then(() => {
                    this.$store.dispatch('updateVoucherCount', response.payload.data.length);
                });
            },
        }
    }

</script>
<style>
    .update-indicator {
        width: 10px;
        height: 10px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        top: 0px;
        right: 5px;
    }
</style>