Vue.jsdocumentación para CSS con ámbito menciona que

Puede incluir estilos con ámbito y sin ámbito en el mismo componente

Yo construi elejemplo de aplicación paravue-router y usé dos componentes de archivo único en lugar de las plantillas de cadena del ejemplo: la representación es la esperada.

Luego intenté aplicar estilos con y sin ámbito en los componentes. En el primero tengo

<style scoped>
div {
    color: white;
    background-color: blue;
}
</style>

<style>
body {
    background-color: green;
}
</style>

y el segundo

<style scoped>
div {
    color: white;
    background-color: red;
}
</style>

<style>
body {
    background-color: yellow;
}
</style>

La idea es tener el cambio de fondo de todo el cuerpo al elegir una ruta específica.

losscoped los estilos están bien, cambian según la ruta.

Los que no tienen alcance no lo hacen (las capturas de pantalla son de Chrome Dev Tools):

en la carga inicial de la aplicación (aún no enrutado) el fondo es blanco (lo cual está bien; este es el predeterminado y no hay una ruta para/)al elegir una ruta, el estilo del cuerpo se aplica correctamente (por ejemplo,green desde el primer componente)

al cambiar de ruta y cargar el segundo componente, el fondo cambia al nuevo color, parece que desde Chrome Dev Tools el estilo actual parabackground-color está sobreescrito Todos los demás elementos componentes se representan correctamente (contenido y estilo de ámbito)

los interruptores adicionales mantienen el mismo fondo (y nuevamente, otros elementos del componente relevante se representan correctamente). No hay cambios en Chrome Dev Tools (la última vista anterior no ha cambiado)

En otras palabras,parece que el estilo está apilado y las propiedades sobrescritas anteriormente no se actualizan ¿Es este comportamiento esperado?