[Bug Report][3.7.6] VDataTable: Cannot read private member Error when using #[item.${string}] slots

[Chris-McQuiggan]

Environment

Vuetify Version: 3.7.6
Vue Version: 3.5.13
Browsers: Chrome 131.0.0.0
OS: Windows 10

Steps to reproduce

1. Create a class with a private member (eg #id) and create a getter that accesses that member (eg id).
2. Create a data table showing a list of items of that class
3. Add headers for the table that access that property
4. Note that the value is shown on the data table at this point
5. Add a template for #[item.id]
6. Try to render item
7. Observe error

Expected Behavior

Expected to be able to access the public getter value

Actual Behavior

Get the error: "Cannot read private member #id from an object whose class did not declare it"

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Also note that the properties can be accessed fine from within the script.

[Chris-McQuiggan]

I'm assuming this is caused by using a Proxy wrapper before returning the item in the slot. There seems to be a work around in the Moziila docs to still use a Proxy but still allow internal functions to access private members. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy#no_private_property_forwarding

[KaelWD]

The proxy here is vue's MutableReactiveHandler, you will have the same error if you try to put your class instance in a ref() or reactive().