vue-loader 导致 component 内部 classes 样式失效

Question

组件内部的 classes 样式都会在调试工具里面显示，常识对吗？（图贴在最下面）

App.vue 代码：

<template>
  <div id="app">
    <p>App.vue 输出</p>
    <router-view></router-view>
  </div>
</template>

<script>
import topNav from './components/topNav'
export default {
  components: {
    topNav
  }
}
</script>

<style scoped>
p {
  color: red;
}
</style>

login.vue 代码：

<template>
  <div>
    <p>Login.vue 输出</p>
    <transition name="login-fade" mode="in-out">
      <section class="login-container" v-show="showLoginForm">
        <div class="login-form-header">
          <span class="header">登录</span>
        </div>
        
        <el-form> ... </el-from>
      </section>
    </transition>
  </div>
</template>
<script> ... </script>
<style lang="scss" scoped>
p {
  color: red;
}
.login-form-header {
  ...
  p {
    color: green;
  }
}
</style>

vue-loader CSS作用域 scoped 限定作用范围。但是 组件内部定义的 classes 竟然无法修改组件自身样式，这是什么道理？在 App.vue 里面使用 router-view 动态调用了组件，会导致样式失效？这个 Add scoped attribute... 已经合进去了，为什么还是不行？另外，去不去掉 scoped 都是一样的。
按照我的理解，scoped 只限制“元素选择器”的作用范围啊，为什么这里的 classes 选择器会失效？有没有大神能帮指点迷津？万分感谢！