The Vue component has a @click="remove" function. How to call this function inside the main vue?

Question

Vue.js

Vue.component('add-edu', {
  template: `
    <div class="gray_dashed">
      <i class="fas deleteForm fa-times" v-on:click="remove"></i>	
    </div>
`
});

new Vue({
  el: '.midMain',
  	data: {
  		mes: 'sds'
  	},
  	methods:{
  		remove: function() {
  			this.mes = 'Привет';
  		}
  	}
});

Issue: button not responding

Answer 1

You don't need it. Generate an event in the child component, subscribe to it in the parent component and call the desired method in the handler.