A classe CSS desapareceu sem aviso prévio, para onde foi?

Eu tenho esta tabela de exemplo retirada de https://element-plus.org/en-US/component/table.html#table-with-status

Eu gostaria de dar um pouco de cor para algumas linhas.

Aqui está um exemplo mínimo de trabalho:

<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>

Quando altero o CSS e salvo o arquivo vue, posso ver que o recarregamento a quente acontece. A solicitação fica assim:

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))

Não há mensagem de erro ou aviso emitido. Também posso ver que a warning-rowclasse é adicionada a<tr>

Mas as linhas não possuem uma cor de aviso. Na verdade, a classe "warning-row" não é aplicada porque não existe:

Então foi carregado a quente, mas não existe? Não entendo, o que está acontecendo aqui?

Também tentei postar este exemplo em element plus playground ( https://element-plus.run/ ). Mas, infelizmente, funciona perfeitamente lá:

Acho que o problema está do meu lado, mas não há mensagens de erro nem avisos, e não consigo descobrir a causa raiz.