Vue.js で、Vue インスタンスの内部のデータはリアクティブになっているので、データを更新すればUIの表示は自動的に更新されます。ちょっと特殊なケースになるのですが、Vue インスタンスの外で定義したグローバル変数をビューにバインドして表示したいようなケースに遭遇しました。具体的にはあるWebツールのVueインスタンスを他のツールで使い回したいけど、元のVueインスタンスには手を入れたくないようなケースで、Vueインスタンスの外側に追加データを用意したようなケースです。
Vue インスタンスの外なのでリアクティブになっておらず、そのグローバル変数を書き換えてもビュー上の表示は更新されません。こういったケースで強制的に更新する事ができないのか調べてみたところ、ちゃんと方法が用意されていました。
https://jp.vuejs.org/v2/guide/components-edge-cases.html#%E5%BC%B7%E5%88%B6%E6%9B%B4%E6%96%B0
Vue インスタンスに $forceUpdate() という関数があり、これを呼ぶことで強制的にビューの表示を更新することができました。ただし、このページにも「もし Vue で強制更新をする必要な場面に遭遇する場合、99.99% のケースであなたは何かを間違えています。」と注意書きがあるように、やむを得ない稀な事情がない限りは使わない方が良いようです。
以下に簡単なサンプルを用意しておきます。valueがVueインスタンス内部、globaValueが外側で定義された変数です。globaValueを変更してもビュー上は変化がないこと、強制更新をすることでビューが更新されることを確認できます。
value={{value}}, globalValue={{globalValue}}
以下がサンプルのソースです。コピペでそのまま動作すると思います。
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
<p>
value={{value}}, globalValue={{globalValue}}
</p>
<input type="button" value="value++" @click="value++" />
<input type="button" value="globalValue++" @click="globalValue++" />
<input type="button" value="globalValue++ & 強制更新" @click="globalValue++;vm.$forceUpdate();" />
</div>
<script>
// 何らかの事情で外で値を定義する必要があった場合
let globalValue = 2;
let vm = new Vue({
el: "#app",
data: {
value: 1,
},
});
</script>
