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

var source = ''
function showScrollInto(currentLocation, toLocation) {
  source = currentLocation  // where to return to after section is hidden
  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  // where to return to after section is hidden
            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'的元素，但我不知道如何将该元素名称转换为变量。此外，我知道这个$refs不是Vue 3的表示法，应该转换成类似ref（'value'）的东西，但我不知道如何做到这一点。