title: How to make custom directive in Vue.js 3?
body: <p>I am following the guide of <a href="https://v3-migration.vuejs.org/breaking-changes/custom-directives.html#overview" rel="nofollow noreferrer">Custom Directive</a> to create a custom directive in Vue.js 3.
  I made a directive to change background of an element.</p>
  <p><code>Home.vue</code> includes usage of the custom directive and <code>main.js</code> includes the custom direcive definition.</p>
  <p>&quot;Home.vue&quot;</p>
  <pre><code>&lt;template&gt;
      &lt;p v-highlight=&quot;yellow&quot;&gt;Home&lt;/p&gt;
  &lt;/template&gt;
  </code></pre>
  <p>&quot;main.js&quot;</p>
  <pre><code>import { createApp } from 'vue'
  import App from './App.vue'
  const app = createApp(App)
  
  app.mount('#app');
  app.directive(&quot;highlight&quot;,{
      beforeMount(el, binding){
          el.style.background = binding.value
      }
  });
  </code></pre>
  <p>But I get the following error in console:</p>
  <pre><code>&quot;Cannot read property 'created' of undefined&quot;
  </code></pre>
  <p>Does anyone help me?</p>