!wrong repo watch vuex in component with v-if rendering not working

[thihathit]

So, i've been playing around with vuex and bumped into this, not sure if i'm doing it right for watching vuex data from component.
It seems v-if doesn't work whereas v-show works fine.

Example code

// Store module named "Seasons"
export default {
  namespaced: true,
  state: {
    prize: 0,
  },
  mutations: {
    SET_PRIZE: (state, value) => {
      state.prize = value;
    },
  },
  actions: {
    set_prize: (context, value) => {
      context.commit('SET_PRIZE', value);
    },
  },
}

// Component
export default {
  name: 'SeasonInfo',
  data: function() {
    return {
      prize: 0,
      loading: true,
    }
  },
  watch: {
    '$store.state.Seasons.prize': function(newVal, oldVal) {
      this.prize = newVal
    },
  },
  mounted: function() {
	this.$store.dispatch('Seasons/set_prize', 1000)
    this.loading = false
  }
}

// prize value doesn't update reactively after store dispatch
<div v-if="!loading">{{ prize }}</div>

// works reactively
<div v-show="!loading">{{ prize }}</div>

I've with tried this.$store.watch() but still no luck. 😔
Any idea is very much appreciated. Thanks