So my issue is that I cannot seem to see the variable coolEventScore when page loads. I do not know if it something that has to do with lifecycles, or maybe I am overloading functionality inside the vuex getListStats() function... Could anyone bring some light to this?

account.js

import Vue from 'vue'

import {achost} from '../constants';

const state = () => ({
    coolEventScore: {}
});

const actions = {
    getListStats(context) {
        return Vue.axios.get(
            `xxxx/xxxx`, {}, {
                headers: {
                    'XXXX': 'xxxx',
                    'XXXX': xxxx
                }
            }).then((resp) => {
                let events = resp.data['event_info'];
                let coolEvt = events.filter(evt => evt.src === "coolEvt")[0];
                let coolEvtScore = coolEvt .score;
                context.commit("setCoolEventScore", coolEvtScore)
                return events;
            }).catch((err) => {
                console.log(err)
            })
    },
}

const mutations = {
    setCoolEventScore(state, value) {
        state.coolEventScore = value;
    }
}

export const account = {
    namespaced: true,
    actions,
    mutations,
    state
}

Cool.vue

<template>
    <div>
        <span :html="coolEventScore"></span>
    </div>
</template>

<script>
import store from "../../../store";
import { mapState } from "vuex";
import { account } from "../../../store/modules/account";

if (!store.state.account) store.registerModule("account", account);

export default {
  name: "Cool",
  components: {},
  created() {
      this.fetchEvents();
  },
  computed: {
    ...mapState("account", {
        coolEventScore: (state) => state.coolEventScore
    }),
  },
  methods: {
    fetchEvents() {
        this.$store.dispatch("account/getListStats");
    }
  }
}