Vue v-if not working even though condition is met (Font Awesome icon not updating)

Question

In VueJS I have a table with columns that can be sorted. Only one column can be sorted at a time.

Before sorting, the button is fa-sort. After sorting, the button changes to fa-arrow-up and then to fa-arrow-down if clicked again.

When I was prototyping my project importing the Vue library script, the v-if worked. But after migrating to Vue CLI, this does not work.

Now if I click the sort button, the sorting is applied but the button icon does not change. However, if I go in my Vue tools and changed the colBeingSorted value in there, the button icon does update.

I have tried many things: I moved the condition (or a variation of it) into a computed, then into a method. I've also printed and console.logged the data to confirm it is what I expect. In all cases, I can confirm the condition is met but for some reason the icon does not update.

Any ideas? Suggestions?

I have reduced the code sample considerably so it doesn't show the sort function, only the button icon formatting. sortedAscending is updated in the sort function which is working correctly:

<table>
  <thead>
    <tr>
      <th v-for="(column, prop) in header" :key="prop">
        <button-component
          v-if="colBeingSorted != prop"
          :icon="'fas fa-sort'"
          @click="colBeingSorted = prop"
        >
        <button-component
          v-else-if="colBeingSorted == prop && sortedAscending == true"
          :icon="'fas fa-arrow-up'"
        >
        <button-component
          v-else-if="colBeingSorted == prop && sortedAscending == false"
          :icon="'fas fa-arrow-down'"
        >
        {{ column }}
...

data() {
    return {
      colBeingSorted: -1,
    }
}

Answer 1

Thanks @Maylor I implemented your change and although it didn't fix the problem on its own, it did make my code cleaner and easier to debug.

After more investigation I found that the problem was not in my Vue code but related to Font Awesome. Under the hood, my button-component uses Font Awesome, which was not re-rendering the icon even though the value had changed.

Following this post, I removed fontawesome/js/all.js and now am only using fontawesome/css/all.css. This solved the problem.