deep セレクターを使用する

<style scoped>
:deep(.child) {
  width: 1000px;
}
</style>

style scoped で定義したcssは当該ファイルの全てのタグにdata-v-xxxxxx属性が設定される。

子コンポーネントのルートノードは親のスコープ付き CSS と子のスコープ付き CSS の両方の影響を受ける

つまり子コンポーネントのトップレベルのタグには両方のdata-v-xxxxxx属性が設定される。

※なぜかルートノードなのに親タグの属性が付与されない場合がある。
その場合は更にルートとしてdiv等を追加してやると解決する。

レンダリング後のCS

.child[data-v-2e51c661]

[data-v-2e51c661] .child

.child,
:deep(.child) {
  width: 1000px;
}

Pages内のvueファイルでdeepをつけても、
page内に置かれたタグ、コンポーネントのルートノードには適用されない。
cssクラスが設定されたタグの親に[data-v-2e51c661]の属性がつかないため。

:deep(.child) {
  width: 1000px;
}

コンポーネント内であればそのタグ、子コンポーネントのルートノードには適用される。

:deep(.child) {
  width: 1000px;
}

ルートノードに適用対象がなければdeepをつけておけば全て適用される