Vue: how to spy on Component method?

[nathan-kerr]

My spy is never called even though I can visually confirm that the target method getRandomTerm() is called when mounted. The image below shows that a term was generated and displayed in <h1>.

VocabFlashCard.vue:

<template>
    <h1>{{ currentTerm.name }}</h1>
</template>

<script setup lang="ts">
const currentTerm = ref<Term>({ name: '', image: '' })

function getRandomTerm() {
  currentTerm.value = terms.terms[Math.floor(Math.random() * terms.terms.length)]
}

onMounted(() => {
  getRandomTerm()
})
</script>

VocabFlashCard.cy.ts:

beforeEach(() => {
  const getRandomTermSpy = cy.spy().as('getRandomTermSpy')

  mount(VocabFlashCard, {
    props: {
      terms: testTerms,    
      getRandomTerm: getRandomTermSpy
    }
  })
})

it('generates a random term', () => {
  cy.get('@getRandomTermSpy').should('have.been.calledOnce')
})