VUE 自身が状態を持つコンポーネント？クラス？要素の作成

Question

現在、VUEでアプリケーションを作成していてその一部で実装方法の指針に困っていることがあります。

{
名前：,
HP減少フラグ：,
HP：,
}
がワンセットの塊があります。

HP減少フラグがTRUEの塊は、毎秒 HPが減っていきます。

この塊はユーザーが増やします。

全塊の合計HPや全体で減ったHPの合計など　１階層上の概念でデータを取りまとめる必要があります（VUEのdataで取りまとめる想定です）。

塊の実装方法・方針がわかりません！！

思いついたのは

1.塊をclassで用意してユーザーが塊を増やすたびにインスタンス化してVUEのdataに配列で入れていく
→クラスの中で状態管理はできるのか、フラグがオンの時に自身のHPを減らし続けると言うことが可能なのか

2.ビューコンポーネントとやらで塊を用意する。
→これなら状態管理をそれぞれの塊ができそう！？ただユーザーが増やすときにインスタンスかみたいなのはどうやるんだろう...

調べ途中甚だしいのですが、調べるにも方向性や指針が欲しく...
上記のような仕様を実装するのにキーとなる概念やワード、技術、私ならこうする　がございましたら単語ベースでも構いません！
そこから深堀、調査をしたいと思っております。
何卒よろしくお願いいたします。

Answer 1

それこそがコンポーネントの使い方ではないかと思います。

複数のコンポーネントを配列に入れて管理する方法がマニュアルに書いてあります。

リストレンダリング
https://jp.vuejs.org/v2/guide/list.html

Comments

[Yusuke_m25]

TODOのサンプルが非常に助けになりました。かなり先が見えた気がします。本当にありがとうございます！！！