Vue Component Style Conflict Issue

[KikoRepub]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqlVNuK2zAQ/RVVL2lh12Zx24DrDbTLQlvohW6hL4Li2hPHG1kSkpwmBP97RxNfkrDdLdR5kWZGozPnnGjP3xoTbVrgKc9cYWvjmQPfmoVQQtWN0dazPbOwZB1bWt2wGRbPxlSzu9G4UqA86/NRfBQMrWdvQq9CK4f1rmLXod3z2XuQUrMf2sry2exFKMniAwK6O/PQGJl7wB1j2epqsd/T8a7LYtxRtFam9Wxz2egS5LXgmBecxdQA083ushiQhGAWHzXlF9w7RLWsq+jeaYUM7MMpwcOZWoL9YnyNqAVPGWVCLkfQvz9SzNsWLoZ4sYJi/UD83m1DTPCvFhzYDQg+5nxuK/CH9O3dZ9jiekziSK3E6keS38Bp2QaMh7J3rSoR9lEdof1AUtWq+u5utx6UG4YKQENlR/WCo1ZBuL+NPsFNopd0TqgOWTyTe3ISktzbRNZLuNkVEkaPjJHJIbCl2hKWeSvRdeEKlTeQCv5puqKfzlhtXNpj87WXMGwosDOQ3nmLQ/dchK/vjP3wR1GcYBh/NMrYdYQ4zPq4Q8t6Q4tg1mTxmj50ajIEJw5Swot2nc/nggdjUoGT2pN3cR0fup0YFrfO7/A8utZASYWrZNDnV16sK6vRAuh5qW3KTK3WSCxhR+Dh6ALlOmH+RCzGHpJgFGHiYzDYiQj/LQMxjEZ74iU45RkfBbr28CyMZOMKyZ2fhc4U+VfCn2S6sgDqnGp6YX5uwIb/G/KcRK+iq4R3fwCj2MeS

Steps to reproduce

You need to start the service and preview it in the browser. Comment out the h3 tags in lifeCycle.vue one by one and observe the results.

What is expected?

When only one h3 tag is left in lifeCycle.vue, its background color will turn pink ( using the style from MyComponent.vue )

What is actually happening?

When the h3 tags in lifeCycle.vue are commented out, leaving only one, the corresponding h3 style will adopt the style declared in MyComponent.vue, rather than the style declared in lifeCycle.vue

System Info

Invalid prop: type check failed for prop "title". Expected String with value "666", got Number with value 666. 
  at <LifeCycle title=666 >

Any additional comments?

This issue did not occur in the SFC playground, but if the service is started locally, a bug will appear in the browser display.

[jh-leong]

I can’t reproduce this issue locally. It might be related to your local build environment. Could you please provide a GitHub repo for reproducing?