Vitest & Vue-Test-Utils Testing Function - vue.js

Question

I want to test that the function is called in a simple project.
For this, I read the documentation of Vitest - Function and tried to write test as below.
However, I keep getting an error that the function was not called.
Example.vue
<script setup lang="ts">
const example = () => console.log("TEST");
</script>
<template>
<div>
<button data-testid="button-example" #click="example">Click</button>
</div>
</template>
example.spec.ts
import { describe, vi, it, beforeEach, expect } from "vitest";
import { mount, VueWrapper } from "#vue/test-utils";
import Example from "../src/components/Example.vue";
describe("example testing", () => {
let wrapper: VueWrapper<Example & { [key: string]: any }>;
beforeEach(() => {
wrapper = mount(Example);
});
it("component mounted", () => {
expect(wrapper.exists()).toBeTruthy();
});
it("example function should be called", async () => {
const example = vi.spyOn(wrapper.vm, "example");
await wrapper.find('[data-testid="button-example"]').trigger("click");
expect(example).toHaveBeenCalled();
});
});
And I get the following error.
FAIL test/example.spec.ts > example testing > example function should be called
AssertionError: expected "example" to be called at least once
❯ test/example.spec.ts:21:21
19| await wrapper.find('[data-testid="button-example"]').trigger("click");
20|
21| expect(example).toHaveBeenCalled();
| ^
22| });
23| });
Methods I have tried.
it("example function should be called", async () => {
await wrapper.find('[data-testid="button-example"]').trigger("click");
const example = vi.spyOn(wrapper.vm, "example");
expect(example).toHaveBeenCalled();
});
it("example function should be called", async () => {
await wrapper.find('[data-testid="button-example"]').trigger("click");
expect(wrapper.vm.example).toHaveBeenCalled();
});
But when I do as above "This function is not spy or call spy!" I get an error.
I think I need to test this function because it looks untested in the coverage report.