Scoped CSS id's are decoupled from Vue data id's when using Vite's build --watch and styles aren't applied

[earlAchromatic]

Describe the bug

Same issue as #6633 but includes minimal repro.

Summary of issue:

The problem is that there is decoupling between the scoped CSS id's and the data-v-xxxx ids that Vue generates when using vite's build --watch (or watch: true in the config). This is not a problem when importing the component directly instead of from the build.

Reproduction

https://github.com/earlAchromatic/Vite-Watch-Scoped-CSS

System Info

System:
    OS: macOS 12.4
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 1.09 GB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
Binaries:
    Node: 17.2.0 - ~/.nvm/versions/node/v17.2.0/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 8.1.4 - ~/.nvm/versions/node/v17.2.0/bin/npm
Browsers:
    Chrome: 103.0.5060.114
    Chrome Canary: 105.0.5165.0
    Firefox: 102.0.1
    Safari: 15.5
npmPackages:
    @vitejs/plugin-vue: ^2.3.3 => 2.3.3 
    vite: ^2.9.13 => 2.9.13

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

Duplicate of #7980.

This is already fixed by #7989.

I confirmed it works with your reproduction too by upgrading Vite to 3.0.0 and plugin-vue to 3.0.0 and chaging this line to import * as test from 'test/vite-watch-scoped-css.mjs'.
https://github.com/earlAchromatic/Vite-Watch-Scoped-CSS/blob/5732b6d197ab0c088db4f9cd471fc099e8eded7b/playground/index.html#L17