b-modalでvue-date-pickが正常に動かない

Question

お世話になっております。

Vuejsでカレンダーのようなシステムを作成しており、
日付選択でvue-date-picを使用しております。
通常画面ではvue-date-pickのカレンダーで日付選択ができるのですが、
通常画面から開いたb-modal上でもvue-date-pickを使用しようとすると
カレンダーで日付選択後テキストボックスに値が入らないのです。
いろいろ試したもののイベントすら拾ってくれず八方塞がりとなってしまい
質問させていただきました。

<template>
  <div>
    <b-button @click="modalShow = !modalShow">Open Modal</b-button>
    <pre>Date: {{ date }}</pre>
    <!-- ここのdate-pickは動作する -->
    <date-pick v-model="date" :displayFormat="'MM/DD'" :parseDate="parseDate"/>

    <b-modal v-model="modalShow" title="Modal example">
      <div class="d-block text-center">
        <pre>Date: {{ modalDate }}</pre>
        <!-- ここのdate-pickは動作しない -->
        <date-pick v-model="modalDate" :displayFormat="'MM/DD'" :parseDate="parseDate"/>
      </div>
    </b-modal>
  </div>
</template>

<script>
import DatePick from "vue-date-pick";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import "vue-date-pick/dist/vueDatePick.css";
export default {
  name: "BModalExample",
  components: {
    DatePick
  },
  data() {
    return {
      modalShow: false,
      date: "",
      modalDate: ""
    };
  },
  methods: {
    parseDate(dateString, format) {
      //ここが呼ばれない
      console.log(dateString, format);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>