##動機

下記のようにコンポーネントを切り替えている場合に、同一コンポーネントに遷移してtransitionアニメーションを発生させたい。

Main.vue

<transition>
  <component :is="currentComponent"></component>
</transition>

例えば、商品詳細画面で商品Aから商品Bに切り替える場合。
例えば、ページの下の方から上の方に戻るだけなんだけど、アニメーションを発生させないといけない場合。

コンポーネントにkey()を実装してみてもkey()はリアクティブでないので、値を変更しても反応しなくて困っている。

Component.vue

export default {
  key() {
    // 商品IDなど、一意な値を返す
  }
}

##解決方法

<component>に:keyを設定する。

###パターン1: 商品詳細画面で商品Aから商品Bに切り替える場合

Main.vue

<transition>
  <component :is="currentComponent" :key="currentKey"></component>
</transition>

Main.vue

export default {
  computed: {
    currentKey() {
      // 商品IDなど、一意な値を返す
    }
  }
}

###パターン2: ページの下の方から上の方に戻るだけなんだけど、アニメーションを発生させないといけない場合

前提として、<component>には複数の異なるコンポーネントが入る。
そのうちの一つに関して、タイトルに示した要求がある。

Main.vue

<transition>
  <component :is="currentComponent" :key="currentKey"></component>
</transition>

Main.vue

export default {
  computed: {
    ...mapState(['currentKey'])
  }
}

Component.vue

export default {
  methods: {
    ...mapMutations(['incrementCurrentKey']),
    moveToTop() {
      this.incrementCurrentKey();
      // ここにトップに戻るアニメーションを実装
    }
  }
}

currentKeyをstoreに突っ込んで、上に戻るボタンを押されたときに更新してやればよい。

ポイントとして、incrementCurrentKeyの呼び出しは上に戻るボタンを押したときだけでよい。
<component>に:keyを設定すると異なるコンポーネントに切り替えたときもincrementCurrentKeyの呼び出しが必要な気がしてしまうが、何とそのようなことはない。