Necesito vincular los datos de mi componente secundario ( inputData ) del componente principal, pero no funciona. No puedo encontrar dónde está mi error.

aplicación.js

 let vm = new Vue({ el: "#app", components: { 'modal-panel': modal, 'rich-select': richSelect, 'file-upload': uploader, }, data(){ return { isModalActive: false, inputData: null }} , methods: { toggleModal(){ this.isModalActive = !this.isModalActive }, modalData(){ this.inputData = 'Example Data' } } });

Modal.vue

 <template> <input type="text" :value="inputData" > </template> export default { name: 'modal', props: ['inputData'], mounted(){ console.log('modal Mounted') } };

dentro de mi hoja estoy llamando componente modal como este

 <div class="container" id="app"> <modal-panel v-if="isModalActive" @close="toggleModal" :inputData="inputData"></modal-panel> </div>

cuando pruebo ese código, todos los métodos funcionan, pero dentro de la input Modal.vue aún no es vinculante