title: Vue.js Router: Run code when component is ready
body: <p>I'm working on a single-page app with Vue.js and its official router.</p>
  
  <p>I have a menu and a component (.vue file) per every section which I load using the router. In every component I have some code similar to this:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt; &lt;!-- MY DOM --&gt; &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data () {},
          methods: {},
          route: {
              activate() {},
          },
          ready: function(){}
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I want to execute a piece of code (init a jQuery plugin) once a component has finished transitioning in. If I add my code in the <code>ready</code> event, it gets fired only the first time the component is loaded. If I add my code in the <code>route.activate</code> it runs every time, which is good, but the DOM is not loaded yet, so is not possible to init my jQuery plugin.</p>
  
  <p>How can I run my code every time a component has finished transitioning in and its DOM is ready?</p>