Vue.js 作用域slots和 IE11 的问题

我的组件如下所示:

<template>
    <div>
        <div v-if="!loaded">
            <p><i class="fas fa-spinner fa-spin"></i> Loading feed</p>
        </div>

        <div v-else>

            <div data-slider ref="feedSlider" v-if="length > 0">
                <div class="swiper-wrapper">
                    <div class="slide" v-for="record in records" :key="record.id">
                        <slot :record="record"></slot>
                    </div>
                </div>
            </div>

            <div v-else>
                <p>There are no records available.</p>
            </div>

        </div>

    </div>
</template>
<script>
    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 < 2) {
                    return;
                }
                setTimeout(() => {
                    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);
            }
        }
    }
</script>

进口的mixin AjaxCaller可与任何其他成分配合使用:

<script>
    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);
            }
        }
    }
</script>

以下是我如何在视图中称之为:

<feed-wrapper url="{{ route('front.news.feed') }}">
    <div slot-scope="{ record }">
        <p>
            <a :href="record.uri" v-text="record.name"></a><br />
            <span v-text="record.excerpt"></span>
        </p>
    </div>
</feed-wrapper>

除了IE 11(及更低版本)之外，任何浏览器都可以正常工作.

我得到了

[Vue warn]:无法生成渲染函数:

语法错误:中应有标识符...

它甚至无法在mounted段内执行方法调用.

我用laravel-mix和Laravel，所以所有的东西都是用webpack和babel来编译的，所以这不是ES6相关的问题.

我已经花了整整一个晚上试图解开这个谜团，所以任何帮助都将不胜感激.