title: VUE Count how many directives are used on a component
body: <p>I've tried to count how many <code>directives</code> are used on a component like this. But it does not work as I expected</p>
  <p>this is my directive file</p>
  <pre><code>import ahoy from &quot;ahoy.js&quot;
  
  let count = 0
  
  export default {
    id: &quot;bar&quot;,
    definition: {
      bind: (el, binding) =&gt; {
        const handler = (entries, observer) =&gt; {
          count++
          console.log(count)
          if (entries[0].isIntersecting) {
            setTimeout(() =&gt; {
              ahoy.track(&quot;impression&quot;, {
                ...(typeof binding.value === &quot;object&quot;
                  ? { ...binding.value }
                  : { value: binding.value }),
  
                page: document.title,
                path: window.location.pathname.replace(/^\/en\//g, &quot;/&quot;),
                class: el.classList.value
              })
  
              observer.unobserve(entries[0].target)
            }, 100)
          }
        }
  
        const createIntersection = new IntersectionObserver(handler, { rootMargin: &quot;-45% 0%&quot; })
        createIntersection.observe(el)
      }
    }
  }
  </code></pre>
  <p>and this is how I call <code>directive</code> on my component</p>
  <pre><code>ReviewCard(
    v-bar=&quot;createIntersection(foo)&quot;
  )
  </code></pre>
  <p>variable count not stored <code>val++</code></p>
  <p>how can I count how many directives are used on a component?</p>
  <p>Thanks in advance :)</p>