How to create a custom directive in Vue.js 3?

How to create a custom directive in Vue 3 that adds a CSS class to an element when the user clicks on it, and removes the class when the user clicks again? CSS class to be added is “active”.

<template>
<div v-my-directive>Click me!</div>
</template>
<style>
.active {
background-color: red;
}
</style>