Как сделать кастомную директиву в Vue.js 3?

Я следую руководству Custom Directive, чтобы создать настраиваемую директива в Vue.js 3. Я дал указание изменить фон элемента.

Home.vue включает использование настраиваемой директивы, а main.js включает определение настраиваемой директивы.

"Home.vue"

<template>
    <p v-highlight="yellow">Home</p>
</template>

"main.js"

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

app.mount('#app');
app.directive("highlight",{
    beforeMount(el, binding){
        el.style.background = binding.value
    }
});

Но в консоли появляется следующая ошибка:

"Cannot read property 'created' of undefined"

Кто-нибудь мне поможет?