Passing ref to directive binding makes `Maximum recursive updates exceeded`

I want to create a directive in Vue3 and using composition API. I also want to pass ref to another element as binding to my directive. So I have written the following piece of code:

<template>
    <div class="content" v-context-menu="contextMenuElement">
        <SmartContextMenu ref="contextMenuElement" :items="[]" />
    </div>
</template>
// ...
<script>
//...
const contextMenuElement = ref(null)
//...
</script>

Which makes the browser cause this error:

Maximum recursive updates exceeded

And I have changed the binding of directive this way to fix the error:

<template>
    <div class="content" v-context-menu="() => contextMenuElement">
        <SmartContextMenu ref="contextMenuElement" :items="[]" />
    </div>
</template>
// ...
<script>
//...
const contextMenuElement = ref(null)
//...
</script>

So that in the directive lifecycles I have to use binding.value() instead of binding.value or even binding.
Is there any better solution for this issue (passing ref (ref()) to directive (binding))?