All scoped CSS are loaded when extractCSS is enabled

Environment

• Operating System: Darwin
• Node Version: v14.17.6
• Nuxt Version: 2.15.8
• Package Manager: npm@6.14.15
• Bundler: Webpack
• User Config: ssr, dev, modern, env, render, head, loading, css, plugins, components, modules, buildModules, purgeCSS, axios, publicRuntimeConfig, privateRuntimeConfig, build, router, pwa, vuetify
• Runtime Modules: @nuxtjs/axios@5.13.6
• Build Modules: @nuxtjs/pwa@3.3.5, @nuxtjs/vuetify@1.12.3, @nuxtjs/composition-api/module@^0.31.0, nuxt-custom-headers@2.1.0, nuxt-purgecss@1.0.0, @/modules/admanager, @nuxtjs/firebase@8.2.2

Reproduction

https://codesandbox.io/s/clever-einstein-rkbwb?file=/nuxt.config.js

Describe the bug

When load a page, all css files are loaded from pages and components, same the scoped attribute is present.

Ex:
pages

• index.vue (scoped style)
• about.vue (scoped style)

components

• componenta.vue (scroped style)
• componentb.vue (scoped style)

When request page index.vue are loaded all CSS: index.css, about.css, componenta.css, componentb.css

Additional context

No response

Logs

No response

Start with the linked CodeSandbox reproduction and inspect its nuxt.config.js, focusing on the extractCSS setting and the scoped styles described in the issue. Reproduce a request for index.vue and verify that only the CSS required for that page is loaded rather than the styles from about.vue and the other components.