title: Use style tags inside vuejs template and update from data model
body: <p>I would like to dynamically update styles <code>inside</code> style tags.</p>
  
  <p>However creating a container model for Vue, removes the <code>style</code> tags.
  I know style tags should belong in the head of the page, but this is just for the sake of ease of use.</p>
  
  <p>So what I would like to have is a wrapper with an element and style tags inside:</p>
  
  <pre><code>&lt;div class="setting"&gt;
    &lt;style&gt;
      .setting input {
        background: {{bgColor}};
      }
    &lt;/style&gt;
    &lt;input class="setting" type="text" v-model="bgColor"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The value from the input should update the value of the css style.
  Whenever done with simple div elements this works, but style tags seem to be a problem</p>
  
  <p>The javascript set up is the following:</p>
  
  <pre><code>new Vue({
      el: '.setting',
      data: {
        bgColor: 'red'
      }
  });
  </code></pre>
  
  <p>However when the style tags have a specific id, this could work, but I can't bind it to an input field.</p>
  
  <pre><code>&lt;style id="setting"&gt;
    #blue {
      background: {{bg}}
    }
    #blue:hover {
      background: {{bgHover}}
    }
  &lt;/style&gt;
  
  &lt;div id="blue"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and the js:</p>
  
  <pre><code>new Vue({
      el: '#setting',
      data: {
        bg: 'blue',
        bgHover: 'red'
      }
  });
  </code></pre>
  
  <p>Can someone help me understand how I can achieve updating values between style tags.
  <a href="https://jsfiddle.net/1dj54afq/23/" rel="noreferrer">jsfiddle set up</a></p>
  
  <p>Thanks.</p>