How to use Vue Custom Directives with Typescript-CodePudding

I am trying to understand how to convert the example below using typescript and the Composition API, with the setup script. This example it from the

CodePudding user response：

In Vue 3, components are no longer limited to only 1 root element. Implicitly, this means you no longer have an this.$el. You can create one by adding ref="" to DOM element you want to target.

<script setup lang="ts">
// enables v-focus in templates
const root = ref(null)

onMounted(() => {
    // here you got root $el
    root.value.focus()
})

// Using Option API. I didn't check are it works.
this.$refs.$el
</script>

<template>
  <input ref="root" />
</template>

In composition API it will be like that:

<script setup lang="ts">
// enables v-focus in templates
const vFocus = {
  mounted: (el: any) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>