Vue Programmaticで出したモーダルのprops変更

最近コンポーネントライブラリにBuefyをちょいちょい触っている中で、
モーダルでちょっとハマったのでメモ。

Programmaticにモーダルを出す

Buefyのドキュメント読むと分かりますが、

vm.$modal.open({
  parent: true,
  component: Component,
  props: {
    // props
  },
  events: {
    // emit event
  }
})

要はこんな感じで書けば、プログラムからモーダルが呼び出せます。
よくあるやつですね。

だいたいこの手のやつは

<b-modal :visible.sync="dialogVisible">
</b-modal>

みたいな感じにして、stateのtrue/falseで出したり消したりができます。 自分はこのテンプレートに書くやり方があまり好きではなくて、どちらかというとvim.$modal.openとかで呼びたい派。
まぁ、全てが全てではないです。

propsが更新されない

ここで問題が発生。

モーダルの中で何かを切り替えると、API叩き直して一覧更新するようなUIのとき、
そのデータをpropsで渡していた場合に更新されずハマりました。

vm.$modal.open({
  props: {
    categoryList: this.categoryList,
    itemList: this.itemList
  },
  events: {
    'change-category': categoryId => {
      // categoryIdを元にitemListを更新するような処理
    }
  }
})

中でchangeがemitされると、itemListが更新されるので、モーダルに渡してるitemListも更新されるかと思いきや・・・。
うんともすんとも言いません。

解決

issueに同じようなことが書いてあって、そこの通りなのですが。

const $modal = vm.$modal.open({
  props: {
    categoryList: this.categoryList,
    itemList: this.itemList
  },
  events: {
    'change-category': categoryId => 
      // categoryIdを元にitemListを更新するような処理
      // propsを時前で更新
      $modal.props.itemList = this.itemList
      $modal.$forceUpdate()
    }
  }
})

自前でprops入れて、モーダルのインスタンスを$forceUpdateでいけました。

templateに書いておくのと比べると、programmaticにやると、vm.$elをappendChildなりしてるからですかね・・・。
ちょっとつらい感じですけど、一応これでいけました。。。

Component modal props won't update