title: update component on Vuex state change through computed properties
body: <p>I am building a simple movie app using Vue and Vuex and want to be able to add movies to a favourites list when a button is clicked. I am adding the movies to the store but I want the text on the button to change from 'Add to favourites' to 'Remove from favourites' when the movie has been added. I am using a computed property to read the Vuex store to determine the text on the button based on whether the movie is in the favourites list in the store or not. If I reload the page, the text on the button changes correctly but I am unable to get the text to change when just clicking on the button to add/remove movie. How can I get the computed properties to be re computed on a change in the Vuex store?</p>
  
  <p>Here is my movie component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div class="single-movie-page"&gt;
      &lt;img class="movie-img" :src="movie.img"&gt;&lt;/img&gt;
      &lt;div class="single-movie-info"&gt;
        &lt;h1&gt;{{movie.title}}&lt;/h1&gt;
        &lt;h3&gt;Rating: {{movie.stars}}&lt;/h3&gt;
        &lt;h3&gt;Released Date: {{movie.releaseDate}}&lt;/h3&gt;
        &lt;p&gt;{{movie.overview}}&lt;/p&gt;
        &lt;button v-on:click="addRemoveFavourites" &gt;{{ favourite }}&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: ['movie'],
    computed: {
      favourite() {
        return this.$store.state.favourites[this.movie.id] === undefined
          ? 'Add to Favourites'
          : 'Remove from Favourites'
      }
    },
    methods: {
      addRemoveFavourites() {
        this.$store.commit('changeFavourites', this.movie)
      }
    }
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is my Vuex store:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex)
  
  export const store = new Vuex.Store({
    state: {
      favourites: {}
    },
    mutations: {
      changeFavourites: (state, movie) =&gt; {
        if (state.favourites[movie.id]) {
          delete state.favourites[movie.id]
        } else state.favourites[movie.id] = movie
      }
    }
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried using <code>this.$forceUpdate()</code> in the addRemoveFavourites method, but this didn't work either.</p>