name : UpdatesBadge.vue <template> <span v-if="count" class="badge-sm bg-red-500 dark:bg-blue-900"> {{ count }} </span> </template> <script> export default { computed: { count() { return this.$store.state.updates.count; } }, created() { this.registerVuexModule(); this.getCount(); }, methods: { registerVuexModule() { if (this.$store.state.updates) return; this.$store.registerModule('updates', { namespaced: true, state: { count: 0, requested: false, }, mutations: { count: (state, count) => state.count = count, requested: (state) => state.requested = true, } }) }, getCount() { if (this.$store.state.updates.requested) return; this.$axios .get(cp_url('updater/count')) .then(response => this.$store.commit('updates/count', !isNaN(response.data) ? response.data : 0)); this.$store.commit('updates/requested'); }, } } </script>