Update data in array not rendering in DOM

On trying to update data in the array from the modal box. The data is not updated in the dom v-for list.

The following consists of modal and details. The data is entered in the modal box which updates the data in details. The cdata is an array which is updated through out the process. When the data is entered in the modal box. This data is pushed in the cdata. Which should update the details v-for loop but it is not happening rather. I tried updating by listening thru events still there's no effects.

 export default {
      props: ["c-data"],
      data: function() {
        return {};
      },
      mounted: function() {},
      methods: {}
    }; 

    <template>
       <button type="button" class="btn btn-primary"   data-toggle="modal" data-target="#aModal">Add  </button>
       <data-detail :cdata="cData"></data-detail>
       <add-modal  :cdata="cData"></add-modal>
    </template>

The following contains code for add modal which updates the data in cData array which is data entered in the data modal.

add-modal.vue

  export default {
      props: ["c-data"],
      data: function() {
        return {
          cName: "",
          cEmail: ""
        };
      },
      mounted() {
        console.log(this.cData);
      },
      methods: {
        addC() {
          this.cData.push({ cName: this.cName, cEmail: this.cEmail });
    
          console.log(this.cData);
          this.$root.$emit("cEvent", this.cData);
        }
      }
    };

<template  id="add-modal">
   <div class="modal fade" id="aModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-large" role="document">
   <div class="modal-content">
   <div class="modal-body">
      <div class="box">
         <div class="row">
            <div class="form-group col-sm-6 col-lg-6 col-xl-4">
               <div class="input-section">
                  <input type="text" name="cName" class="form-control" id="c-name" v-model="cName" placeholder="Enter   name" value="" required>
                  <label for="c-name"> Name*</label>
               </div>
            </div>
            <div class="form-group col-sm-6 col-lg-6 col-xl-4">
               <div class="input-section">
                  <input type="text" v-model="cEmail" name="cEmail" class="form-control" id="c-email" placeholder="Enter   email" required>
                  <label for="c-email">  Email*</label>
               </div>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
               <button type="button" @click="addC" class="btn btn-primary">Save</button>
            </div>
         </div>
      </div>
   </div>
</template>

The follow consists of list of v-for which needs to be updated but are not updating.

    export default {
      props: ["c-data"],
      data: function() {
        return {};
      },
      mounted() {
        console.log(this.cData);
      },
      methods: {}
    };
     

    <div  v-for="(item, i) in cData"  :key="item.id">
          
    </div>

via Chebli Mohamed