Класс CSS исчез без предупреждения, куда он делся?

У меня есть пример таблицы, взятый из https://element-plus.org/en-US/comComponent/table.html#table-with-status

Я хотел бы придать цвет некоторым строкам.

Вот минимальный рабочий пример:

<script setup lang = "ts">
type TableRec = {
    code: string
    from_title: string | null
    to_title: string | null
    from_title_short: string | null
    to_title_short: string | null
}

const tableData : TableRec[] = [
  {code:"code01", from_title: "value1", from_title_short: "value1", to_title:null, to_title_short:null},
  {code:"code02", from_title: "value2", from_title_short: "value2", to_title:"not null", to_title_short:"not null"},
  {code:"code03", from_title: "value3", from_title_short: "value3", to_title:null, to_title_short:null},  
]

const rowClassName = ({
  row,
  rowIndex
}: {
  row: TableRec
  rowIndex: number
})  => {
  if (!row.to_title) {
    return "warning-row"
  } else {
    return "success"
  }
}

</script>

<template>
    <el-table :data = "tableData" :row-class-name = "rowClassName">
        <el-table-column prop = "code" label = "Code" width = "200" />
        <el-table-column prop = "from_title_short" label = "From" />
        <el-table-column prop = "to_title_short" label = "To" />
    </el-table>
</template>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>

Когда я меняю CSS и сохраняю файл vue, я вижу, что происходит горячая перезагрузка. Запрос выглядит следующим образом:

import {createHotContext as __vite__createHotContext} from "/@vite/client";
import.meta.hot = __vite__createHotContext("/src/components/TranslateCategoryView.vue?vue&type=style&index=0&lang.css");
/* unplugin-vue-components disabled */
import {updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle} from "/@vite/client"
const __vite__id = "/home/user/projects/test/frontend-admin3/src/components/TranslateCategoryView.vue?vue&type=style&index=0&lang.css"
const __vite__css = "\n.el-table .warning-row {\n  --el-table-tr-bg-color: var(--el-color-warning-light-9);\n}\n.el-table .success-row {\n  --el-table-tr-bg-color: var(--el-color-success-light-9);\n}\n"
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
import.meta.hot.prune(()=>__vite__removeStyle(__vite__id))

Никаких сообщений об ошибках или предупреждений не выдается. Я также вижу, что класс warning-row добавлен в <tr>.

Но строки не имеют предупреждающего цвета. Фактически класс «строка предупреждения» не применяется, поскольку его не существует:

То есть он был горячо загружен, но его нет? Я не понимаю, что здесь происходит?

Я также попытался опубликовать этот пример на игровой площадке element plus (https://element-plus.run/). Но, к сожалению, там это работает отлично:

Я предполагаю, что проблема на моей стороне, но сообщений об ошибках и предупреждений нет, и я не могу выяснить причину.