How to use composition hook with ref to the component?

I get an error when I try to use a hook with a component

tippy() was passed a plain object which is not supported as an argument for virtual positioning. Use props.getReferenceClientRect instead.

And

DOMException: Failed to execute 'querySelectorAll' on 'Document': '[object Object]' is not a valid selector.

TheNavigation.vue

<template>
	<div>
		<BaseButton
			label="Open dropdown"
			ref="triggerElement"
		/>

		<div ref="contentElement">
			Content
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import { useTippy } from 'vue-tippy/composition';

import { BaseButton } from '@/components';

export default defineComponent({
	components: {
		BaseButton
	},
	setup() {
		const triggerElement = ref(null);
		const contentElement = ref(null);
		
		const { tippy } = useTippy(triggerElement, {
			content: contentElement,

			placement: 'bottom',
			animation: 'shift-away',
			role: 'dropdown',
			arrow: false,
			trigger: 'click',
			appendTo: 'parent',
			interactive: true
		});
		
		return {
			tippy,
			triggerElement,
			contentElement
		};
	}
});
</script>

BaseButton.vue

<template>
	<button>
		<slot>
			{{ label }}
		</slot>
	</button>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
	props: {
		label: {
			type: String,
			default: null
		}
	},
	setup() {
		return {};
	}
});
</script>

[KABBOUCHI]

I’ve released a new version v4.10.0 now you can mount/unmount manually

https://kabbouchi.github.io/vue-tippy/4.0/features/composition-api.html?v4.10#example-6

https://github.com/KABBOUCHI/vue-tippy/blob/b803f1e9722342ca0a2948504a757d2ca054a8d2/docs/.vuepress/components/CompDemo6.vue#L1-L58

[KABBOUCHI]

@negezor plz update to v4.9.0 and retry

https://kabbouchi.github.io/vue-tippy/4.0/features/composition-api.html#example-5