● hooks

src/composables/usePolling.ts

import {ref} from "vue"

export default function usePolling() {
  let isPollingDisabled = ref<boolean>(false)

  async function startPolling(
    fn: () => void,
    intervalTimeMsec: number = 3000 ,
    waitingTimeMsec: number = 0 ,
  ) {

    if (waitingTimeMsec > 0){
      await new Promise(resolve => setTimeout(resolve, waitingTimeMsec))
    }

    // infinite loop
    for (; ;) {
      fn()
      await new Promise(resolve => setTimeout(resolve, intervalTimeMsec))

      if (isPollingDisabled.value) {
        break;
      }
    }
  }

  function stopPolling() {
    isPollingDisabled.value = true
  }

  return {
    startPolling,
    stopPolling
  }
}

● コンポーネント側

src/views/MyComponent.vue

<template>
    <h2>{{ message }}</h2>
</template>


<script lang="ts" setup>
import {onBeforeMount, onBeforeUnmount, ref} from 'vue'
import usePolling from "@/composables/usePolling"
import dayjs from "dayjs"

const {startPolling, stopPolling} = usePolling()
const message = ref('start')

const getMessageAsync = async () => {
  message.value = 'Ccc:' + dayjs().format('HH:mm:ss')
}

onBeforeMount(() => {
  getMessageAsync()
  startPolling(getMessageAsync, 1000)
})

onBeforeUnmount(() => {
  stopPolling()
})
</script>

引用 : 実践 Vue Composition API - 面白駆動人生