Привязать переменную sass к реквизитам vue

я пытался создать повторно используемый компонент на vue js, я использовал переменные sass для согласованности цвета, размера и т. д. и я понятия не имею, как передать переменную sass, используя реквизиты на vue js. если я использую его прямо в <style> вот так, он работает нормально.

<template lang = "pug">
  button.button-filled {{ title }}
</template>

<script>
export default {
  props: {
    title: { default: "", type: String }
  }
};
</script>

<style lang = "sass">
.button-filled
  background: $primary
  padding: $p-1 $p-4
  color: $white
  font-weight: 500
</style>

Но если я использую эту переменную в подобных свойствах, она не работает должным образом.

<template lang = "pug">
  button.button-filled(
    :style = "{ 'background': backgroundColor }"
  ) {{ title }}
</template>

<script>
export default {
  props: {
    backgroundColor: { default: "$bg-info", type: String },
    title: { default: "", type: String }
  }
};
</script>

<style lang = "sass">
.button-filled
</style>