VueJS template ref causes recursive updates

Question

I'm trying to use the PrimeVue Chart component in my VueJS app, but to do that I need to reference the underlying chart, which requires a template reference. Unfortunately, as soon as I add that, I get "Maximum recursive updates exceeded." Here's a super-simple component that causes it:

<script setup>
import { ref } from "vue"

const pvChart = ref(null)

let basicData =  {
        datasets: [{
                label: "Setpoints",
                data: [{ x: -10, y: 0 },
                        { x: 0, y: 10 },
                        { x: 10, y: 5 },
                        { x: 0.5, y: 5.5 }],
                showLine: true,
            },
        ]
    }
</script>

<template>
    <div>
        <div class="card">
            <pv-chart ref="pvChart" type="scatter" :data="basicData" />
        </div>
    </div>
</template>

I don't even try to update anything (AFAICT).

I tried to follow the example in this SO question, but it's written in a slightly different style, and I'm not sure I didn't miss something in the translation.

Update:

Changing the name of the ref from pvChart to primeChart fixes all the issues. I just grepped my whole codebase and there is no other pvChart in it anywhere. I don’t know why this is an issue.