Fill a table with an array of objects? Vuejs

Question

Hi, I’m new to VUEJS and I’m having some difficulties... I want to create a table (I’m using Bootstrap-Vue, and Vue CLI and Javascript), and fill in some data. I did it in a way that worked, but I know I could do a v-for or something so I don’t have to duplicate the lines of code so much.

 <b-table responsive :items="employees" :fields="fields" caption-top class="mb-0">

   <template #cell(january)="data">
     <span :class="classNameRate" class="d-block">
       {{ data.item.january.rate | porcent }}
     </span>
     <small>
       {{ data.item.january.value | currency }}
     </small>
   </template>

 </b-table>

This part that’s inside template I had to repeat to have to january to december.

I tried several ways and could not. Someone could help me?

I put the parts of the code in the link: https://jsfiddle.net/grazieelak/f4u9wbcm/14/

My goal is to have what it shows in the image below (I already have with the code I put above, just like to know how to improve it):

^{Click on imagme to view it in its original size}