Expected behavior Copying the "Sortable deck of cards" example code into my app should produce the exact look and behavior in the the example output.

Actual behavior I have copied the code from example "Sortable deck of cards" into my app and the look and behavior are not equivalent to that of the example output.

1. The cards do not not "lift up and move" with the mouse pointer when they are dragged. A very faint card moves with the mouse pointer but the original card remains in place until it takes up the new position (while the faint card being dragged is still barely visible under the mouse pointer)
2. The cards cannot move below one another as in the example. The produced HTML from the example looks different to the actual code. There is a "card-deck" div that is not "mentioned" in the example code at all.

Resources (screenshots, code snippets etc.)

GIF - MDB Sortable styling/functionality different to example

<template>
  <mdb-container class="full-height">
    <mdb-sortable class="row py-4">
      <mdb-col sm="4" v-for="element in list11" :key="element.id">
        <mdb-card>
          <mdb-view hover>
            <a href="#!">
              <mdb-card-image :src="element.image" alt="Card image cap"></mdb-card-image>
              <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
            </a>
          </mdb-view>
          <mdb-card-body>
            <mdb-card-title>Card title</mdb-card-title>
            <mdb-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</mdb-card-text>
            <mdb-btn color="primary">Read more</mdb-btn>
          </mdb-card-body>
        </mdb-card>
      </mdb-col>
    </mdb-sortable>
  </mdb-container>
</template>

<script>
import mdbSortable from "mdbvue-sortable";
import {
  mdbIcon,
  mdbContainer,
  mdbCol,
  mdbCard,
  mdbCardBody,
  mdbBtn,
  mdbCardTitle,
  mdbCardText,
  mdbView,
  mdbCardImage,
  mdbMask,
} from "mdbvue";

export default {
  name: "LandingPagesEdit",
  props: [],
  components: {
    mdbIcon,
    mdbSortable,
    mdbCol,
    mdbContainer,
    mdbCard,
    mdbCardBody,
    mdbBtn,
    mdbCardTitle,
    mdbCardText,
    mdbView,
    mdbCardImage,
    mdbMask,
  },
  data() {
    return {
      list11: [
        { image: 'https://mdbootstrap.com/img/Photos/Others/images/14.jpg', id: 0 },
        { image: 'https://mdbootstrap.com/img/Photos/Others/images/15.jpg', id: 1 },
        { image: 'https://mdbootstrap.com/img/Photos/Others/images/16.jpg', id: 2 }
      ]
    };
  }
};
</script>