Cannot nest normal HTML tags on mdb components on vuejs with

I am using mdbvue in my nuxtjs project and want to combine mdb components with normal html code.

Expected behavior Should be able to nest normal HTML tags inside the components of a card in

<mdb-card-text>...</mdb-card-text>

Actual behavior

The client-side rendered virtual DOM tree is not matching server-rendered content

Resources (screenshots, code snippets etc.) Source Code

    <template>
  <mdb-card class="rounded">
    <mdb-view zoom>
      <nuxt-link to="/">
        <mdb-card-image
          src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg"
          alt="Card image cap"
          class="rounded-top"
        />
        <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
      </nuxt-link>
    </mdb-view>
    <mdb-card-body class="card-bg">
      <mdb-card-title>Gorkha Beer</mdb-card-title>
      <mdb-card-text>
        <h4 class="h6">Sizes</h4>
        <div class="d-flex">
          <mdb-btn size="sm" color="primary" class="z-depth-0 rounded-pill">500Ml</mdb-btn>
          <mdb-btn size="sm" color="deep" class="z-depth-0 rounded-pill">300Ml</mdb-btn>
          <mdb-btn size="sm" color="deep" class="z-depth-0 rounded-pill">750Ml</mdb-btn>
        </div>
        <h2 class="h5">
          Rs 500
          <span class="cutted-price text-red h6">
            <del>699</del>
          </span>
        </h2>
      </mdb-card-text>
      <mdb-btn color="primary">Button</mdb-btn>
    </mdb-card-body>
  </mdb-card>
</template>

<script>
import {
  mdbCard,
  mdbCardImage,
  mdbCardBody,
  mdbCardTitle,
  mdbCardText,
  mdbBtn,
  mdbView,
  mdbMask,
  animateOnScroll
} from 'mdbvue'
export default {
  name: 'TallProductCard',
  components: {
    mdbCard,
    mdbCardImage,
    mdbCardBody,
    mdbCardTitle,
    mdbCardText,
    mdbBtn,
    mdbView,
    mdbMask
  },
  directives: {
    animateOnScroll
  }
}
</script>
<style scoped>
.card-bg {
  background-color: #fffaf0;
}
</style>