VueでsetIntervalを使用し、DOMに渡ってきたparameterを更新

setIntervalをmounted内で呼んでexpressで取得してきたparameterを受け取りDOMを更新させる為に使用したコードです。

api/index.ts

import express from 'express'

const handler = express()

handler.get('/parameters/:hogeId', parameters.get)

api/parameters/index.ts

import { Request, Response } from 'express'
import { Hoge } from '../../lib/db'

export const get = async (req: Request, res: Response) => {
  res.json(await Hoge.findByPk(req.params.hogeId))
}

こちらをVueのscript内のmountedで呼びます。

pages/index.vue

<template>

</template>

<script lang="ts">
import { setInterval } from 'timers'

@Component
export default class hoges extends Vue {
  async mounted() {
    this.parameter = await this.$axios.$get(
      `/api/parameters/${this.$nuxt.$route.params.hogeId}`
    )
    setInterval(async () => {
      this.parameter = await this.$axios.$get(
        `/api/parameters/${this.$nuxt.$route.params.hogeId}`
      )
    }, 5000)
  }
</script>

一度は、普通に呼び出し次から５秒毎に描画させています。序盤の方でtimersからimportせずに何度も実行して出来なくて苦戦しました。