Vue.jsのリアクティブなデータの定義でハマったのでメモ

Vueでリアクティブなデータを宣言するときにハマったのでメモします。

Vueでdataを宣言する書き方は

data() {
  return {
    count: 0,
    message: "Hello",
  };
}

と

data: {
  count: 0,
  message: "Hello",
}

の2種類あります。
この違いをわからずになんとなくで使っていたためにハマってしまいました。

結論から書くと
前者の書き方(returnを使う方)が推奨のようです。
後者の書き方ではリアクティブなデータが反映されません。

今回は、リアクティブなデータを使用したいのに後者の書き方をしていたため、
データの値が変化しても反映されず、なんでだ〜〜となってしまいました。

Vue3からはComposition APIを使って、もっと簡単にデータを定義できるので
これで悩むことは無くなるのでしょうか。
ただ、ref()をつけ忘れてハマる未来が見えるので気をつけようと思います。