Как под капотом работает scoped-стили во Vue?

Vue преобразует scoped-селекторы, добавляя атрибут области видимости, и ставит соответствующий data-v-* на элементы компонента.

Например, .title становится .title[data-v-...]. Это преобразование сборки, а не Shadow DOM: глобальные стили по-прежнему могут влиять на элемент. Корневой узел дочернего компонента может получить scoped-стили родителя для layout. Для намеренного проникновения внутрь дочернего компонента используется :deep(), а для содержимого слотов — :slotted().

Источник: vuejs.org.