Dev Tools inspection accidentally modifies actual mixins when merging options

[lehni]

Vue devtools version

6.5.0

Link to minimal reproduction

https://sfc.vuejs.org/#eNq9Vc1u2zAMfhXBGJAWSGysuwVusHXnoYcOu8w7ODYdK7UlQ5KTFEbefdSf7ThZ2qHYLon4o4/kR5Hugi9NE+5aCJZBrKBuqlTBKmGExDndmQMey4+rHy2QT+QbPVBGHtqNjCNUOvMjAxJ54fueDwJaBjmOLGQcjQKhKDNBG2VcaN1woYgGLASvySyM8Kzzm43MGtKb8Tw1u6AjgMFJu8HBuOVQpG2lSGdzzTjeZsCUXJJOY8x1nLlHO2ov/ImjPt1gHtiIizptwq3kDEk0aIkzyCRAMIufBJiBlpOgVKqRyyiSRabT2sqQi02Ep1C0TNEaQpD1Yi34XoJA4CSYjzAiVO5ALASwHASIa5gT1zNcV9QRSzGt1WRvJZZxiaNGcAxBfs6QptkvkxLUVPNlVXMyU3tu/koBRi54K5yr5rdVkPeEeAXGvLklnSe4z0U37bVcHBSG7c8ovTSwJE9KULZxxBF/e2lztFob8rSQgu5M5pIeXkscE5wm/pBK81qn05Sok3G6W3UdYWkN5HjEQbrzhobsFrS4TwIfIgmc6SSNrhfwvrsaNR5k3SrFGSJBJYF8ziqaPSOkLPn+6znsE6pJr3dYFuKtQ3t5nvJUpZoeFyhRAlQrmFYkaloSa6vKZ+Qqsn3Bi+a3BlXyfOg4IeN6RnF0/0sqw56he/K43kKmwmd4kTfG9oE3inI2ON1OY18cdreJdG/PV5bufL9y/DMYbyU/X73TaOCuLiY4KBxfLF2jOlJqfVe/Vw9in+oZ68STbl4bPn50nf2xSqzRbcr31DjevaNBfmeNCPLWGtH1ao3DB+HftPJ/0GG+T39LjC38CjfH3xuFoLc=

Steps to reproduce & screenshots

See this video:

vue-devtools-bug.mov

What is expected?

When not using dev-tools, each component shows its computed getters correctly when clicking the buttons, as shown in the first half of the movie.

What is actually happening?

After reloading the page to bust the internal cache and using the dev tools to inspect each component, component One suddenly inherits a computed getter form MixinTwo which shouldn't be there.

Any additional comments?

The leak happens in component OneTwo, where I believe it first receives the original computed object from MixinOne (instead of a clone), see:

devtools/packages/app-backend-vue3/src/components/data.ts

Line 486 in 4696a73

to[key] = from[key]

And when MixinTwo is applied, this original computed object from MixinOne wrongly receives new entries:

devtools/packages/app-backend-vue3/src/components/data.ts

Line 488 in 4696a73

Object.assign(to[key], from[key])

[lehni]

The fix could be as simple as this in that second statement:

to[key] = Object.assign({}, to[key], from[key]);