SOLVED. Regarding previous messages, the problem is in SideNav.vue file:

 handleOverlayClick() {
      this.$emit("update:OpenedFromOutside", !this.OpenedFromOutside);
    }

it should be

"update:opened-from-outside"

Because, there is also error in component usage.You cant write like this:

 <mdb-side-nav logo="..." sideNavClass="sn-bg-4" mask="strong" :OpenedFromOutside.sync="toggleB" hidden right>

It should be:

 <mdb-side-nav logo="..." side-nav-class="sn-bg-4" mask="strong" :opened-from-outside.sync="toggleB" hidden right>

"update:OpenedFromOutside" - Since there is a string, it is incompatiblity with html attributes which are case insensitive. I wonder how the code works at all for some other users if they do not use kebab-cases.Very strange approach. If you were using Eslint (you should) you would know that kebab-case is mandatory as html attributes are case insensitive

Additionally your code have a lot of styling errors. No proper standard. You should correct everything including whole documentation (examples) ASAP

https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

digitalmanagerguru: Regarding my previous answer, I've done the workaround in this way:

added @click="SideNavClick" to wrapping element

<section id="sidenav" @click="SideNavClick">

and added method:

   SideNavClick(event) {
      if (event.target.matches('#sidenav-overlay')) {
        this.toggleSideNav()
      }
    }

but, again, it's just workaround. Professional way is to correct a bug.

EDIT: workaround no more necessary, solution below.

This topic of mine is related to this. I've found out the only way to make this work, it may help you: https://mdbootstrap.com/support/vue/mdb-side-nav-not-working-properly/

We will check if our documentation needs an update. Try using this code from our demo app and let me know if it works as it's supposed to:

  <template>
          <mdb-container>

              <section> -->
                <div class="text-center icon-div">
                  <mdb-icon icon="bars" size="3x" @click.native="toggleSideNav('B')"/>
                </div>
              <div class="indigo-skin">
                <mdb-side-nav logo="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" sideNavClass="sn-bg-4" mask="strong" :OpenedFromOutside.sync="toggleB" hidden right>
                  <ul>
                    <li>
                      <ul class="social">
                        <li><a href="#" class="icons-sm fb-ic"><mdb-icon fab icon="facebook-f" /></a></li>
                        <li><a href="#" class="icons-sm pin-ic"><mdb-icon fab icon="pinterest-p" /></a></li>
                        <li><a href="#" class="icons-sm gplus-ic"><mdb-icon fab icon="google-plus-g" /></a></li>
                        <li><a href="#" class="icons-sm tw-ic"><mdb-icon fab icon="twitter" /></a></li>
                      </ul>
                    </li>
                    <li>
                      <mdb-side-nav-nav>
                        <mdb-side-nav-cat name="Submit blog" icon="chevron-right">
                          <mdb-side-nav-item href="#">Submit listing</mdb-side-nav-item>
                          <mdb-side-nav-item href="#">Registration form</mdb-side-nav-item>
                        </mdb-side-nav-cat>
                        <mdb-side-nav-cat name="Instruction" far icon="hand-pointer">
                          <mdb-side-nav-item href="#">For bloggers</mdb-side-nav-item>
                          <mdb-side-nav-item href="#">For authors</mdb-side-nav-item>
                        </mdb-side-nav-cat>
                        <mdb-side-nav-cat name="About" icon="eye">
                          <mdb-side-nav-item href="#">Introduction</mdb-side-nav-item>
                          <mdb-side-nav-item href="#">Monthly meetings</mdb-side-nav-item>
                        </mdb-side-nav-cat>
                        <mdb-side-nav-cat name="Contact me" far icon="envelope">
                          <mdb-side-nav-item href="#">FAQ</mdb-side-nav-item>
                          <mdb-side-nav-item href="#">Write a message</mdb-side-nav-item>
                        </mdb-side-nav-cat>
                        <mdb-side-nav-item header icon="envelope" href="#">Write a message</mdb-side-nav-item>
                        <mdb-side-nav-item header icon="user" href="#" @click.native="toggleSideNav('B')">Profile</mdb-side-nav-item>
                        <mdb-side-nav-item header icon="cubes" href="https://mdbootstrap.com/docs/vue/?utm_source=DemoApp&utm_medium=MDBVuePro" target="_blank">Official docs</mdb-side-nav-item>
                      </mdb-side-nav-nav>
                    </li>
                  </ul>
                </mdb-side-nav>
              </div>

          </mdb-container>
        </template>

        <script>
          import { mdbSideNav, mdbSideNavNav, mdbSideNavCat, mdbSideNavItem, mdbContainer, mdbRow, mdbIcon, waves } from 'mdbvue';

          export default {
            name: 'SideNavPage',
            components: {
              mdbSideNav,
              mdbSideNavNav,
              mdbSideNavCat,
              mdbSideNavItem,
              mdbContainer,
              mdbRow,
              mdbIcon
            },
            data(){
              return {
                toggleB: false,
              };
            },
            methods: {
              toggleSideNav(sn) {
                this[`toggle${sn}`]=!this[`toggle${sn}`];
              },
            },
            mixins: [waves]
          };
        </script>