I have recreated your issue on a macbook and came up with a walkaround (until we correct this issue in our package) - it renders the color picker after the modal animation is done:

<template>
  <div id="app" :style="{ background: pageBackground }">
    <div>
      <mdb-btn color="primary" @click="toggleModal"
        >Launch demo modal</mdb-btn
      >
      <mdb-modal :show="modal" @close="toggleModal">
        <mdb-modal-header>
          <mdb-modal-title>Modal title</mdb-modal-title>
        </mdb-modal-header>
        <mdb-modal-body>
          <mdb-color-picker
            v-if="enableColorPicker"
            :show="showPicker1"
            @getValue="color1 = $event"
            @close="showPicker1 = false"
          >
            <div class="mdb-cp-btn-wrapper">
              <div
                class="mdb-cp-btn"
                :style="{ background: color1 }"
                @click="showPicker1 = !showPicker1"
              ></div>
            </div>
          </mdb-color-picker>
        </mdb-modal-body>
        <mdb-modal-footer>
          <mdb-btn color="secondary" @click="toggleModal"
            >Close</mdb-btn
          >
          <mdb-btn color="primary" @click="toggleModal">Save changes</mdb-btn>
        </mdb-modal-footer>
      </mdb-modal>
    </div>
  </div>
</template>

<script>
import mdbColorPicker from 'mdb-color-picker'
import { mdbModal, mdbModalHeader, mdbModalFooter, mdbBtn, mdbModalBody, mdbModalTitle } from 'mdbvue'

export default {
  components: {
    mdbColorPicker,
    mdbModal, mdbModalHeader, mdbModalFooter, mdbBtn, mdbModalBody, mdbModalTitle
  },
  data() {
    return {
      color1: '#ff0000ff',
      pageBackground: '#ffffff',
      showPicker1: false,
      modal: false,
      enableColorPicker: false
    }
  },
  methods: {
    toggleColorPicker() {
      this.enableColorPicker = !this.enableColorPicker;
    },
    toggleModal() {
      this.modal = !this.modal;

      setTimeout(this.toggleColorPicker, 400);
    }
  }
}
</script>