Table: Adding classes using :td-attrs causes a recursive error on hot reload

[DavidVanDeursen]

Overview of the problem

Oruga version: [0.12.6]
Vuejs version: [3.5.25]

Description

When adding tdAttrs to a column using a slot like so:
<o-table-column field="id" label="Id" width="40" :td-attrs="{class:'test'}"/>
the following error is triggered when doing a hot reload:
Uncaught (in promise) Maximum recursive updates exceeded in component <OTable>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

Expected behavior

A hot reload should not cause a crash.

Steps to reproduce

The easiest way to reproduce is to modify the base.vue example in the oruga npm run dev environment.

1. Modify the first column of the example to include a tdAttrs like so:
   <o-table-column field="id" label="Id" width="40" numeric sortable :td-attrs="{class:'test'}"/>
2. Build the app and go to the table page.
3. Change a value in the table data causing a hot reload.
4. In the console check that an error is thrown.

Interestingly changing it to a variable like so:
<o-table-column field="id" label="Id" width="40" numeric sortable :td-attrs="tdClass"/>
where tdClass is the exact same object, does not cause a crash when reloading.

[mlmoravek]

Thank you for reporting this. I think we've had a similar problem before.
As you have already shown a workaround, please consider using it as I try to find a fix.

Edit: Related to #838

[mlmoravek]

I spent a long time investigating. I understand why this happens. However, I couldn't find a solution to fix it, nor could I come up with a different implementation strategy to prevent it.

The only thing I can currently do is add a hint to the docs about this behaviour.