I am using a custom directive which hides or shows a component. A custom directive is used because the component's visibility is based on logic which is difficult to squeeze into a v-show condition (and there are actually many components, so it's easier to use this custom directive).

The problem is that since the custom directive directly sets the element's style.visibility and style.display, it somewhat clashes with Vue's own v-show (at least that's my explanation for why this sometimes fails). My theory is that the element is re-rendered at part of the virtual DOM rendering and thus direct style modifications in element are overridden.

Since beforeMount allows access to the vnode (beforeMount(element, binding, vnode)), it should be possible to directly modify the vnode, so any existing logic on v-show could be merged with the custom directive's logic (merged into v-show). Is that possible or advised? The Vue documentation is a little scant in that area.

Has anyone tried this before or has any ideas that could help?