How to isolate a component from external styles (css-framework'a)?

Question

Node.js

For example, I have the following component structure:

<App>
    <Layout>
        <Component1>
        <Component2>

Also included Materialize

<!-- Внутри компонента App -->
<style>
@import 'materialize-css/dist/css/materialize.min.css';
</style>

How can I make materialize styles not work inside my Component1 and Component2 components?

What I tried:
1) Connect materialize through the resource:

<style scoped src="materialize-css/dist/css/materialize.min.css"></style>

Then materialize works only for this component - everything is ok (inside, each style is preceded by the parent data-v-xxx selector). But the problem is that you need to import it in each component, respectively, the styles are duplicated for each component.
2) I found this solution on SO:

<!-- Внутри компонента App -->
<style>
#app, #layout { /* или с псевдо-селектором /deep/ */
    @import 'materialize-css/dist/css/materialize.min.css';
}
</style>

But scss doesn't want to compile. Lint does not give any error, just materialize does not connect.

I'm just learning node, vue, so please don't swear.