title: Fontawesome icon doesn't update
body: <p>I've been trying a couple of things to get an icon (fontawesome) to update when data in an array changes in Vue JS. </p>
  
  <p>This is my template</p>
  
  <pre><code>&lt;div v-for="task in sortedTasks" class="box" &gt;
          &lt;span v-if="task.starred === 1"&gt;Starred&lt;/span&gt;
          &lt;span v-else &gt;Not Starred&lt;/span&gt;
          &lt;label class="b-checkbox is-primary"&gt;
              &lt;input id="task.id" name="select" :value="task.id" class="styled" type="checkbox"&gt;
              &lt;label :for="task.id"&gt;&lt;/label&gt;
          &lt;/label&gt;
          &lt;div class="spacer-left" style="display: inline-block;"&gt;{{task.title}}&lt;/div&gt;
          &lt;div class="is-pulled-right" style="display: inline-block;"&gt;
              &lt;a v-if="task.starred === 1" @click="setStar(task)"&gt;&lt;i class="far fa-star-exclamation fa-lg has-text-primary"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;a v-else @click="setStar(task)"&gt;&lt;i class="far fa-star fa-lg has-text-primary"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="is-pulled-right" style="display: inline-block;"&gt;
              &lt;span v-if="checkDueDate(task.due_date)" class="has-text-primary is-size-7 spacer-right"&gt;{{formatDueDate(task.due_date)}}&lt;/span&gt;
              &lt;span v-else class="has-text-danger is-size-7 spacer-right"&gt;{{formatDueDate(task.due_date)}}&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="is-pulled-right" style="display: inline-block;"&gt;&lt;span class="is-size-7 spacer-right"&gt;{{task.assigned_to.name}}&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And this is the setStar() method that is called when you click the star</p>
  
  <pre><code>setStar: function (task) {
      // find task in array and change to starred
     let ref = _.findIndex(this.tasks, {'id': task.id});
     console.log(ref);
      let star = this.tasks[ref].starred ?  0 : 1;
      this.$nextTick(function() {
        this.tasks[ref].starred = star;
      });
  
  
      // send api request to update database
      axios.post('api/tasks/star/toggle', {
        id: task.id,
        star: star
      }).then(r =&gt; {
        // do stuff here
      })
  
  
    },
  </code></pre>
  
  <p>The toggle works, as I have a label that I added to check, and this changes when click the star, however. the Icon remains the same. </p>
  
  <p>Any ideas?</p>