When working with Vue, it's best to let the framework be in control of the DOM rather than making direct changes yourself. This applies not only to Vue but also to other SPA frameworks like React and Angular.
The reason for this is that Vue operates by modifying the DOM on its own and expects to have full control over it. When rendering components, Vue removes old DOM elements, adds new ones, updates event bindings, and optimizes to only update necessary DOM nodes.
If you interfere and make direct changes that Vue is unaware of, your changes may get overwritten by Vue during the next render or conflict with bindings that Vue relies on.
While it's possible to work with Vue and jQuery together if you're knowledgeable about Vue's lifecycle, it's generally not recommended. Vue and jQuery function differently; jQuery modifies the DOM directly while Vue builds components that manage their own state and rendering.
Trying to use both frameworks together diminishes their individual advantages and adds complexity in managing conflicting state and rendering theories. It often proves easier to rewrite a jQuery widget in Vue directly rather than embedding it within a Vue app.
This shift requires changing habits developed from working with jQuery, such as building the entire DOM structure and then adding control structures afterward. In Vue, it's better to integrate logic into components so that the framework can handle the work for you.
I recommend creating one Vue component for each link that manages its own state for open/closed/active states and recurses to its children when "open". By approaching navigation data in this way, you allow Vue to manage the tree more efficiently compared to manually controlling it as you would with jQuery.