我在纯JavaScript中有以下函数来滚动到一个元素，我想将这段代码转换为Vue 3。

var source = ''
function showScrollInto(currentLocation, toLocation) {
  source = currentLocation  // 在隐藏部分后返回的位置
  document.getElementById(toLocation).style.display = 'block'
  document.getElementById(toLocation).scrollIntoView()
}

并返回到原始位置：

document.getElementById(source).scrollIntoView()

在点击按钮时调用showScrollInto：

<button onClick="showScrollInto('top', 'interesse')">TITLE</button>

现在我将该函数转换为一个方法并尝试：

import { ref } from "vue"
var source = ""
const toLocation = ref('Vue.js')

export default {
    name: "App",
    data() {
        return {
            hideAlleClubs: true,
            hideIkWilKennismaken: true,
            hideAlleLocaties: true,
            hideMeerOverKegelen: true,
            hideInteresse: true
        }
    },
    methods: {
        showScrollInto(event, currentLocation, toLocation) {
            source = currentLocation  // 在隐藏部分后返回的位置
            this.hideInteresse = false
            this.$refs.toLocation.scrollIntoView({ behavior: 'smooth'})
            // document.getElementById(toLocation).style.display = 'block'
            // document.getElementById(toLocation).scrollIntoView()
        }
    }
}

通过点击按钮调用showScrollInto：

<button @click="showScrollInto($event, 'kosten', 'interesse')">TITLE</button>

要滚动到的元素如下：

<section class = "top-level-section" v-show="!hideInteresse" ref="interesse">

传递变量到方法中是可以的，但我无法弄清楚如何滚动到一个位置，其中位置是一个变量。

this.$refs.interesse.scrollIntoView({ behavior: 'smooth'}) 可以用于滚动到id为'interesse'的元素，但我不知道如何将该元素名称转换为一个变量。 此外，我了解到this.$refs不是Vue 3的表示法，应该转换为类似ref('value')的形式，但我不知道如何做到这一点。