Realtime clock VueJS

ClockWidget.vue

<template>
    <div class="callout calendar-day">
        <div class="grid-x align-middle align-middle">
            <div class="shrink cell">
                <h1>{{ this.momentInstance.format('DD') }}</h1>
            </div>
            <div class="auto cell">
                <h6>{{ this.momentInstance.format('[de] MMMM [de] YYYY') }}</h6>
                <h6 class="light">{{ this.momentInstance.format('dddd[.] HH:mm:ss') }} </h6>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            momentInstance: moment()
        }
    },
    mounted() {
        setInterval(() => {
            this.momentInstance = moment()
        }, 1000)
    }
}
</script>

<style>
.callout.calendar-day { padding: .8rem 1.9rem; }
.callout.calendar-day h1 {
    margin: 0 1rem 0 0;
    color: #2540F4;
}
.callout.calendar-day h6 { margin: 0; }
.callout.calendar-day h6.light { color: #A8B4CB; }
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

import moment from './plugins/moment'

Vue.use(moment)

Vue.config.productionTip = false

new Vue({
	store,
  	router,
  	render: h => h(App)
}).$mount('#app')

plugins\moment.js

import moment from 'moment'
import 'moment/locale/pt-br'

const install = function(Vue, options) {
    
    window.moment = moment
    window.moment().locale('pt-br')

    Vue.prototype.moment = window.moment
}

export default { install }