title: vue - integrate jquery plugin with v-if
body: <p>I'm trying to integrate the jsTree plugin in my vue code.<br>
  <a href="https://www.jstree.com/" rel="nofollow noreferrer">https://www.jstree.com/</a>  </p>
  
  <p>This is a simplified version of my problem:<br>
  <a href="https://jsfiddle.net/hqcmu8pt/7/" rel="nofollow noreferrer">https://jsfiddle.net/hqcmu8pt/7/</a></p>
  
  <pre><code>&lt;div id="app"&gt;
    Tree is gone after one toggle.
    &lt;button type="button" @click="show= !show"&gt;
     toggle tree
    &lt;/button&gt;
  
    &lt;div v-if="show"&gt;
      Tree: &lt;br&gt;
      &lt;div id="tree"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to lazy initialize the tree, only once, when the user toggle the tree visibility. So a watcher seems fine for that.
  The issue is that after the first time the tree is created in the watcher handler, in the next toggle the tree is completely destroyed and never go back to the DOM. </p>
  
  <p>How can I make vue understand my DOM change?<br>
  I can't use <code>v-show</code> with <code>mounted</code> because that won't give me a lazy load (my actual tree uses ajax).
  <code>&lt;keep-alive&gt;</code> didn't work as well.</p>