Merge pull request #58 from mitjans/53-cant-capture-custom-events-usi…

…ng-v-directive

docs: cite vue documentation on using directives with custom components

docs/content/3.features.md

@@ -50,6 +50,17 @@ Nuxt PostHog provides a [Vue directive](https://vuejs.org/guide/reusability/cust
 ☝️ Whenever this button is clicked, an event will be sent to PostHog automatically
 ::
 
+::callout
+---
+icon: i-heroicons-exclamation-triangle
+color: amber
+---
+
+You might find that the event is not being triggered when using the directive on a custom component. Citing [Vue official documentation](https://vuejs.org/guide/reusability/custom-directives#usage-on-components):
+
+> Using custom directives on components is not recommended. Unexpected behaviour may occur when a component has multiple root nodes.
+::
+
 This directive also accepts an object if you want to provide additional properties to this event:
 
 ```vue [app.vue]
@@ -65,6 +76,14 @@ This directive also accepts an object if you want to provide additional properti
 </template>
 ```
 
+::callout
+---
+icon: i-heroicons-sparkles
+---
+
+This directive is typed and will provide suggestions while coding
+::
+
 ### Listen to custom events
 
 You can listen to custom events (other than the default `click`) by passing in the event to the directive as an argument:
@@ -77,15 +96,6 @@ You can listen to custom events (other than the default `click`) by passing in t
 </template>
 ```
 
-::callout
----
-
-icon: i-heroicons-sparkles
----
-
-This directive is typed and will provide suggestions while coding
-::
-
 ### Auto-capture page views
 
 By default, this module will capture page views automatically. If not desired, you can change this behavior: