docs: add warning to custom-directives

src/guide/reusability/custom-directives.md

@@ -210,6 +210,11 @@ app.directive('demo', (el, binding) => {
 
 ## Usage on Components {#usage-on-components}
 
+:::warning Not recommended usage
+Using custom directives on components is not recommended, unexpected behaviour may occur when a component has multiple root nodes.
+:::
+
+
 When used on components, custom directives will always apply to a component's root node, similar to [Fallthrough Attributes](/guide/components/attrs).
 
 ```vue-html
@@ -224,4 +229,4 @@ When used on components, custom directives will always apply to a component's ro
 </div>
 ```
 
-Note that components can potentially have more than one root node. When applied to a multi-root component, a directive will be ignored and a warning will be thrown. Unlike attributes, directives can't be passed to a different element with `v-bind="$attrs"`. In general, it is **not** recommended to use custom directives on components.
+Note that components can potentially have more than one root node. When applied to a multi-root component, a directive will be ignored and a warning will be thrown. Unlike attributes, directives can't be passed to a different element with `v-bind="$attrs"`.