title: VueJS/Nuxt Style binding only works on hard reload
body: <p>I've got a Vue/Nuxt project and I'm having a bit of a weird issue.</p>
  
  <p>I have a component that renders a button with various CSS styles and that's all working fine. I've also got some styles that I need to control via props, so I have these bound to a style tag. This all works on the initial load of the page, however, if I navigate to the page using a Nuxt link, or I make changes to the component and HMR reloads it, then the inline styles disappear.</p>
  
  <p>I've tried to narrow this down a bit by including an inline style that comes from a prop, and an inline style that I have just hardcoded. As before, the style coming from the prop isn't rendered, but the hardcoded style is.</p>
  
  <p>I've had a good Google about but can't find anything that suggests I'm doing something wrong.</p>
  
  <p><strong>EDIT</strong>: So I've narrowed it down a bit. It's not the props, it's the linear gradient. Even a hardcoded linear gradient doesn't render.</p>
  
  <p>Here's the component snippet.</p>
  
  <pre><code>&lt;template&gt;
    &lt;span class="button-link" :class="{ 'button-link--primary': primary }"&gt;
      &lt;span
        class="button-link__gradient-wrapper-one"
        :style="{
          backgroundImage: `linear-gradient(to left, ${colorStart}, ${colorEnd});`,
          color: 'red'
        }"
      /&gt;
      &lt;span
        class="button-link__gradient-wrapper-two"
        :style="{
          backgroundImage: `linear-gradient(to left, ${colorEnd}, ${colorStart});`,
          color: 'red'
        }"
      /&gt;
      &lt;button v-if="!href &amp;&amp; !to" class="button-link__button"&gt;
        &lt;slot /&gt;
      &lt;/button&gt;
      &lt;a v-if="href" class="button-link__button" :href="href"&gt;&lt;slot /&gt;&lt;/a&gt;
      &lt;nuxt-link v-if="to" :to="to" class="button-link__button"&gt;
        &lt;slot /&gt;
      &lt;/nuxt-link&gt;
    &lt;/span&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: {
      primary: {
        type: Boolean,
        default: false
      },
      colorStart: {
        type: String,
        default: null
      },
      colorEnd: {
        type: String,
        default: null
      },
      href: {
        type: String,
        default: null
      },
      to: {
        type: String,
        default: null
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks</p>