ag-grid + vue + webpacker でvueインスタンスが２つ混入する問題

tl;dr

ag-gird + vue2.x + webpackerを利用した開発で、ブラウザコンソールに以下のような警告が表示されたので、解決に至るまでの試行錯誤の結果をメモしておく。

[Vue warn]: $attrs is readonly.

found in

---> <AgGridVue>
       <App> at app/javascript/packs/common/ag_grid.vue
         <Root>

[Vue warn]: $listeners is readonly.

found in

---> <AgGridVue>
       <App> at app/javascript/packs/common/ag_grid.vue
         <Root>

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "hogehoge"

found in

---> <AgGridVue>
       <App> at app/javascript/packs/common/ag_grid.vue
         <Root>

警告なので動くには動くけど、そのままにするわけにも行かない。
よーく見ると、ag-gridの何かが悪さしてるっぽいのはわかる。

環境

Ruby: 2.5.1
Rails: 5.2.0
Webpacker: 3.5
Vue: 2.5
ag-grid: 18.1

おおまかな説明

Railsアプリケーションを作成する際、jsの開発にwebpackerというgemを利用した。

Vue2.x系では、Webpackerなどのバンドラ向けに、２種類のVue.jsインスタンスを用意している。

簡単に説明しておくと、

• vue.esm.js
  • コンパイラ＋ランタイムの両方を含んだ完全版
• vue.runtime.esm.js
  • ランタイムのみの軽量版

アプリケーションの都合で、今回はvue.esm.jsを利用することにしていたのだが、なぜかブラウザにはvue.esm.jsとvue.runtime.esm.jsの２つのインスタンスが渡されてしまっていて、競合を起こしていることが原因。
（ほぼ同じコードを２つ含んでいるので、フラグ変数（isUpdatingChildComponent）の操作がおかしなことになってる。）

ag-gridの内部コードで下記のような箇所があり、vue.runtime.esm.jsが混入してるっぽい。

import Vue from 'vue'

対処

すべてのvueインスタンスをvue.esm.jsに固定すればよい。
※ag-grid内のソースを書き換えるわけには行かないので、aliasを利用する。（後述）

1. 自前のコードを整備する

自プロジェクトのjsのimportの書き方を確認する。

OKパターン

import Vue from 'vue/dist/vue.esm.js'

NGパターン

ファイル名を最後まで明記していないので、パス指定のファイルとして認識してもらえない（後述のaliasとも衝突するのでNG）

import Vue from 'vue/dist/vue.esm'

デフォルトの書き方なのでvue.runtime.esm.jsが選択されてしまう。（デフォルトの動作）

import Vue from 'vue'

2. Webpackerの設定でaliasを設定する

vueはデフォルトではvue.runtime.esm.jsを選択してしまうので、Webpackerのaliasを使ってvueをvue.esm.jsに置き換える。

Webpackerの設定ファイルを新規追加

config/webpack/custom.js

module.exports = {
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm.js',
    }
  }
}

custom.jsを各モードの設定ファイルで取り込む

config/webpack/development.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')
const customConfig = require('./custom')      // ＊追加

environment.config.merge(customConfig)        // ＊追加

module.exports = environment.toWebpackConfig()

test、productionなどのファイルも同じように修正する。

上記対処をいれて、再起動すればWarnは出なくなる。はず。