<template>
  <div>{{ clock }}</div>
</template>

<script lang="ts">
import Vue from "vue";
import moment from "moment";

export default Vue.extend({
  name: "ClockDisplay",

  data: () => ({
    clock: "",
  }),

  props: {
    format: String,
  },

  methods: {
    update(): void {
      this.clock = moment().format(this.format);
    },
  },

  created(): void {
    setInterval(this.update, 1000);
  },
});
</script>

<style>
</style>