Error Card in Vue, Vuetify

NetworkError.vue

<template>
    <v-container fluid>
        <v-card outlined>
            <v-container class="py-8">
                <div class="d-flex justify-center mb-4">
                    <v-icon size="40">mdi-emoticon-sad-outline</v-icon>
                </div>

                <p class="title text-center my-0 py-0 grey--text text--darken-3">Oops! Something totally went wrong</p>
                <p class="subtitle-1 red--text text-center my-0 py-0">{{error}}</p>

                <div class="d-flex justify-center mt-6">
                    <v-btn @click="onClick" color="primary">
                        <v-icon class="mr-2">mdi-refresh</v-icon>
                        REFRESH
                    </v-btn>
                </div>
                <p class="body-2 text-center mt-6 py-0 grey--text text--darken-1">If problem persist kindly write us at
                    abc@abc.com</p>

                <div class="d-flex justify-center mt-2">
                    <v-btn @click="onMailClick" class="red--text">
                        <v-icon class="mr-2">mdi-email-edit-outline</v-icon>
                        MAIL US
                    </v-btn>
                </div>
            </v-container>
        </v-card>
    </v-container>
</template>

<script>
export default {
    name: "network-error",
    props: {
        error: {
            type: String,
            default: "Something went wrong",
        }
    },
    methods: {
        onClick() {
            this.$emit("onClick");
        },
        onMailClick() {
            window.open(`mailto:abc@abc.com?subject=Bug Report&body=Hello`);
        }
    }
};
</script>

<style scoped>

</style>