Vue uses dayjs encapsulation to achieve real-time refresh

// mixins/
import dayjs from 'dayjs'
export default {
  data() {
    return {
      currentTime: {
        timer: null,
        currentDay: ().day, // What day of the week        date: ().date, // Year, month, day        time: ().time, // hour, minute, second      },
    }
  },
  mounted() {
     = setInterval(() => {
      ()
    }, 1000)
  },
  methods: {
    formatTime(d = '', t = 'HH:mm:ss') {
      let days = ['day', 'one', 'two', 'three', 'Four', 'five', 'six']
      let date = dayjs(new Date()).format(d)
      let time = dayjs(new Date()).format(t)
      let day = `Week${days[dayjs().day()]}`
      return { date, time, day }
    },
    updateTime() {
       = ().day
       = ().date
       = ().time
    },
  },
  beforeDestroy() {
    clearInterval()
  },
}

<span>{{  }}</span>
<span>{{  }}</span>
<span>{{  }}</span>
<script>
import formatdate from '@/mixins/formatdate'
export default {
  mixins: [formatdate],
}
</script>

// 
import dayjs from 'dayjs'
import { onBeforeUnmount, onMounted, ref } from 'vue'
export function useTime() {
  // What day of the week  const currentDay = ref('')
  // Year, month, day  const date = ref('')
  // hour, minute, second  const time = ref('')
  // Get time  const updateTime = (d = '', t = 'HH:mm:ss') => {
    let days = ['day', 'one', 'two', 'three', 'Four', 'five', 'six']
     = dayjs(new Date()).format(d)
     = dayjs(new Date()).format(t)
     = `Week${days[dayjs().day()]}`
  }
  // Define the timer  let timer = null
  onMounted(() => {
    timer = setInterval(() => {
      updateTime()
    }, 1000)
  })
  onBeforeUnmount(() => clearInterval(timer))
  return { currentDay, date, time }
}

<span>{{ currentDay }}</span>
<span>{{ date }}</span>
<span>{{ time }}</span>
<script setup>
import { useTime } from '@/utils/formatTime'
const { currentDay, date, time } = useTime()
</script>