VueJs component template v-bind class as parameter

I have a somewhat strange situation, where the documentation that mentions the error: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties is not being useful to me or I am not understanding it as it is supposes.

With no further details to add at the moment, let's get to the code:

Component:

Vue.component("product-card", {
  props: ["title", "price", "url", "sku", "retina", "image", "cssclass"],
    template: `<a v-bind:class="cssclass" v-bind:href= "url">
            <img
                v-bind:alt = "title"
                v-bind:src = "image"
                v-bind:srcset = "retina"
            />
            <h3 class = "fx-product-carousel-cell__title"> 
            {{title}}
            </h3>
            <div class = "fx-price" > {{price}} </div>
            </a>`
}); 

Component Usage:

 <product-card v-for="product in introductionProducts"
      v-bind:key="product.ProductCode"
      v-bind:title="product.Name"
      v-bind:url="getURL(product.ProductCode)"
      v-bind:image="getSrc(product.ProductCode)"
      v-bind:retina="getRetina(product.ProductCode)"
      v-bind:cssclass="fx-display-board__item"
      v-bind:price="product.Price"
 ></product-card>

And it gives me the error:

[Vue warn]: Property or method "fx" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "display" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "board__item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "fx" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "display" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "board__item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "fx" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "display" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "board__item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "fx" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "display" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "board__item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>) vue.js:597:7 

Solution attempts:

It occurred to me that maybe the problem comes with the name of the class, yes, because of the hyphens, so I replaced the name of the class with

v-bind:cssclass="fxdisplayboarditem"

No, it didn't work.

If I move the cssclass property statically to the component template, it remains:

<a class="fx-display-board__item" v-bind:href= "url">

Previously being:

<a v-bind:class="cssclass" v-bind:href= "url">

It works, however what is the point of creating a component? Make it reusable... Any ideas?