I'm updating an 'exercise' prop that gets sent to a 'workout' ponent in Vue. In the child ponent, I'm emitting a function to increment the set you're on. The function is firing in the parent ponent (I'm getting console.logs()), but the child ponent isn't re-rendering.

The Parent:

<ExerciseListItem
  v-for="(exercise) in exercises"
  v-on:pleteSet="pleteSet"
  v-on:selectExercise="selectExercise"
  v-bind:exercise.sync="exercise"
  v-bind:isActiveExercise="exercise.slug === activeExerciseSlug"
  v-bind:key="exercise.slug"
/>

The methods:

methods: {
  pleteSet: function(slug) {
    console.log("plete-set", slug);
    const exercise = this.getExerciseBySlug(slug);
    exercisepletedSets++;
    if (exercisepletedSets === exercise.totalSets) {
      thispleteExercise(slug);
    }
  },
  pleteExercise: function(slug) {
    this.getExerciseBySlug(slug).isComplete = true;
    console.log("COMPLETE-exercise", slug);
  },
  getExerciseBySlug: function(slug) {
    return this.exercises.find(exercise => exercise.slug === slug);
  },
  selectExercise: function(selectedSlug) {
    this.activeExerciseSlug = selectedSlug;
  }
},

The Child Template

<li
  v-bind:class="{ 'white-box': true, plete: exercise.isComplete }"
  v-on:click="exercise.totalSets > 1 ? $emit('selectExercise', exercise.slug) : $emit('pleteSet', exercise.slug)"
>

Here's the project on Github

And a live demo

Help appreciated