The solution: wrap your reference in toRaw(myElem.value). This converts the Proxy object into a regular object, and everything then works perfectly. I’m not sure exactly what’s happening under the hood, but the issue definitely lies with the Proxy. I hope this post helps someone!
<template>
...
<div ref="myElem">Item</div>
...
</template>
<script setup>
import { toRaw } from 'vue'
const myElem = ref(null)
function scrollToItem (){
if (myElem.value) {
//Crashes PS
myElem.value.scrollIntoView({ behavior: 'smooth', block: 'center' });
// Works Fine!
toRaw(myElem.value).scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
</script>