Rendering problem in Vue ES Module about vuelayers HOT 12 CLOSED

<%= javascript_pack_tag 'main', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'main', 'data-turbolinks-track': 'reload' %>

import VueLayers  from 'vuelayers'
import 'vuelayers/lib/style.css'
Vue.use(VueLayers);

      center: [0, 0],
      zoom: 3,
      rotation: 0,

vl-map(:load-tiles-while-animating='true', :load-tiles-while-interacting='true', style='height: 400px')
  vl-view(:center.sync='center', :zoom.sync='zoom', :rotation.sync='rotation')
  vl-layer-tile
    vl-source-osm

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },
  },

const path = require('path');
const webpack = require('webpack');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const nodeEnv = process.env.NODE_ENV || 'development';
const isProduction = nodeEnv === 'production';
const LiveReloadPlugin = require('webpack-livereload-plugin');

module.exports = {

  context: path.resolve(__dirname, './src'),
  watch: true,
  entry: {
    app: './app.js',
    bsjs: './mdb/js/bootstrap.js',
    vendor: './mdb/sass/mdb.scss',
    bootstrap: './mdb/css/bootstrap.css',
    mdb: './mdb/css/mdb.css'
  },
  output: {
    path: path.resolve(__dirname, './public/assets'),
    filename: '[name].bundle.js',
    publicPath: '/assets/',
  },

  devServer: {
    contentBase: path.resolve(__dirname, './src'),
    historyApiFallback: true,
    port: 3000,
    compress: isProduction,
    inline: !isProduction,
    hot: !isProduction,
    host: '0.0.0.0',
    stats: {
      assets: true,
      children: false,
      chunks: false,
      hash: false,
      modules: false,
      publicPath: false,
      timings: true,
      version: false,
      warnings: true,
      colors: {
        green: '\u001b[32m',
      },
    },
  },
  devtool: 'source-map',
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].bundle.css',
      allChunks: true,
    }),

  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        use: [{
          loader: 'babel-loader',
          options: {presets: ['es2015']},
        }],
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: 'css-loader',
            options: {importLoaders: 1},
          }],
        }),
      },
      {
        test: /\.scss/i,
        use: ExtractTextPlugin.extract([ 'css-loader', 'sass-loader' ])
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
        use: 'url-loader?limit=20480&name=assets/[name]-[hash].[ext]',
      },
      {
        test: /\.vue$/,
        use:[{
          loader: 'vue-loader',
          options: {
            loaders: {
              js: 'babel-loader'
            }
          }
        }]
      },

    ]
  }
};