Vuejs2 VueJS/Nuxt样式绑定仅在硬重新加载时有效

我有一个Vue/Nuxt项目，我遇到了一个有点奇怪的问题

我有一个组件，可以呈现一个带有各种CSS样式的按钮，这一切都很好。我也有一些风格，我需要通过道具控制，所以我有这些绑定到一个风格标签。但是，如果我使用Nuxt链接导航到页面，或者我对组件进行更改并HMR重新加载它，那么内联样式就会消失

我试图通过包含一个来自道具的内联样式和一个我刚刚硬编码的内联样式来缩小范围。与以前一样，不会渲染来自道具的样式，但会渲染硬编码样式

我在谷歌上搜索得很好，但找不到任何暗示我做错了什么的东西

编辑：所以我把范围缩小了一点。这不是道具，而是线性渐变。即使是硬编码的线性渐变也不会渲染

下面是组件片段

<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>

导出默认值{
道具：{
主要：{
类型：布尔型，
默认值：false
},
颜色开始：{
类型：字符串，
默认值：null
},
colorEnd：{
类型：字符串，
默认值：null
},
href:{
类型：字符串，
默认值：null
},
致：{
类型：字符串，
默认值：null
}
}
};

---

谢谢

请尝试使用计算属性。例如：

...
...

计算：{
gradientStart（）{
返回{
背景图像：`线性渐变（向左，${this.colorStart}，${this.colorEnd}）`，
颜色：“红色”
};
},
梯度结束（）{
返回{
背景图像：`线性渐变（向左，${this.colorEnd}，${this.colorStart}）`，
颜色：“红色”
}
}
}

我也尝试过从计算属性中添加这些样式，但这并没有什么区别。我也有同样的问题，从计算属性中添加

'background-url'

，我已经尝试过了。这似乎与它是一个线性梯度有关。出于某种原因，Vue不会渲染它，除非它是硬重新加载。@ScottBamforth，这很奇怪。我试图以一种简单的方式重现这个问题，它（以一种基本的方式）奏效了。也许你也可以尝试用正确的配置重现你的问题。