title: Font Awesome not updating properly with vue
body: <p>I'm trying to make a clickable "star" icon using font-awesome with bulma, switching between regular and solid styles (fas and far) in Vue, to achieve this I have the following component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;span v-if="isStarred" class="icon starred config-icon clickable-text" @click="unstar"&gt;
          &lt;i class="far fa-star" title="Unstar Ranking"/&gt;
      &lt;/span&gt;
      &lt;span v-else class="icon unstarred config-icon clickable-text" @click="star"&gt;
          &lt;i class="fas fa-star" title="Star Ranking"/&gt;
      &lt;/span&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>The value <code>isStarred</code> is being updated properly and the span elements are updating accordingly. However the <code>i</code> element with the icon doesn't update until I fully reload the page.</p>
  
  <p>I was able to make this work with <code>v-show</code> instead of <code>v-if</code> but I don't understand why this wouldn't work.</p>