Vuetify v2 icon color updated only after hover

Question

on a vue.js v2.vuetify project I change the value of a settings variable with a value retrieved by remote database using a dispatch procedure.

this variable controls (changes color) an icon in the toolbar (that is a separate component)

Dispatch procedure works: (if I console.log the value of the variable the value is updated)

here the relevant codes:

body.vue:

    <script>
        ...
        async getData(row)
        {
            ...
            const res = await this.$http.post('/manage/manage.php', payload );
            this.$store.dispatch("setTBM", res.data.payloads.TBM);
            ...
        }
    </script>
    
toolbar.vue:
    ...
    <template v-for="(m,mi) in settings.modules">
        <v-btn
            fab
            :to="m.path"
            class="neu-glow mx-3"
            active-class="neu-glow-inset"
            v-bind="attrs" 
            v-on="on"
        >
            <v-icon :color="settings.tbm>0?'error':m.iconColor">{{m.icon}}</v-icon>
        </v-btn>
    </template>
    ...

<script>
import { mapGetters } from "vuex";
...
computed: {
    ...mapGetters(["settings","other_settings"])
}
</script>

store/user.js:

const mutations = {
    [mutationTypes.SET_TBM]: (state, payload) => {
      console.log('271-SET_TBM_before',payload.cnt);
      state.settings.tbm=payload.cnt;
      console.log('SET_TBM_after',state.settings);
    },    
  };


const actions = {
      setTBM:  ({ commit }, payload) => {
        commit(mutationTypes.SET_TBM, payload);
      }
}

But icon color changes only when I hover the icon.

how can I fix it? Thanks