BootstrapVue b-col formatting not working in child component - vuejs2

Question

I'm creating a calendar with a bg-primary for the container. For each row (week), I use a b-row with class of pb-2. I then have individual b-col's for the days. The b-col for Sunday uses px-2 while the other days have pr-2 and pl-0. This gives me the gutter all around that I desire. If I put the code in my main component, everything works fine. However, if I pass an array for one week of days to the child component, no gutters show.
*** CalendarGrid.vue <script> ***
data() {
return {
days: [1, 2, 3, 4, 5, 6, 7],
};
},
*** CalendarGrid.vue <template> ***
<template>
<b-row class="pb-2">
<b-col class="px-2">
<Day>{{ days[0] }}</Day>
</b-col>
<b-col
v-for="(day, index) in days.slice(1)"
:key="index"
class="pr-2 pl-0"
>
<Day>{{ day }}</Day>
</b-col>
</b-row>
</template>
I want to use a child component to display the calendar days, since I have additional data and formatting to add to each day. Day vue, at this point simply displays the day value sent to it.
*** Day.vue ***
<template>
<div class="days text-right">
<slot></slot>
</div>
</template>
I have a child component called Week.vue, which I call I want to call from CalendarGrid.vue
<Week :days="days" />
Week.vue consists of the exact same template as above. The only difference is that days is an array prop.enter code here