setInterval 触发多次并可能搞乱组件渲染

Question

我正在 Nuxtjs 3 中开发这个小型仪表板类型的网站来显示一些统计数据，我希望两个组件经常相互交换，所以我决定在 Typescript 中使用 setInterval。

出于某种原因，setInterval 函数会多次触发其代码，我认为它会干扰组件渲染。

编辑：它只显示第一个组件（卡片），当我更改为 1 时，什么也没有发生

edit2：所以不知何故 setinterval 已经恢复正常但组件仍不会切换？

这是我的代码：

<template>
    <div id="main">
        <component :is="i==0 ? cards : zendesk"/>
    </div>
</template>

<script setup lang="ts">
import cards from '~~/components/cards/cards.vue';
import zendesk from "~~/components/zendesk.vue";
let comps: any = []
comps.push(cards, zendesk)

let i = ref(0)

const time = 2 

setInterval(() =>  {
    i.value++
    if (i.value >= comps.length) {
        i.value = 0
    }
}, time * 1000) 

</script>