VueJS/Nuxt Style binding only works on hard reload - vuejs2

Question

I've got a Vue/Nuxt project and I'm having a bit of a weird issue.
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.
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.
I've had a good Google about but can't find anything that suggests I'm doing something wrong.
EDIT: 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.
Here's the component snippet.
<template>
<span class="button-link" :class="{ 'button-link--primary': primary }">
<span
class="button-link__gradient-wrapper-one"
:style="{
backgroundImage: `linear-gradient(to left, ${colorStart}, ${colorEnd});`,
color: 'red'
}"
/>
<span
class="button-link__gradient-wrapper-two"
:style="{
backgroundImage: `linear-gradient(to left, ${colorEnd}, ${colorStart});`,
color: 'red'
}"
/>
<button v-if="!href && !to" class="button-link__button">
<slot />
</button>
<a v-if="href" class="button-link__button" :href="href"><slot /></a>
<nuxt-link v-if="to" :to="to" class="button-link__button">
<slot />
</nuxt-link>
</span>
</template>
<script>
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
}
}
};
</script>
Thanks

Answer 1

Try with a computed properties. For example:
<template>
...
<span
class="button-link__gradient-wrapper-one"
:style="gradientStart"
/>
<span
class="button-link__gradient-wrapper-two"
:style="gradientEnd"
/>
...
</template>
computed: {
gradientStart() {
return {
backgroundImage: `linear-gradient(to left, ${this.colorStart}, ${this.colorEnd})`,
color: "red"
};
},
gradientEnd() {
return {
backgroundImage: `linear-gradient(to left, ${this.colorEnd}, ${this.colorStart})`,
color: "red"
}
}
}

Answer 2

I think i figured it out;
Does not work:
backgroundImage: `linear-gradient(to left, ${colorEnd}, ${colorStart});`
Does work:
backgroundImage: `linear-gradient(to left, ${colorEnd}, ${colorStart})`
Please not the ; removed on the last snippet.