calling a method on the root from a component, what is wrong with my code? - vue.js

Question

I have a component for my bootstrap modal. The modal has a button is labeled "Got It",which I am trying to call a method found on the root instance. It is not working--I cannot tell what I am missing. I have added a click handler and emit the click, but cannot trigger the clear function? Please advise what is wrong- thanks
Vue.component('modal', {
template: '#modal-template',
props:{
bgClass:{
type:String,
default:'default'
},
},
methods: {
clickHandler () {
this.$emit('click');
}
}
})
new Vue({
el: "#app",
data: function data() {
return{
showModalZ:false
}
},
methods: {
clear: function(){
alert("checkme");
}
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="vm-modal-mask">
<div class="vm-modal-wrapper">
<div class="vm-modal-container">
<div class="vm-modal-header">
<slot name="header">
default header
</slot>
</div>
<div :class="bgClass" class="vm-modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="vm-modal-footer">
<slot name="footer">
<button class="modal-default-button btn btn-primary" #click="clickHandler(),clear()">
Got It!
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<div id="app">
<h5>hello <i style="font-size:20px;cursor:pointer;" aria-hidden="true" class="fa fa-info-circle" v-on:click="showModalZ=true"></i></h5>
<modal v-if="showModalZ" #close="showModalZ = false">
<h5 slot="header"><strong>input goes here</strong></h5> <hr>
<div>
test
</div>
</modal>
</div>

Answer 1

simply use this.$parent.$root.methodname()
e.g this.$parent.$root.clear();
Vue.component('modal', {
template: '#modal-template',
props: {
bgClass: {
type: String,
default: 'default'
},
},
methods: {
clickHandler() {
this.$parent.$root.clear();
}
}
})
new Vue({
el: "#app",
data: function data() {
return {
showModalZ: false
}
},
methods: {
clear: function () {
alert("checkme");
}
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="vm-modal-mask">
<div class="vm-modal-wrapper">
<div class="vm-modal-container">
<div class="vm-modal-header">
<slot name="header">
default header
</slot>
</div>
<div :class="bgClass" class="vm-modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="vm-modal-footer">
<slot name="footer">
<button class="modal-default-button btn btn-primary" #click="clickHandler()">
Got It!
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<div id="app">
<h5>hello <i style="font-size:20px;cursor:pointer;" aria-hidden="true" class="fa fa-info-circle" v-on:click="showModalZ=true"></i></h5>
<modal v-if="showModalZ" #close="showModalZ = false">
<h5 slot="header"><strong>input goes here</strong></h5> <hr>
<div>
test
</div>
</modal>
</div>

Answer 2

You need to emit 'close' event from model component clickHandler function and capture it on parent with #close
Working example:
Vue.component('modal', {
template: '#modal-template',
props: {
bgClass: {
type: String,
default: 'default'
}
},
methods: {
clickHandler() {
this.$emit('close');
}
}
})
new Vue({
el: "#app",
data: function data() {
return {
showModalZ: false
}
},
methods: {
clear: function() {
alert("checkme");
}
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="vm-modal-mask">
<div class="vm-modal-wrapper">
<div class="vm-modal-container">
<div class="vm-modal-header">
<slot name="header">
default header
</slot>
</div>
<div :class="bgClass" class="vm-modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="vm-modal-footer">
<slot name="footer">
<button class="modal-default-button btn btn-primary" #click="clickHandler">
Got It!
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<div id="app">
<h5>hello <i style="font-size:20px;cursor:pointer;" aria-hidden="true" class="fa fa-info-circle" v-on:click="showModalZ=true"></i></h5>
<modal v-if="showModalZ" #close="showModalZ = false">
<h5 slot="header"><strong>input goes here</strong></h5>
<hr>
<div>test</div>
</modal>
</div>