ClockBlock.vue

<template>
    <div class="h-30 flex flex-col items-center my-2 rounded-lg bg-charcoal">
        <img src="/images/UAM_TAIL.svg"
             alt="UAM Logo"
             style="width: auto; height: 120px;">

        <section class="mt-3">
            <p class="text-2xl text-silver-500">{{ date }}</p>
            <p class="text-4xl text-gold">{{ time }}</p>
        </section>
    </div>
</template>

<script type="text/babel">
    export default {
        name: 'Clock',
        data() {
            return {
                date: '',
                time: ''
            };
        },
        components: {},
        props: {
            timeFormat: {
                type: String,
                default: 'hh:mm:ss',
            }
        },
        computed: {},
        created() {
            this.refreshTime();
            setInterval(this.refreshTime, 1000);
        },
        mounted() {},
        methods: {
            refreshTime() {
                this.date = moment().format('ddd, MMM Do');
                this.time = moment().format(this.timeFormat);
            }
        }
    };
</script>