BuefyのCollapseでiconが変わらない時の対処

buefyのcardのようにクリックしたら詳細を表示させる際に少し詰まったので対応のメモです。
https://buefy.org/documentation/collapse#card

buefyのバージョンは 0.8.13 です。

toggleさせた際にアイコンを変更したい

ドキュメントに記載されているように、表示されている時と、表示されていない時でアイコンを変更したかったです。
そのままコピペしてみても、アイコンのみ変わりませんでした。どうやらb-iconが再描画されていないようです。。

対応方法

b-iconが再描画されていないようでしたので、:keyをpropsの値にすることで、toggleの際にkeyを変更させるようにしました！

<b-icon
  :key="props.open"
  :icon="props.open ? 'menu-down' : 'menu-up'"
/>

propsは変更されていた

下記のcodepenの内容のようにpropsを表示させてみると、propsは変更されていました。(vue-devtoolsでみても同様)
https://codepen.io/shubhrajthakur/pen/WygOKM