title: How to apply Vue.js scoped styles to components loaded via view-router?
body: <p>How can I apply Vue.js scoped styles to components loaded via <code>&lt;view-router&gt;</code>.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="admin"&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;style lang="scss" scoped&gt;
  #admin {
    .actions {
      display: none;
      span {
        cursor: pointer;
      }
    }
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>When I visit the <code>/posts</code> a component named <code>Posts</code> will be loaded, inside this component I have a </p>
  
  <pre><code>&lt;div class="actions"&gt;
    some content
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that the style defined in <code>#admin</code> is not applied to <code>.action</code> element. When not scoped, this works fine. The problem come when the <code>#admin</code> component styling is <code>scoped</code>.</p>
  
  <p>Is there any way to do that while keeping the <code>.actions</code> style inside the <code>admin</code> component scoped style tag?</p>