Vue.jsのfor文内にある子コンポーネントから状態を取得して親コンポーネントを処理する場合、for全件分行わずに処理する方法はないか？

Question

配列に格納されたデータを全件リストで表示しつつ、
そのデータを使ってboolean値が算出。
その結果を親コンポーネントで表示したいです。

親コンポーネントで取得したい条件としては、
デフォルトはfalse ただし、データから算出した結果に1つでもtrueがあればtrueにする
という内容です。
子コンポーネント側でも、自身の結果を表示します。

---

※イメージとしては、
ToDoリストがあり、データのなかに期日がある。
期日が全部未来だったら親コンポーネント的には何もおきないけど、
過去日のものが含まれていたらアラートを表示する
のような感じです。

---

ということで、下記よのうなコードを記載したのですが、
これって、例えばデータが100件あって、1個めでtrueが返ってきても、全件処理してしまうのがとてもムダに感じています。
なにか検知したらとめるような方法はないでしょうか？

※ リクエスト:
できれば、子コンポーネントごとの条件算出は子コンポーネントで行いたいです。

【parent】

<template>
   <p>{{ state }}</p>

   <el-child
     v-for = "item in items"
     :data = data
     @catchChildState = "changeState"
   />
</template>

<script>
export default {  
   data() {
     return {
       states: [],
       state: false,
       data: いくつか情報の入ったオブジェクト
     }
   }
   methods {
      changeState(d) {
         this.states.push(d)
         this.state = this.states.some(val => val == true);
      }
   }
}
</script>

【child】

<template>
   <div>
      データの表示
      {{ state }}
   </div>
</template>


<script>
export default {
   props: ['data'],
   data() {
      return {
         state: false
      }
   },
   mounted() {
　　　 if (dataを使ってなにか条件式) {
         this.state = true;
      } else {
         this.state = false;
      }
      this.$emit('catchChildState', this.state);
   }
}
</script>

Answer 1

ありがとうございます！
む～親でおまとめしなくては。。。ですか。。。（残念。。）

とはいえ、
子コンポーネントで組むと、もっさりしてるな～～と思ったのですが、（実測してないのでほんとか？？ですが。）
親コンポーネントにすることで、少し早くなった気がします。（実測してない。。以下同文。）

親コンポーネントにお願いするように変更して
実際に書いたものに近いもの記載します。
dataのオブジェクトのプロパティをいじるようになっています。

※アラートを出す条件を他にマウントしているコンポーネントによって切り替える　という仕様がそもそもあるので、最初の質問と違うコンポーネントが登場します。

オブジェクトの中身を書き換えるより、単独のプロパティデータの方が処理が速かったりするのだろうか。。。

【parent】

<template>
   <div>
      <change-mode @changeState="updateData" />

      <p>{{ state }}</p>

      <el-child
        v-for = "item in items"
        :data = data
      />
   </div>
</template>

<script>
export default {  
   data() {
     return {
       state: false,
       data: いくつか情報の入ったオブジェクト
     }
   },
   mounted(){
      this.updateData();
   },
   methods {
      updateData(d) {
         let flg = false;
         this.list_items.forEach(el => {
            if(data.hogehogeと、mode設定から渡されたdで条件) {
              this.$set(el, 'state', true)
              flg = true
            } else {
              this.$set(el, 'state', false)
            }
         })
         this.state = flg
      }
   }
}
</script>

【child】

<template>
   <div>
      {{ data.hoge }}
      {{ data.state }}
   </div>
</template>


<script>
export default {
   props: ['data']
}
</script>

Answer 2

「止める」つまりforのbreakやreturnのような処理は困難だと思います。
propsでstatesを送ってtrueが含まれているときは処理しないようにすることは可能です。

ただし、そこまで親と子でデータを行き来させてしまうと複雑で密結合な設計になってしまいます。
ご希望の方法ではないかもしれませんが親で一括処理したデータをコンポーネントに送ったほうがスマートな実装になると思いますので参考程度にコードを載せておきます。（以下は不明な箇所を一部動くように補っています）

<template>
  <div>
    <p>{{ state }}</p>
    <el-child v-for="(item, index) in items" :state="states[index]">
      {{  item  }}
    </el-child>
  </div>
</template>

<script>
export default {  
  data() {
    return {
      items: ['hoge', 'fuga'],
      data: { hoge: 'hoge' }
    }
  },
  computed: {
    states() {
      return this.items.map(el => el === this.data.hoge)
    },
    state() {
      return this.states.includes(true);
    }
  }
}
</script>

<template>
   <div>
      <slot/>
      {{ state }}
   </div>
</template>


<script>
export default {
   props: ['state']
}
</script>