How to separate or isolate styles for different layouts in VUE?

Question

Vue.js

Pages are wrapped in a layout-component. These components have styles that overlap. +Styles are loaded for each layout. It is necessary to do something so that while one layout is displayed, the styles of the other do not work.

Is it possible to somehow load the styles of the desired component only when it is open, and when it is not on the page - remove it?
Or is there some other way to implement it?

Answer 1

Kakbe for this, scoped and module styles were invented. If you didn't take care of it right away, it's your own fault.
You can quickly hack it by adding a parent prefix class to the root component of the layout and setting up the loader for auto-substitution. Well, or arrange your hands.