title: Vue Js: Issue with scoped slots and IE11
body: <p>My component looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div v-if="!loaded"&gt;
              &lt;p&gt;&lt;i class="fas fa-spinner fa-spin"&gt;&lt;/i&gt; Loading feed&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div v-else&gt;
  
              &lt;div data-slider ref="feedSlider" v-if="length &gt; 0"&gt;
                  &lt;div class="swiper-wrapper"&gt;
                      &lt;div class="slide" v-for="record in records" :key="record.id"&gt;
                          &lt;slot :record="record"&gt;&lt;/slot&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div v-else&gt;
                  &lt;p&gt;There are no records available.&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import Swiper from 'swiper';
      import AjaxCaller from '../../mixins/AjaxCaller';
      export default {
          mixins: [AjaxCaller],
          data() {
              return {
                  loaded: false,
                  records: [],
                  length: 0,
              }
          },
          mounted() {
              this.makeCall(this.success, this.failure);
          },
          methods: {
              success(response) {
                  this.loaded = true;
                  if (!response.data.records) {
                      return;
                  }
                  this.records = response.data.records;
                  this.length = this.records.length;
                  if (this.length &lt; 2) {
                      return;
                  }
                  setTimeout(() =&gt; {
                      this.initiateSlider();
                  }, 1000);
              },
              initiateSlider() {
                  (new Swiper(this.$refs.feedSlider, {
                      effect: 'slide',
                      slideClass: 'slide',
                      slideActiveClass: 'slide-active',
                      slideVisibleClass: 'slide-visible',
                      slideDuplicateClass: 'slide-duplicate',
  
                      slidesPerView: 1,
                      spaceBetween: 0,
                      loop: true,
                      speed: 2000,
                      autoplay: {
                          delay: 5000,
                      },
                      autoplayDisableOnInteraction: false,
                  }));
              },
              failure(error) {
                  this.stopProcessing();
                  console.log(error);
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>The imported mixin <code>AjaxCaller</code>, which works fine with any other component:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
      export default {
          props: {
              url: {
                  type: String,
                  required: true
              },
              method: {
                  type: String,
                  default: 'post'
              }
          },
          data() {
              return {
                  processing: false
              }
          },
          computed: {
              getMethodParams() {
                  if (this.method === 'post') {
                      return {};
                  }
                  return this.requestData();
              },
              postMethodData() {
                  if (this.method === 'get') {
                      return {};
                  }
                  return this.requestData();
              }
          },
          methods: {
              requestData() {
                  return {};
              },
              startProcessing() {
                  this.processing = true;
                  this.startProcessingEvent();
              },
              stopProcessing() {
                  this.processing = false;
                  this.stopProcessingEvent();
              },
              startProcessingEvent() {},
              stopProcessingEvent() {},
              makeCall(success, failure) {
                  this.startProcessing();
                  window.axios.request({
                          url: this.url,
                          method: this.method,
                          params: this.getMethodParams,
                          data: this.postMethodData
                      })
                      .then(success)
                      .catch(failure);
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>And here's how I call it from within the view:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;feed-wrapper url="{{ route('front.news.feed') }}"&gt;
      &lt;div slot-scope="{ record }"&gt;
          &lt;p&gt;
              &lt;a :href="record.uri" v-text="record.name"&gt;&lt;/a&gt;&lt;br /&gt;
              &lt;span v-text="record.excerpt"&gt;&lt;/span&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/feed-wrapper&gt;
  </code></pre>
  
  <p>Everything works fine in any browser other than IE 11 (and lower).
  It even works in Edge - no issues what so ever.</p>
  
  <p>In IE I get</p>
  
  <blockquote>
    <p>[Vue warn]: Failed to generate render function: </p>
    
    <p>Syntax Error: Expected identifier in ...</p>
  </blockquote>
  
  <p>It doesn't even get to execute method call from within the <code>mounted</code> segment.</p>
  
  <p>I use <code>laravel-mix</code> with <code>Laravel</code> so everything is compiled using <code>webpack</code> with <code>babel</code> so it's not ES6 related issue.</p>
  
  <p>I've already spent whole night trying to un-puzzle this so any help would be much appreciated.</p>