vue places overlay over `v-dialog`, making the dialog unusable

BillCalendar.vue

<template>
  <div id="bill-calendar">
    <ErrorAlerts v-bind:errorList="errors" />
    <BillView v-if="selectedBill" :bill="selectedBill" v-model="showBillView" />
    <v-layout wrap>
      <v-flex xs12 class="my-3">
        <v-sheet elevation="5">
          <v-calendar
            ref="calendar"
            v-model="calendar.start"
            :type="calendar.type"
            :end="calendar.end"
            :event-height="50"
            color="primary"
          >
            <template v-slot:day="{ date }">
              <template v-for="bill in billMap[date]">
                <v-chip
                  small
                  @click="
                    selectedBill = bill
                    showBillView = true
                  "
                  :key="bill.id"
                  class="text-truncate"
                >
                  {{ bill.name }}
                </v-chip>
              </template>
            </template>
          </v-calendar>
        </v-sheet>
      </v-flex>
    </v-layout>
  </div>
</template>
<script>
import ErrorAlerts from '@/components/ErrorAlerts'
import BillView from '@/components/BillView'
import moment from 'moment'

export default {
  name: 'BillCalendar',
  props: {
    parentBills: Array
  },
  data() {
    return {
      errors: [],
      localBills: [],
      calendar: {
        type: 'month',
        start: moment()
          .startOf('month')
          .format('YYYY-MM-DD'),
        end: moment()
          .endOf('month')
          .format('YYYY-MM-DD')
      },
      selectedBill: null,
      showBillView: false
    }
  },
  computed: {
    bills() {
      return this.parentBills ? this.parentBills : this.localBills
    },
    datedBills() {
      let datedBills = []
      this.bills.forEach(b => {
        b.date = moment([
          moment().year(),
          moment().month(),
          b.due_day_of_month
        ]).format('YYYY-MM-DD')
        b.open = false
        datedBills.push(b)
      })
      return datedBills
    },
    billMap() {
      let map = {}
      this.datedBills.forEach(b => (map[b.date] = map[b.date] || []).push(b))
      return map
    }
  },
  methods: {
    getBills: function() {
      this.$store
        .dispatch('billList')
        .then(resp => {
          this.localBills = resp.data
        })
        .catch(resp => {
          this.errors.push(resp)
        })
    }
  },
  components: {
    ErrorAlerts,
    BillView
  },
  mounted() {
    if (!this.parentBills) {
      console.log('BillCalendar: api call')
      this.getBills()
    }
  }
}
</script>
<style lang="scss" scoped>
// .v-calendar{
//   @media (min-width: 768px) {
//     height: 30vw;
//   }
// }
</style>

BillView.vue

<template>
  <div id="bill-view">
    <v-dialog v-model="show" >
      <v-toolbar color="indigo" dark>
        <v-toolbar-title> Bill View: {{ bill.name }} </v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn icon @click.stop="disableEdit = disableEdit ? false : true">
          <v-icon>edit</v-icon>
        </v-btn>
      </v-toolbar>
      <v-card dark>
        <v-card-text>
          <v-form>
            <v-text-field
              v-model="bill.name"
              label="name"
              :disabled="disableEdit"
            ></v-text-field>
            <v-text-field
              v-model="bill.category"
              label="category"
              :disabled="disableEdit"
            ></v-text-field>
            <v-text-field
              v-model="bill.recurring"
              label="recurring"
              :disabled="disableEdit"
            ></v-text-field>
            <v-text-field
              v-model="bill.due_day_of_month"
              label="due date of month"
              :disabled="disableEdit"
            ></v-text-field>
            <v-text-field
              v-model="bill.min_payment"
              label="min payment"
              :disabled="disableEdit"
            ></v-text-field>
            <v-text-field
              v-model="bill.account_holder"
              label="account holder"
              :disabled="disableEdit"
            ></v-text-field>
            <v-text-field
              v-model="bill.open"
              label="open"
              :disabled="disableEdit"
            ></v-text-field>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-btn color="warning darken-1" text :disabled="disableEdit">
            Save Changes
          </v-btn>
          <v-btn color="error darken-1" text :disabled="disableEdit">
            Deactivate
          </v-btn>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" text @click.stop="show = false">
            Close
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>
<script>
export default {
  name: 'BillView',
  props: {
    bill: Object,
    value: Boolean
  },
  data() {
    return {
      disableEdit: true
    }
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  }
}
</script>
<style lang="scss">
.v-dialog {
  @media (min-width: 768px) {
    max-width: 40%;
  }
}
</style>