title: Identify multiple containers for vuejs components
body: <p>I'm working on a website where I have classic multiple pages powered by blade templates, but I want to use vuejs components for the most dynamic needs.</p>
  
  <p>It's working fine, but I couldn't find a convenient way to declare containers parsed by VueJs for components.</p>
  
  <p>I want to use many components in many places, but I can't declare a big main container as VueJs container because of conflicts with <code>&lt;script&gt;</code> tags.
  If I do that I get errors like : <code>- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as &lt;script&gt;, as they will not be parsed.</code></p>
  
  <p>I currently do something like that in my <code>app.js</code> file :</p>
  
  <pre><code>new Vue({
    el: '#need-components-1'
  });
  new Vue({
    el: '#need-components-2'
  });
  new Vue({
    el: '#need-components-3'
  });
  </code></pre>
  
  <p>I really don't like it, I'd like to be able to declare either the whole content as VueJs-able, or at least use a common class or attribute for containers. Here I need to add a new id each time I want to use a new place for components. Moreover, VueJs posts console errors for every time an element is not found because obviously they are not all always loaded.</p>
  
  <p>Is there any elegant / convenient way to do that ?</p>
  
  <p>Thanks</p>