[Bug Report][3.6.14] VExpansionPanels Performance Issues

[timaqu]

Environment

Vuetify Version: 3.6.14 Last working version: 2.7.2 Vue Version: 3.5.0-alpha.5 Browsers: Firefox 128.0 OS: Windows, Linux

Steps to reproduce

1. Open the console.
2. Collapse/Expand Panels.
3. Verify console logs.
4. Remove v-model="expanded".
5. Open all panels.
6. Collapse/Expand Panels.
7. Verify console logs.

Expected Behavior

Only the collapsed/expanded panel should recalculate its own title/text.

Actual Behavior

All expanded panels recalculate their title/text.

Reproduction Link

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

Other comments

The problem seems to be the v-model here. If you remove v-model, only the collapsed/expanded panel will recalculate its own title/text.

The problem with this workaround is, that you are unable to expand panels by default. You need to expand the panels manually one by one.

In Vuetify 2.7.2, this was not an issue.

[huynhtehoa]

I think this is related to a Vue issue discussed here. When the parent state (modelValue from v-model in this case) changes -> all its slots are re-rendered.

In your case, if you only want to expand panels by default, I think you can achieve this using template ref. Maybe Vuetify team can suggest a better approach, but you can check out my workaround attempt here.

Note: I have not tested Vuetify 2.7.2

[timaqu]

Thanks for your feedback, The workaround works perfectly for me.