ページ翻訳使用時 DOMが更新されにゃあああい

こんにちは、六坂です。
今回はブラウザのページ丸ごと翻訳してくれる機能を使用したときDOMが更新されない現象の解決策をのこします

理想

textが変更されたとき
変更点にあった翻訳を出力させたい

現実

bikuともしません
なんで？

実装

<template>
  <div>
    <p>{{ text }}</p>
    <input type="text" v-model="text" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: 'こんにちは'
    }
  }
}
</script>

もちろんページ翻訳を使ってないときは更新されます

解決しました

<p :key="text">{{ text }}</p>

keyを指定してあげるだけです。

以上。それだけ

vueだけの話じゃなそうですね
仮想DOM全般で起こりそう