Javascript 如何在Vue JS中创建自动滚动

我想使用Vue JS创建页面的自动滚动。我查看了一些选项，但它们对我没有帮助。这是我的代码

<template>
  <div class="wrapper">
    <div class="main"></div>
    <div class="main"></div>
    <div class="main"></div>
    <div class="main"></div>
  </div>
</template>

<style scoped>
.wrapper {
  width: min-content;
  margin: auto;
  height: 400px;
  overflow: scroll;
}
.main {
  width: 250px;
  height: 200px;
  background: red;
  border: 1px solid white;
  margin-bottom: 10px;
}
</style>

.包装纸{
宽度：最小含量；
保证金：自动；
高度：400px；
溢出：滚动；
}
梅因先生{
宽度：250px；
高度：200px；
背景：红色；
边框：1px纯白；
边缘底部：10px；
}

---

以下是给定的

创建一个以所需频率执行的间隔，并根据一些数学计算从顶部滚动

const wrapper = document.querySelector('.wrapper')

setInterval( () => {
  wrapper.scrollTop = wrapper.scrollTop + 20
}, 1000)