How to trigger a modal in the parent component based on the a button clicked from child component?

I have :

• panelHeader.vue (child component)
• index.vue (my main list view is the parent)

---

panelHeader.vue

<template>
    <v-row class="pl-5">
        <div class="panelHeader">
            <v-card elevation="0">
                <v-card-title>
                    <v-icon left x-large color="primary">{{ icon }}</v-icon>
                    <span class="font-weight-bold">{{ name }}</span>
                </v-card-title>

                <v-card-subtitle class="ml-1">{{ subTitle }}</v-card-subtitle>
            </v-card>

            <v-btn @click="btnClicked" v-if="name == 'Device Manager'" outlined class="blue--text mt-5 mr-8"> License Device </v-btn>
        </div>
    </v-row>
</template>
<script>
export default {
    props: {
        icon: String,
        name: String,
        subTitle: String
    },
    components: {},
    methods: {
        btnClicked() {
            this.$emit('btnClicked', true)
        }
    }
}
</script>

When clicked, I want to trigger a modal on my main index.vue

So I did that

<v-dialog @btnClicked="showModal" width="500px" class="d-flex justify-center">
    <v-card style="padding: 30px">
        <v-card-title class="red--text text--lighten-1 d-flex justify-center"> Delete </v-card-title>
        <v-card-text class="text-center">Are you sure you want to delete <strong> anythign </strong> ?</v-card-text>
        <v-card-actions class="d-flex justify-center">
            <v-btn small outlined color="darken-3 white--text" class="mx-2">No</v-btn>
            <v-btn small outlined @click="deleteConfirm()" class="mx-2 red--text">Yes</v-btn>
        </v-card-actions>
    </v-card>
</v-dialog>

Is this wrong ?

@btnClicked="showModal"