I am using `BootstrapVue` in my `Vuejs` project, I face a weired issue **"Invalid prop"** with `b-table-simple` componentin`b-thead` table helper I bind colspan with array length which always gives a number, and it works fine but it generates console warning message: 

```
[Vue warn]: Invalid prop: custom validator check failed for prop "colspan".

found in

---> <BTh>
       <BTr>
         <BThead>
           <BTableSimple>
             <NationalTrends> at resources/js/components/trends/NationalTrends.vue
               <Trends> at resources/js/components/trends/Trends.vue
                 <Root>

```

When I put number (4 or any other number) it works fine without generating the warning in the console.

Below is my code:

```
<template>
<div>
<b-table-simple hover small caption-top responsive striped>
                    <caption>Commodity Trends</caption>
                    <b-thead head-variant="light">
                        <b-tr>
                            <b-th>Commodity</b-th>
                            <b-th>Current Month</b-th>
                            <b-th :colspan="selected_periods.length">Previous Period</b-th>
                            <b-th :colspan="selected_periods.length">% Change From the Previous Period</b-th>
                            <b-th :colspan="selected_periods.length" class="text-center">Direction of Change</b-th>
                        </b-tr>
</div>
</template>

```

Please help, I spent one hour trying to figure out whats the problem but no luck......