了解です！

では続けて コラム: よくある落とし穴とその回避策「子コンポーネントの再利用性を損なう書き方」 を書きます。

📌 コラム: よくある落とし穴とその回避策

■ 「子コンポーネントの再利用性を損なう書き方」問題とは？

props と emit を正しく使っているつもりでも、

親のロジックに子が依存しすぎる設計 になってしまい、

その結果 「この子コンポーネント、他で使い回せないじゃん…」 となることがあります。

🟥 【よくある落とし穴】（NGパターン）

<!-- ChildComponent.vue -->
<template>
  <button @click="store.commit('counter/increment')">Increment</button> <!-- ❌ -->
  <p>{{ store.state.counter.count }}</p>                                  <!-- ❌ -->
</template>

<script lang="ts" setup>
import { useStore } from 'vuex';
import { State } from '@/store';

const store = useStore<State>();
</script>

❌ この設計だと…

• 子コンポーネントが counter モジュールに強く依存 している
• 他の親コンポーネントで流用できない（必ず Vuex が必要）
• テストがしづらい（storeがないと動かない）

🟠 【なぜこうなってしまう？】

🟢 【正しい書き方（再利用性を守る）】