Vue not working in IE11 despite Babel Polyfill - vue.js

Question

unfortunately, my most recent application is required to support Internet Explorer 11. This requirement came somewhat suprising to me, so I already built the applications frontend with Vue.js. The backend is written in Laravel, therefore I use laravel-mix/webpack.
This is my app.js:
require('./bootstrap');
window.Vue = require('vue');
Obviously, IE11 doesn't support Vue.js so I tried the following ways of transpiling/polyfilling the code.
1. requiring polyfill
Approach: Adding require("#babel/polyfill"); to the top of my app.js as described in https://babeljs.io/docs/en/babel-polyfill
Result: Following Error Message shown in IE console:
SCRIPT1003: ':' expected
Clearly a compatibility issue, since pre data(){} is invalid in ES < 5
2. using mix.babel
Approach: Adding mix.babel(['resources/js/app.js'], 'resources/js/app.js') to my webpack.mix.js as described in https://laravel.com/docs/5.8/mix (I am using laravel 5.8.36). My webpack.mix.js now looks like this:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js/app.js')
mix.babel(['resources/js/app.js'], 'resources/js/app.js')
mix.sass('resources/sass/app.scss', 'public/css');
Result: Same Error Message as in 1
3. using an mix extension
Approach: Installing this extension: https://laravel-mix.com/extensions/polyfill and configure my webpack.mix.js as described. My webpack.mix.js now looks like this:
const mix = require('laravel-mix');
require('laravel-mix-polyfill');
mix.js('resources/js/app.js', 'public/js/app.js')
mix.sass('resources/sass/app.scss', 'public/css');
mix.polyfill({
enabled: true,
useBuiltIns: "usage",
targets: {"firefox": "50", "ie": "11"}
})
Result: Again, the same Error Message as in 1
4. manually transpiling with babel-cli
Approach: Merely out of desperation I tried to manually transpile my app.js with the following command ./node_modules/.bin/babel ./public/js/app.js --out-dir ./public/js/
Result: Stil no luck, same error as in 1
I am really starting to get frustrated, so any help is much appreciated.

Answer 1

If you can't get Babel-Polyfill to work, you could try using Polyfill.io, which automatically polyfills the selected Polyfills if the browser requires them.
All you need to do is go the Create a polyfill bundle page, and select the polyfills you need. Then once you've made your bundle, copy the URL at the top and add a <script> tag with said URL to your head.
I personally haven't used it with Laravel, but I've previously fought with babel-polyfill myself, and ended up using Polyfill.io since i couldn't get babel-polyfill to work.