Estoy emitiendo un objeto a través del bus de eventos al padre y luego asignando ese objeto a mi variable de detail que se pasará como accesorio a mi componente ContactDetail , pero el accesorio no obtiene el objeto actualizado.

ContactCard es un componente importado en ContactList .

Obteniendo el siguiente error:

 [Vue warn]: Property or method "contactDetail" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Tarjeta de contacto

 <script> import {bus} from "../../bus.js"; export default { name: "ContactCard", methods: { showDetails: function(event) { bus.$emit('showDetails', { pfp: this.pfp, name: this.name, address: this.address }); } } } </script>

Directorio

 <template> <div class="container"> <ContactList v-if="!showDetail"></ContactList> <ContactDetail v-else :contactDetail="details"></ContactDetail> </div> </template> <script> import { bus } from "../bus.js"; import ContactList from "../components/addressBook/ContactList.vue"; import ContactDetail from "../components/addressBook/ContactDetail.vue"; export default { name: "AddressBook", components: { ContactList, ContactDetail }, data() { return { showDetail: false, details: {} } }, created() { bus.$on('showDetails', (data) => { console.log(data); this.showDetail = true; this.details = Object.assign({}, this.details, data); console.log(this.details); }); } } </script>

Detalles del contacto

 <template> <div class="detail-container"> {{contactDetail}} </div> </template> <script> export default { name: "ContactDetail", data() {`` return { details: '' } }, props: { contactDetail: { type: Object, required: true } }, watch: { contactDetail(newVal, prevVal) { this.details = newVal; } } } </script>

¿Por qué no se actualiza la propiedad contactDetails en ContactDetail ?