Vue JS 3 Application to run in older Firefox/Chrome

I'm developing an app in VueJS 3 and it seems that's working on my local computer. But I have to make it runs also on older browsers like Firefox 38 Chrome 49.

My app uses some "fetch" functions to load content from api, to authenticate, to send commands, etc. After reading the following 2 links I believe I have some issues with it (despite it should works on CH 42). https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API and Babel not Polyfilling Fetch when using babel-preset-env . What it is your opinion?

I have babel and in package.json the following settings:

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "Chrome > 48",
 ]

But the errors received in Firefox and Chrome are very cryptic and I don't know what how should I transpile that function. I would focus on Chrome 49 and I'll add some context

Indeed the async function is available after Chrome 55. But I don't know how to convert it https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

For example in Chrome 49 I have the following console error on the following page: webpack:///./node_modules/@vue/devtools-api/esm/proxy.js

Uncaught SyntaxError: Unexpected identifier proxy.js:94

The content of that file is:

import { HOOK_PLUGIN_SETTINGS_SET } from './const';
export class ApiProxy {
constructor(plugin, hook) {
    this.target = null;
    this.targetQueue = [];
    this.onQueue = [];
    this.plugin = plugin;
    this.hook = hook;
    const defaultSettings = {};
    if (plugin.settings) {
        for (const id in plugin.settings) {
            const item = plugin.settings[id];
            defaultSettings[id] = item.defaultValue;
        }
    }
    const localSettingsSaveId = `__vue-devtools-plugin-settings__${plugin.id}`;
    let currentSettings = Object.assign({}, defaultSettings);
    try {
        const raw = localStorage.getItem(localSettingsSaveId);
        const data = JSON.parse(raw);
        Object.assign(currentSettings, data);
    }
    catch (e) {
        // noop
    }
    this.fallbacks = {
        getSettings() {
            return currentSettings;
        },
        setSettings(value) {
            try {
                localStorage.setItem(localSettingsSaveId, JSON.stringify(value));
            }
            catch (e) {
                // noop
            }
            currentSettings = value;
        },
    };
    if (hook) {
        hook.on(HOOK_PLUGIN_SETTINGS_SET, (pluginId, value) => {
            if (pluginId === this.plugin.id) {
                this.fallbacks.setSettings(value);
            }
        });
    }
    this.proxiedOn = new Proxy({}, {
        get: (_target, prop) => {
            if (this.target) {
                return this.target.on[prop];
            }
            else {
                return (...args) => {
                    this.onQueue.push({
                        method: prop,
                        args,
                    });
                };
            }
        },
    });
    this.proxiedTarget = new Proxy({}, {
        get: (_target, prop) => {
            if (this.target) {
                return this.target[prop];
            }
            else if (prop === 'on') {
                return this.proxiedOn;
            }
            else if (Object.keys(this.fallbacks).includes(prop)) {
                return (...args) => {
                    this.targetQueue.push({
                        method: prop,
                        args,
                        resolve: () => { },
                    });
                    return this.fallbacks[prop](...args);
                };
            }
            else {
                return (...args) => {
                    return new Promise(resolve => {
                        this.targetQueue.push({
                            method: prop,
                            args,
                            resolve,
                        });
                    });
                };
            }
        },
    });
}
async setRealTarget(target) {
    this.target = target;
    for (const item of this.onQueue) {
        this.target.on[item.method](...item.args);
    }
    for (const item of this.targetQueue) {
        item.resolve(await this.target[item.method](...item.args));
    }
}
}

I tried to change anything I found:

vue.config.js

    transpileDependencies: [
    "config",
    "vue",
    "vue-router",
    "vuex",
    "xml2js"
],

package.json

"dependencies": {
"@babel/polyfill": "^7.12.1",
"babel-polyfill": "^6.26.0",
"config": "^3.3.7",
"core-js": "^3.6.5",
"regenerator-runtime": "^0.13.9",
"vue": "^3.2.26",
"vue-router": "^4.0.12",
"vuex": "^4.0.2",
"xml2js": "^0.4.23"
  },
  "devDependencies": {
"@babel/cli": "^7.16.8",
"@babel/core": "^7.16.12",
"@babel/preset-env": "^7.16.11",
"@vue/babel-preset-app": "^4.5.15",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^7.0.0"
  },
  "browserslist": [
"defaults",
"> 1%",
"last 2 versions",
"not dead",
"Chrome > 48"
  ]

babel.config.js

module.exports = {
presets: [
  [
      '@vue/cli-plugin-babel/preset',
      {
          useBuiltIns: "usage",
          forceAllTransforms: true,
          targets: {
              "chrome": "49"
          },
          }
  ]
  ]
};

main.js

import "@babel/polyfill";
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './_store'
createApp(App).use(router).use(store).mount('#app');

from Vue JS 3 Application to run in older Firefox/Chrome