Vueで親コンポーネントの変数と子コンポーネントを同期できた話

注意

コード、設計、やりたいことすべでがド素人オレオレ実装です。なんで問題が解決したのかもわかっていません。より良い方法があれば教えてください。なんでうまくいったか分かる人も教えてください

やりたかったこと

上記のようにコンポーネントを配置して子コンポーネントAにボタンがありそれを押すと親コンポーネントのadd()が実行される、add()では親コンポーネントにある変数が増える。このとき親コンポーネントの変数は変わるけど子コンポーネントBにpropsを使って渡してる変数が変わらない。という状況になっていた。

解決？策

子コンポーネントBのpropsの書き方を変えると動く

//Before
props : {
    "value"
}

この書き方よく見るよね。でもこれを下のようにするとなぜか動く

//After
props : [
    "value"
]

最後に

ほんとになんで動いてるかわかりません。公式ドキュメントをすべて読んだわけでも、Vueに詳しいわけでもないので(なんならさわったのはじめて)理由をご存じの方はおしえてください