Vue modal transitions are not working.

Expected behavior:Vue modals should provide a proper transition [side, frame, fluid]

Actual behavior:All Vue modals drop down from top to bottom. None of them have proper transitions. Side: a upper right modal still drops down from top to bottom, rather then right to center. Frame: a bottom frame still drops down from top to bottom, instead of the other way around. Fluid: same as before, a left fluid model drops from top to bottom instead of left to center.

Resources (screenshots, code snippets etc.): I have copied literally the code and js examples from the modal page. They do not work. I am running this in chrome, but it doesn't work in edge either. If I click the example modal buttons on the page, they do transition the way they are supposed to. But when I go to the modal generator page, the transitions don't work either. On that page, on the right, there is a button that says Launch demo modal. If I click fluid left modal, I get the same behavior as when i try it locally, all transitions are from top to bottom. This seems like a bug to me or wrong example code. Code that I have used:

<template>
  <div>
    <!-- Side Modal Top Right -->
    <mdb-btn color="primary" @click.native="modal = true">Top right</mdb-btn>
    <mdb-modal side position="top-right" :show="modal" @close="modal = false">
        <mdb-modal-header>
            <mdb-modal-title>Modal title</mdb-modal-title>
        </mdb-modal-header>
        <mdb-modal-body>...</mdb-modal-body>
        <mdb-modal-footer>
            <mdb-btn color="secondary" @click.native="modal = false">Close</mdb-btn>
            <mdb-btn color="primary">Save changes</mdb-btn>
        </mdb-modal-footer>
    </mdb-modal>
  </div>
</template>

<script>
  import { mdbModal, mdbModalHeader, mdbModalTitle, mdbModalBody, mdbModalFooter, mdbBtn } from 'mdbvue';
  export default {
    components: {
      mdbModal,
      mdbModalHeader,
      mdbModalTitle,
      mdbModalBody,
      mdbModalFooter,
      mdbBtn
    },
    data() {
      return {
        modal: false
      };
    }
  };
</script>

I need a solution for this. Modals for Angular and React work for me though.