I try to create my own vue component based on MDBModal:

<template>
  <MDBModal
    id="exampleModal"
    tabindex="-1"
    labelledby="exampleModalLabel"
    v-model="exampleModal"
  >
    <MDBModalHeader>
      <MDBModalTitle id="exampleModalLabel"> Modal title </MDBModalTitle>
    </MDBModalHeader>
    <MDBModalBody>...</MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" @click="exampleModal = false">Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>
</template>

<script>
  name: "MyComponent";
  import {
    MDBModal,
    MDBModalHeader,
    MDBModalTitle,
    MDBModalBody,
    MDBModalFooter,
    MDBBtn,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';
  export default {
    components: {
      MDBModal,
      MDBModalHeader,
      MDBModalTitle,
      MDBModalBody,
      MDBModalFooter,
      MDBBtn,
    },
    props: {
      propExampleModal: {
        type: Boolean,
        default: false,
      },      
    },
    setup() {
      const exampleModal = ref(this.propExampleModal);
      return {
        exampleModal,
      };
    },
  };
</script>

And in App.vue i try to use it:

<template>
  <MDBBtn
    color="primary"
    aria-controls="exampleModal"
    @click="this.dataExampleModal=true"
  >
    Launch demo modal
  </MDBBtn>
  <MyComponent
    :propExampleModal="dataExampleModal"
  >

  </MyComponent>
</template>

<script>
  import {
    MDBBtn,
  } from 'mdb-vue-ui-kit';
  import {
    MyComponent,
  } from '@/components/MyComponent.vue';
  export default {
    components: {
      MDBBtn,
      MyComponent,
    },
    data() {
      return {
        dataExampleModal: false,
      }
    },
  };
</script>

Problem: when I click the Button "Launch demo modal" nothing happens.What I do wrong?