title: Changing Vue Data Object
body: <p>UPDATED CODE</p>
  
  <pre><code>&lt;template&gt;
       &lt;swiper-slide v-for="(photon,key) in $store.state.photons" :key='key'&gt;
              &lt;radial-gauge :value='photon.tempF'  
                   :options="photon.GaugeOptions.optionsLastTempF"&gt;&lt;/radial-gauge&gt;
       &lt;/swiper-slide&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>store.js</p>
  
  <pre><code>export const store = new Vuex.Store({
    state: {
      photons: {},
      token: '',
    },
    mutations: {
      setUser(state, value) {
        value.data.forEach(element =&gt; {
          state.photons[element.id].user = element.data    
          state.photons[element.id].GaugeOptions.optionsLastTempF.highlights[0].to=parseInt(element.data.tempAlert,10) 
          state.photons[element.id].GaugeOptions.optionsLastTempF.highlights[1].from=parseInt(element.data.tempAlert,10)+1 
        });
      }},
  actions: {
   async getData(context) {
        let db = []
        let photon = {}
        db = await axios.get('http://13.14.13.1:3300/DB')
        db.data.forEach(item =&gt; {
          if ([Object.keys(item)[0]] in photon) {
            let dataString = (Object.values(item)[0]).split(',')
  photon[Object.keys(item)[0]].GaugeOptions={}
            photon[Object.keys(item)[0]].GaugeOptions.optionsLastTempF={
              title: 'Last Temp',
              units: "°F",
              minorTicks: 10,
              majorTicks: ['0', '20', '40', '60', '80', '100', '120', '140', '160'],
              maxValue: 160,
              highlights: [{
                      "from": 0,
                      "to": 0,
                      "color": "rgba(0,255,0)"
                  },
                  {
                      "from":0,
                      "to": 160,
                      "color": "rgba(255,0,0)"
                  },
  
              ],
              colorPlate: '#222',
              colorUnits: '#ccc',
              colorTitle: '#eee',
              colorNumbers: '#eee',
              width: 200,
              height: 200
            }
   context.commit('setData', photon)
      }
  }
  }
  </code></pre>
  
  <p>This code currently works if I go from the homepage to my chart page where this gauges are, but if i refresh the page the gauges have the right values but they aren't being properly  update.</p>
  
  <p>UPDATE
  so after adding a v-if to my component it now loads properly with everything. I'm now having trouble with how I would call an update function on the gauge?If i'm doing the mutation in my vuex store how would i reference my component  to call an update?</p>