title: Vue Child Component Doesn't Update on Prop Change
body: <p>I'm updating an 'exercise' prop that gets sent to a 'workout' component in Vue. In the child component, I'm emitting a function to increment the set you're on. The function is firing in the parent component (I'm getting console.logs()), but the child component isn't re-rendering.</p>
  
  <h2>The Parent:</h2>
  
  <pre><code>&lt;ExerciseListItem
    v-for="(exercise) in exercises"
    v-on:completeSet="completeSet"
    v-on:selectExercise="selectExercise"
    v-bind:exercise.sync="exercise"
    v-bind:isActiveExercise="exercise.slug === activeExerciseSlug"
    v-bind:key="exercise.slug"
  /&gt;
  </code></pre>
  
  <h2>The methods:</h2>
  
  <pre><code>methods: {
    completeSet: function(slug) {
      console.log("complete-set", slug);
      const exercise = this.getExerciseBySlug(slug);
      exercise.completedSets++;
      if (exercise.completedSets === exercise.totalSets) {
        this.completeExercise(slug);
      }
    },
    completeExercise: function(slug) {
      this.getExerciseBySlug(slug).isComplete = true;
      console.log("COMPLETE-exercise", slug);
    },
    getExerciseBySlug: function(slug) {
      return this.exercises.find(exercise =&gt; exercise.slug === slug);
    },
    selectExercise: function(selectedSlug) {
      this.activeExerciseSlug = selectedSlug;
    }
  },
  </code></pre>
  
  <h2>The Child Template</h2>
  
  <pre><code>&lt;li
    v-bind:class="{ 'white-box': true, complete: exercise.isComplete }"
    v-on:click="exercise.totalSets &gt; 1 ? $emit('selectExercise', exercise.slug) : $emit('completeSet', exercise.slug)"
  &gt;
  </code></pre>
  
  <p><a href="https://github.com/rosswhitehouse/lift-tracker" rel="noreferrer">Here's the project on Github</a></p>
  
  <p><a href="https://lift-tracker.netlify.com/" rel="noreferrer">And a live demo</a></p>
  
  <p>Help appreciated </p>