title: Using VueJS in multipage WebForms project
body: <p>I have a webforms project which I'd like to use VueJS in but am having issues setting up the root element.</p>
  
  <p>If i wrap my content in an <code>&lt;div id="app"&gt;&lt;/div&gt;</code> element and pass this to the Vue instance:</p>
  
  <pre><code> new Vue({
      el: '#app',
      components: {
          foo
      },
      data: {
      },
      methods: {
      }
  });
  </code></pre>
  
  <p>With a test component such as:</p>
  
  <pre><code>var foo = Vue.component('foobar', {
      props: [
          'title'
      ],
      data: function () {
          return {
          };
      }
  });
  </code></pre>
  
  <p>And an example component inline template:</p>
  
  <pre><code>&lt;foobar inline-template title="Hello world"&gt;
      &lt;div&gt;
          &lt;h1&gt;{{title}}&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/foobar&gt;
  </code></pre>
  
  <p>I end up with a Vue console error because it's trying to parse the entire contents of the page as a Vue template and it's failing on some script manager scripts with the error <code>[Vue warn]: Error compiling template:</code>:</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;script type="text/javascript"&gt;
  //&lt;![CDATA[
  Sys.WebForms.PageRequestManager._initialize('ctl00$manScript', 'aspnetForm', 
  ['tctl00$ctxM','','tctl00$pnlMessagePlaceholder$pMP',''], [], [], 90, 
  'ctl00');
  //]]&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I include VueJS in a web forms project and avoid these template parse errors?</p>