Very good the guide.

I would like to know your opinions about /deep/ selector.

It turns out that the father needs a change in the child only in the visual. I do not know if this violates FIRST.

This feature is implemented in 12.2.0 (vue-loader) May 2017
Issue: vuejs/vue-loader#661

I like this feature because it avoids increasing the code in the child components.
For example, create a props in the child just to increase the space (margin/padding) in style inline and then one more props to change other styles. It does not sound good to me.

/deep/ selector example:

<template>
    <icon name="phone" />
</template>

<style scoped>
    .link:hover /deep/ .icon svg {
        fill: white;
    }
</style>