class style isn't update while the content is

Question

I want to show an icon depending if variable is true or false, so I just made a ternary operator to do this :

getClass(enabled) {
      return enabled ? "fa fa-check" : "fa fa-times";
}

I call it like this :

<div slot-scope="{ row }" class="f-flex">
   <i :class="getClass(row.enabled)" />{{ row.enabled }}
</div>

It works first (when I load the page)

but when I change the row.enabled variable, it doesn't work whereas the content is changed

I also tried to put the entire data into an array like this :

this.dashboards.forEach((d) => {
  this.enabledDashboards[d._id] = d.enabled;
  this.default_range[d._id] = this.ranges.find((r) => r.value == d.default_range).label;
});

and now I get the class like this :

     <i :class="getClass(row._id)" />{{ enabledDashboards[row._id] }}
</div>

getClass(id) {
      return this.enabledDashboards[id] ? "fa fa-check" : "fa fa-times";
    },

But it won't work