BootstrapVue b-col formatting not working in child component

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