title: Use Vue variable in style section of a component
body: <p>Is it possible to use a variable with the style tag of a component? Basically I have imported a mixin to my style tag that accepts 2 colors to create a gradient within a class. It works great but I want this dynamic so I can set it via a database. I understand I can bind a style via inline but a gradient for a div is rather long and works way better as a mixin. </p>
  
  <p>component:</p>
  
  <pre><code>&lt;template&gt;
  
      &lt;section class="section" v-bind:class=" { 'color-section' : content.gradient_color_one }"&gt;
  
          &lt;div class="container"&gt;
  
              &lt;div class="columns"&gt;
  
                  &lt;div class="column is-half"&gt;
  
                      &lt;h2 class="is-size-4" v-html="content.title"&gt;&lt;/h2&gt;
  
                      &lt;div class="section-content" v-html="content.description"&gt;&lt;/div&gt;
  
                      &lt;a class="button" :href=" '/'+ content.button_link"&gt;{{ content.button_text }}&lt;/a&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="column"&gt;
  
                      &lt;img :src="content.image" :alt="content.title" /&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/section&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
  
          props:[
              'content'
          ],
  
      }
  &lt;/script&gt;
  
  &lt;style lang="scss" scoped&gt;
  
      @import "../../sass/helpers/mixins";
  
      .color-section{
          color:red;
          @include diagonalGradient( content.gradient_color_one , content.gradient_color_two);
      }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>mixins</p>
  
  <pre><code>@mixin diagonalGradient($top, $bottom){
    background: $top;
    background: -moz-linear-gradient(-45deg, $top 0%, $bottom 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, $top), color-stop(100%, $bottom));
    background: -webkit-linear-gradient(-45deg, $top 0%, $bottom 100%);
    background: -o-linear-gradient(-45deg, $top 0%, $bottom 100%);
    background: -ms-linear-gradient(-45deg, $top 0%, $bottom 100%);
    background: linear-gradient(135deg, $top 0%, $bottom 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92fe9d', endColorstr='#00c8ff', GradientType=1 );
  }
  </code></pre>