Изменить цвет ячейки таблицы на основе другого значения ячейки в javascript VUE

У меня есть такая таблица во Vue:

      <table>
    <tr>
      <td class = "headt">
        <strong> Account: </strong>
   
      </td>
      <th class = "headv"> FY 2022 - Current Q1  </th>
      <th class = "headv">FY 2022 - Q2</th>
      <th class = "headv">FY 2022 - Q2</th>
    </tr>
    <tr>
      <th class = "headv">Forecast REVENVUE ($K) </th>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
    </tr>
    <tr>
      <th class = "headv">Forecast COST ($K)</th>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
    </tr>
    <tr>
      <th class = "headv">  1st AOP % </th>
      <td>40%</td>
      <td>50 %</td>
      <td>60 %</td>
    </tr>
    <tr>
      <th class = "headv">COST ($K) </th>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
    </tr>
    <tr>
      <th class = "headv">2nd AOP % </th>
      <td id = "test">40 %</td>
      <td >80 %</td>
      <td>90 %</td>
    </tr>
  </table>

Я хочу изменить цвет 2-го АОП% (последняя строка) на основе 1-го АОП%. Если 2-й процент АОП больше 1-го АОП, тогда я хочу изменить цвет ячейки на зеленый или красный цвет для ячейки.