title: How to get Vuetify to update its colours when you change the theme programatically
body: <p>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.  </p>
  
  <p>I use Vue for my app build. </p>
  
  <p>I am currently importing my store into the vuetify plugin. </p>
  
  <pre><code>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
        }
      }
    }
  });
  </code></pre>
  
  <p>I set the theme variables that I get back from the server using axios. </p>
  
  <pre><code>setTheme() {
    this.$http
      .get(`organisations/${this.organisation}`)
      .then(response =&gt; {
        this.$store.dispatch("SET_THEME", response.data.organisation.theme);
      })
      .catch(e =&gt; {
        this.errors.push(e);
      });
  }
  </code></pre>
  
  <p>Everything works and even oddly the logo updates which I'm storing in the same vuex state object. </p>
  
  <pre><code>state: {
      auth: {},
      user: {},
      organisation: {},
      theme: {
        primary: "#00ACC1",
        secondary: "#84FFFF",
        accent: "#80CBC4",
        error: "#EF9A9A",
        logo: ""
      },
      settings: {},
      rules: [],
      rulesFinal: {},
      journey: "main",
      selectedTable: {},
      selectedOrder: {},
      selectedCategory: {}
  },
  </code></pre>
  
  <p>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? </p>
  
  <p>I've tried three different approaches now and I'd really appreciate any help I can get. </p>