title: Laravel and vue.js template: javascript handled as literal instead of being executed
body: <p>I've a <strong>home.blade.php</strong> that ends with </p>
  
  <pre><code>@section('page_specific_scripts')
      &lt;script type="text/javascript"&gt; 
          const slider_base_img_url = '{{ $slider_base_img_url }}'
      &lt;/script&gt;
      &lt;script src="{{ mix('js/home.js') }}"&gt;&lt;/script&gt;
  @endsection
  </code></pre>
  
  <p>This is the relevant part of <strong>home.js</strong> </p>
  
  <pre><code>Vue.component('slide', Vue.Slide);
  Vue.component('carousel', Vue.Carousel);
  
  const slider_app = new Vue({
      el: '#home-page-slider',
      template: `
          &lt;carousel :perPage="1" :autoplay="true"  :autoplayLoop="true" &gt;
  
              &lt;slide v-for="n in 3"&gt;
                  &lt;IMG
                      class='autosize'
                      src="{{ slider_base_img_url + '0' + n + '.png' }}"
              /&gt;
              &lt;/slide&gt;
          &lt;/carousel&gt;
      `
  });
  </code></pre>
  
  <p>And this is my <strong>mix</strong> config file</p>
  
  <pre><code>mix
      .js('resources/assets/js/home.js', 'public/js')
      .js('resources/assets/js/app.js', 'public/js')
      .extract(['vue', 'lodash', 'vue-resource', 'vue-carousel'])
      .sass('resources/assets/sass/app.scss', 'public/css')
      .sass('node_modules/font-awesome/scss/font-awesome.scss', 'public/css/vendor')
      .version();
  </code></pre>
  
  <p>The problem is that vue templates is rendered but the src of the image remain the textual javascript. This is the <strong>generated HTML</strong></p>
  
  <pre><code>&lt;div class="VueCarousel-inner" style="transform: translateX(-3806px); transition: transform 0.5s ease; flex-basis: 1903px; visibility: visible;"&gt;
  
  &lt;div class="VueCarousel-slide"&gt;
  &lt;img src="{{ slider_base_img_url + '0' + n + '.png' }}" class="autosize"&gt;&lt;/div&gt;
  
  ... [cut] ... 
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p>For reference, this is the <strong>home.js file after mix</strong> as loaded from the browser</p>
  
  <pre><code>Vue.component('slide', Vue.Slide);
  Vue.component('carousel', Vue.Carousel);
  
  
  var slider_app = new Vue({
      el: '#home-page-slider',
      //language=HTML
      template: "\n        &lt;carousel :perPage=\"1\" :autoplay=\"true\"  :autoplayLoop=\"true\" &gt;\n           \n            &lt;slide v-for=\"n in 3\"&gt;\n                &lt;IMG\n                    class='autosize'\n                    src=\"{{ slider_base_img_url + '0' + n + '.png' }}\"\n                /&gt;\n            &lt;/slide&gt;\n        &lt;/carousel&gt;\n    "
  });
  </code></pre>
  
  <p><em>The template itself is working, because the for loop creates 3 slides</em>. </p>
  
  <p><strong>But why the inner javascript is not being executed?</strong></p>
  
  <p>Is there a specific Vue-way that actually I don't know yet?</p>