title: How to use use cytoscape.js in combination with vue.js dynamic component's keep-alive?
body: <p>I am trying to build a single page application using Vue.js 2.0. The application is supposed to feature multiple modes of operation, which I wanted to implement using Vue.js <a href="https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components" rel="nofollow noreferrer">dynamic component</a>. Since the state of each mode should be preserved while switching between them, I decided to use the <a href="https://v2.vuejs.org/v2/api/#keep-alive" rel="nofollow noreferrer">keep-alive</a> feature that Vue.js provides. One of the modes is supposed to be a network view created by using Cytoscape.js .</p>
  <p>And here comes my problem. The network is initialized correctly when I switch the first time to it, but after switching back and forth, the network view freezes. keep-alive works properly (as far as I understand it) and brings back both the Cytoscape instance and the proper HTML section. Somehow, the connection between the Cytoscape instance and the HTML sections seems to be lost, although I don't understand how and why.</p>
  <p>Here is an example code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//sample data for network
  var testElements = [
      { data: {id: 'a'} },
      { data: {id: 'b'} },
      { data: {
          id: 'ab',
          source: 'a',
          target: 'b' 
          }
      }
  ];
      
  //Vue components
  Vue.component('otherView', {
      template: '&lt;div&gt;This is another mode&lt;/div&gt;'
  });
  
  Vue.component('network', {
      template: '&lt;div id="container" class="cy"&gt;&lt;/div&gt;',
      mounted: function () {
          cy1 = cytoscape({
              container: document.getElementById("container"),
              elements: testElements
          });
      }
  });
  
  //Vue dynamic component
  var vm = new Vue({
      el: "#dynamic",
      data: {
          currentView: 'otherView'
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.cy {
      width: 500px;
      height: 500px;
      position: absolute;
      top: 100px;
      left: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://rawgit.com/cytoscape/cytoscape.js/master/dist/cytoscape.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="dynamic" &gt;
      &lt;div id="selectorButton"&gt;
          &lt;button id="button1" @click="currentView='otherView'"&gt;Other view&lt;/button&gt;
          &lt;button id="button2" @click="currentView='network'"&gt;Network&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;keep-alive&gt;
          &lt;component :is="currentView"&gt;&lt;/component&gt;
      &lt;/keep-alive&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>