title: How to pass styles to child component and use it as scoped style in Vue?
body: <p>I have a parent component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;ChildComponent :styles="styles" /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      data: () =&gt; ({
          styles: `
              p {
                  color: red
              }
          `
      })
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And this is the child component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;p&gt;Hello World&lt;/p&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      props: {
          styles: {
              type: String,
              required: true
          }
      }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>Now I want to use those styles provided by the parent component in child as scoped styles. Like for example:</p>
  
  <pre><code>&lt;!-- ChildComponent.vue --&gt;
  
  &lt;style scoped&gt;
  p {
      color: red
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Is there any way to do so?</p>