How to get Vuetify to update its colours when you change the theme programatically

Question

I can't get the theme to update programmatically. It updates, but it requires a refresh to show the theme updates. I've tried using location.reload(); to refresh the page on update. This doesn't work.

I use Vue for my app build.

I am currently importing my store into the vuetify plugin.

import Vue from "vue";
import Vuetify from "vuetify/lib";
import store from "./../store";

Vue.use(Vuetify);

let theme = store.getters.THEME;

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: theme.primary,
        secondary: theme.secondary,
        accent: theme.accent,
        error: theme.error
      }
    }
  }
});

I set the theme variables that I get back from the server using axios.

setTheme() {
  this.$http
    .get(`organisations/${this.organisation}`)
    .then(response => {
      this.$store.dispatch("SET_THEME", response.data.organisation.theme);
    })
    .catch(e => {
      this.errors.push(e);
    });
}

Everything works and even oddly the logo updates which I'm storing in the same vuex state object.

state: {
    auth: {},
    user: {},
    organisation: {},
    theme: {
      primary: "#00ACC1",
      secondary: "#84FFFF",
      accent: "#80CBC4",
      error: "#EF9A9A",
      logo: ""
    },
    settings: {},
    rules: [],
    rulesFinal: {},
    journey: "main",
    selectedTable: {},
    selectedOrder: {},
    selectedCategory: {}
},

However even though the logo in the same object updates dynamically the colours I set do not. Is there something I'm missing or some way to force vuetify to update?

I've tried three different approaches now and I'd really appreciate any help I can get.

Answer 1

I ended up setting the values directly in the response.

setTheme() {
      const payload = {
        organisation: this.organisation
      };
      setTheme(payload)
        .then(response => {
          const theme = this.$vuetify.theme.themes.light;
          const responseTheme = response.organisation.theme;
          theme.primary = responseTheme.primary_color;
          theme.secondary = responseTheme.secondary_color;
          theme.accent = responseTheme.accent_color;
          theme.error = responseTheme.error_color;
          this.$store.dispatch("SET_THEME", response.data.organisation.theme);
        })
        .catch(e => {
          this.errors.push(e);
        });
    },