Reactive component class vue js using props

[Silbivi]

I've tried using a reusable component on vue js like pass props class name. In my case, I'm using tailwind css. How can I pass class name using props?

this is my code

<template lang="pug">
  router-link.button-filled(
      :to="routeName"
      :title="title"
      :class="customClass"
    )
    | {{ title }}
</template>

<script>
export default {
  props: {
    routeName: { default: "/", type: String },
    title: { default: "Button", type: String },
    size: { default: "md", type: String },
    backgroundColor: { default: "red-500", type: String },
    borderColor: { default: "red-500", type: String }
  },
  computed: {
    customClass() {
      return [
        "bg-" + this.backgroundColor,
        "border-" + this.borderColor
      ];
    }
  }
};
</script>

This is my tailwind.config.js

module.exports = {
  prefix: 'fst-',
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

And this is my master.sass

@tailwindcss base

@tailwindcss components
@import "./components/button-filled"
@import "./components/button-outlined"

@tailwindcss utilities

This is my result after I pass class using props. Nothing changed but class success loaded on html attribute.