title: Replacing entire vue.js container
body: <p>I have a vue.js widget that is instantiated as follows:</p>
  
  <pre><code>var foo = new Vue({
      el: '#v-container',
      methods: {
          populate:function() {
              // some custom code
          }
      },
  });
  </code></pre>
  
  <p>The html is something along the following lines:</p>
  
  <pre><code>&lt;div id="main-container"&gt;
    &lt;lots of other HTML&gt;
    &lt;div id="v-container"&gt;
      &lt;a href="#" v-on:click="populate"&gt;Foo&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This all works perfectly, and my data binding and custom methods work without any problems.</p>
  
  <p>However, the <code>#v-container</code> element is contained inside of another element called <code>#main-container</code>. In some cases, the entire <code>#main-container</code> is replaced via a legacy jquery ajax method as follows:</p>
  
  <p><code>$('#main-container').replaceWith(result.content);</code></p>
  
  <p>Once this happens, then the vue.js widget stops responding to the <code>v-on click</code> event handler.</p>
  
  <p>Any suggestions on how to get around this?</p>