vuejs に scoped style というものがあります。

それはコンポーネント内に一意の属性を付けて周りスタイルをそこに閉じ込めるものです。

具体的には

<style scoped>
.hoge {
    color:red;
}
</style>

と書くことで

<style>
[identity].hoge {
    color: red;
}
</style>

の様な変換がされます。
ただ、上記の変換ルールに不備があります。
具体的には css nesting と :deep() (::v-deep()) を併用した時に問題となります。

<style scoped>
.hoge {
    :deep(.fuga) {
        color:red;
    }
}
</style>

これだと下記の様なスタイルが生成されます。

<style>
.hoge {
    [identity] .fuga {
        color: red;
    }
}
</style>

つまり、.hoge .fuga の意が .hoge [identity] .fuga になってしまいセレクタが壊れてしまうということです。
この不具合がある状態で正しいセレクターを生成させるにはこう書く必要があります。

<style scoped>
.hoge {
    &  :deep(.fuga) {
        color:red;
    }
}
</style>

これだと下記の様な生成になります。

<style>
.hoge {
    &[identity] .fuga {
        color: red;
    }
}
</style>

つまりこれなら .hoge &[identity] .fuga となり最終的な解釈は .hoge[identity] .fuga となりますので想定されたスタイルとなります。

でそれを vuejs/core にて issues で報告したのが下記となります。

CSS nesting and :deep() in scoped styles not working · Issue #13159 · vuejs/core

やはり play.vuejs.org が状態をURLに保存する構造をしているので共有が楽でよいですね。

これの対応の pull request は下記となります。

[fix(compiler-sfc): auto add nesting selector for nesting ::v-deep by edison1105 · Pull Request #13163 · vuejs/core]
(https://github.com/vuejs/core/pull/13163)

以上。