[Bug Report][3.4.7] Selection in VDataTable broken when using return-object and Composition API

[MelvinFrohike]

Environment

Vuetify Version: 3.4.7
Vue Version: 3.3.11
Browsers: Safari 17.2
OS: Mac OS 10.15.7

Steps to reproduce

In the given example select any table item, then deselect it. The "selected" ref now contains the item twice. Continuing to select other items messes up the "selected" ref even more.

Expected Behavior

Selecting and deselecting should add and remove from the ref

Actual Behavior

Items are added to the ref twice

Reproduction Link

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

Other comments

When translating the example above to the options API, it works flawlessly.
This issue was already mentioned in the discussions here: #18509
While there is a proposed workaround, it is too complicated IMO.

[davidkhess]

Ran into this myself and debugged it down to the composables/select.ts file. The test if an existing item (which is an object when return-object is true, the value of id when false) is in the selected Set doesn't work correctly and it keeps adding different proxy objects of the same row repeatedly to the selected Set.

It looks like this use of Set doesn't test membership correctly when working with reactive objects. MDN says it does a === comparison. I think the problem may be because even with the same underlying table item, the test ends up comparing two different ProxyObjects to that same item. Probably needs some use of toRaw() - https://vuejs.org/api/reactivity-advanced.html#toraw.

Workaround is to not use return-object for the moment.

[websitevirtuoso]

it worked on 3.3.19. but right now this is bug

[johnleider]

Caused by 5f20f48