Vue/Nuxt.js - v-html CSS (scoped) 에 스타일이 적용안되는 현상

Vue/Nuxt 에서 개발할때 컴포넌트에서 <style> 영역에서 <style scoped> 속성을 부여하면 해당 컴포넌트에서만

스타일이 적용된다. 그런데 v-html 속성을 통해서 렌더링된 HTML 코드에는 Vue-Loader 를 통하지 않기 때문에

scoped 를 지정했는데도 스타일이 적용이 되질 않는다.

<style scoped>
.page img { width:100% !important }

이 문제는 렌더링 순서에 따른 문제인데 다음과 같이 Deep Selector(딥셀렉터)로 지정되면 해결된다.

<style scoped>
.page >>> img { width:100% !important; }

링크