Оцените v-toolbar в IE11. Меню не работает в IE11

Question

Не получается заставить меню работать в IE11, нет проблем в Firefox, Edge или Chrome. Иметь v-панель инструментов для верхнего меню и получить результат, как и ожидалось, в Chrome или Firefox. Но только текст MENU в середине панели инструментов в IE11.

Установили babel-polyfill и @ babel / preset-env -D в соответствии с Подтвердить документацию https://vuetifyjs.com/en/getting-started/browser-support. За исключением того, что страница работает как надо. Все внутренние и внешние ссылки работают.

//bable.config.js
module.exports = {
  presets: [
    ['@babel/preset-env'],
    ['@vue/app', {
      useBuiltIns: 'entry' 
    }  
    ]
  ]
}

и

//main.js
import '@babel/polyfill'
import Vue from 'vue'
import Vuetify from 'vuetify'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
/* import 'vuetify/src/stylus/app.styl' */
import VueYouTubeEmbed from 'vue-youtube-embed'
import vPlayBack from 'v-playback'

Vue.config.productionTip = false

Vue.use(VueYouTubeEmbed)

Vue.use(vPlayBack)

Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',   //Moderate blue
    secondary: '#616161', //Very dark gray
    accent: '#f44336',    //Bright red
    error: '#ff5722',     //Vivid red
    warning: '#ff9800',   //Pure orange
    info: '#03a9f4',      //Vivid blue
    success: '#8bc34a'    //Moderate green
  }
})

new Vue({
  router,
  Vuetify,
  render: h => h(App)
}).$mount('#app')

и мой webpack.config. js

// webpack.config.js

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
  plugins: [
    new VuetifyLoaderPlugin()
  ],

  rules: [
    {
      test: /\.s(c|a)ss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          // Requires sass-loader@^7.0.0
          options: {
            implementation: require('sass'),
            fiber: require('fibers'),
            indentedSyntax: true // optional
          },
          // Requires sass-loader@^8.0.0
          options: {
            implementation: require('sass'),
            sassOptions: {
              fiber: require('fibers'),
              indentedSyntax: true // optional
            },
          },
        },
      ],
    },
  ],

}

Код для меню в моем приложении. vue

<template>
  <v-app>
    <v-navigation-drawer v-model="drawer" temporary app>
      <v-toolbar flat color="primary" dark app>
        <v-list class="pa-0">
          <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title class="text-xs-center">MENU</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
              <v-icon @click.stop="drawer = false">close</v-icon>
            </v-list-tile-action>
          </v-list-tile>
        </v-list>
      </v-toolbar>

      <v-list class="pt-0" classdense>
        <v-divider></v-divider>

        <v-list-tile v-for="item in drawerLinks" :key="item.title" :to="{path: item.link }">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content class="subtitle-1">
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>

    <v-toolbar dark app color="primary">
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <router-link to="/">
        <v-img :src="require('./assets/name.png')" height="48" width="156" contain></v-img>
      </router-link>


      <v-menu offset-y>
        <template v-slot:activator="{ on }">
          <v-btn flat v-on="on">
            <v-icon left>expand_more</v-icon>
            <span>Our Adventures</span>
          </v-btn>
        </template>

        <v-list v-for="item in items_2" :key="item.title" class="text-xs-left py-0">
          <v-menu offset-x right>
            <template v-slot:activator="{ on }">
              <v-list-tile v-on="on" :on_click="close_m()" router :to="item.link">
                <v-list-tile-title>{{ item.title }}</v-list-tile-title>
              </v-list-tile>
            </template>
          </v-menu>
        </v-list>
      </v-menu>

      <v-toolbar-items v-for="item in toolbarLinks" :key="item.title" class="hidden-sm-and-down">
        <v-btn flat :to="{path: item.link}">{{ item.title }}</v-btn>
      </v-toolbar-items>

      <v-spacer></v-spacer>
      <router-link to="/contact">
        <v-btn icon>
          <v-icon>contact_phone</v-icon>
        </v-btn>
      </router-link>
    </v-toolbar>

    <v-content app>

      <router-view></router-view>
    </v-content>
    <div>

      <v-footer dark app absolute :height="footerHeight" color="secondary">
        <v-container fluid>
          <v-layout align-center justify-start row fill-height wrap>
            .............................
          </v-layout>
        </v-container>
      </v-footer>
    </div>
  </v-app>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      drawer: null,
      drawerLinks: [
        { title: "Home", icon: "home", link: "/" },
        ...........
      ],
      toolbarLinks: [
        { title: "Information", link: "/info" },
        ...........
      ],

      items_2: [
        { title: "All our our adventures tour", link: "/adventures" },
        ...........................
      ],
      mini: false,
      right: null
    };
  },

  computed: {
    footerHeight() {
      switch (this.$vuetify.breakpoint.name) {
        default:
        case "xs":
          return "330";
        case "sm":
          return "300";
        case "md":
          return "300";
        case "lg":
          return "200";
        case "xl":
          return "200";
      }
    }
  },

};
</script>

<style scoped>
.bg-red {
  /*background-color: red;*/
}
.plain-text {
  text-decoration: none;
}
</style>

<style lang="scss" src="./globals.scss">
</style>