Rails 6 + Webpacker 4 + Vuejs lỗi khi dùng runtime-only build và template biến thành hàm bị comment

Mình đang làm một dự án dùng Rails 6, webpacker 4 và vues. Mình dùng template mặc định mà webpacker cho, lúc chạy thì có xảy ra lỗi mà mình có tìm hiểu mấy ngày nay mà không ra.

Code của mình đây

// package.json

{
  "name": "round_table",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "core-js": "^3.4.0",
    "css-loader": "^3.2.0",
    "regenerator-runtime": "^0.13.3",
    "tailwindcss": "^1.1.3",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.2",
    "vue-template-compiler": "^2.6.10",
    "vue-turbolinks": "^2.0.4",
    "webpack": "^4.0.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.9.0"
  }
}
// config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
module.exports = environment
// packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "core-js/stable";
import "regenerator-runtime/runtime";

import '../styles/application.css'
# layout/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>RoundTable</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'hello_vue', 'data-turbolinks-track': 'reload' %>
  </head>

  <body class="min-h-screen bg-gray-100">
    <div class="container mx-auto">
      <%= yield %>
    </div>
  </body>
</html>
// my template
<div id='hello'>
  {{message}}
  <app></app>
</div>
// hello_vue.js

/* eslint no-console: 0 */
// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> (and
// <%= stylesheet_pack_tag 'hello_vue' %> if you have styles in your component)
// to the head of your layout file,
// like app/views/layouts/application.html.erb.
// All it does is render <div>Hello Vue</div> at the bottom of the page.

// import Vue from 'vue'
// import App from '../app.vue'

// document.addEventListener('DOMContentLoaded', () => {
//   const app = new Vue({
//     render: h => h(App)
//   }).$mount()
//   document.body.appendChild(app.$el)

//   console.log(app)
// })


// The above code uses Vue without the compiler, which means you cannot
// use Vue to target elements in your existing html templates. You would
// need to always use single file components.
// To be able to target elements in your existing html/erb templates,
// comment out the above code and uncomment the below
// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
// Then add this markup to your html template:
//
// <div id='hello'>
//   {{message}}
//   <app></app>
// </div>


// import Vue from 'vue/dist/vue.esm'
// import App from '../app.vue'
//
// document.addEventListener('DOMContentLoaded', () => {
//   const app = new Vue({
//     el: '#hello',
//     data: {
//       message: "Can you say hello?"
//     },
//     components: { App }
//   })
// })
//
//
//
// If the project is using turbolinks, install 'vue-turbolinks':
//
// yarn add vue-turbolinks
//
// Then uncomment the code block below:
//
import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue'
import App from '../app.vue'

Vue.use(TurbolinksAdapter)

document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    el: '#hello',
    data: () => {
      return {
        message: "Can you say hello?"
      }
    },
    components: { App }
  })
})

Mình dùng bản runtime-only như trong doc có nói

When using vue-loader or vueify, templates inside *.vue files are pre-compiled into JavaScript at build time. You don’t really need the compiler in the final bundle, and can therefore use the runtime-only build.

Vue-loader có trong package.json nhưng console lại báo lỗi:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Và html cho vue thành comment:

<!--
function (a, b, c, d) {
    return createElement(vm, a, b, c, d, true);
  }
-->

Có nhiều người gợi ý dùng bản full là sẽ không còn báo lỗi nhưng mình muốn dùng bản runtime-only. Mình cũng khá mới với vue và webpack. Mong được mọi người giúp đỡ. Cảm ơn nhiều ạ.