title: Vue component state freezing when moved between router-views
body: <p>I have a custom map component, which wraps a Openlayers 4 instance. This component which I am forced to use, is used multiple places across my SPA. The initialization process is quite long, so I would like to keep one instance of the map available, and move it between views when I need to. Problem is that the state doesen´t update within the component when it has moved.</p>
  
  <p>I´ve boiled the problem down to this fiddle: <a href="https://jsfiddle.net/j16d4yto/" rel="nofollow noreferrer">https://jsfiddle.net/j16d4yto/</a> 
  When moved on the same router-view the state updates fine (click the ‘Change text’ button). But when the router-view changes, and the component is moved with appendChild to the new div, the state freezes, and you can´t update the text variable anymore.</p>
  
  <p>This is how I move the component from one element to another:</p>
  
  <pre><code>this.$root.$on('showMoveableComponent', function(element) {
        element.appendChild(thisElement);
        this.text = 'Changed text2';
      });
  </code></pre>
  
  <p>I bet I am doing something wrong here, and probably also approaching this problem in the wrong way?</p>
  
  <p>Thanks!</p>