Use style tags inside vuejs template and update from data model

Question

I would like to dynamically update styles inside style tags.

However creating a container model for Vue, removes the style tags. I know sty

Answer 1

Here's what I think is a good workaround/solution.

It is just a custom component, so it's as reusable as it gets. All of Vue's goods like v-if can all be used.

Another pro is that the styles generated will be there only as long as the component is!

Vue.component('v-style', {
  render: function (createElement) {
    return createElement('style', this.$slots.default)
  }
});


// demo usage, check the template
new Vue({
  el: '#app',
  data: {
    bgColor: 'red'
  }
})

  
    .stuff input {
      background: {{bgColor}};
    }
  

  Remove "red" and type "yellow":
  

The one drawback I see is that since the name of the tag is (or whatever you chose to call it) and not