I have multiple div elements with a class based on a special condition. I’m checking this condition once I receive data from a database. The problem is the component is rendered before receiving the data from a database. I’ve tried to make an async function and use await, but it didn’t work. (I’m not very proficient in JS and Vue)

Component inside v-for:

<div @click="selectChosenAction(week + firstWeekCount - 1, action.id)"
     v-bind="activatorProps"
     :class="checkActionStatus(week + firstWeekCount - 1, action.id)"
     style="height: 15px; width: 15px">
</div> 

Condition function:

 const checkActionStatus = (week, action_id) => {
  httpServer
    .post("selectActionByWeek", { week: week, action: action_id })
    .then((response) => {
      if (response.data[0]) {
        switch (response.data[0].status) {
          case 'Пусто':
            return "bg-blue-grey-lighten-3 rounded-circle mx-auto"
          case 'OK':
            return "bg-light-green-accent-3 rounded-circle mx-auto"

          case 'nOK':
            return "bg-amber-lighten-2 rounded-circle mx-auto"

          default:
            return "bg-blue-grey-lighten-3 rounded-circle mx-auto"
        }
      } else {
        return "bg-blue-grey-lighten-3 rounded-circle mx-auto"
      }

    })
    .catch((error) => console.log(error));
}