vueで、同じ値を参照してしまう

Trello風アプリを作成中です。
主なコンポーネントの詳細は下記になります。
App.vue（親コンポーネント）・・・主にList.vueを表示させるだけのもの。
List.vue(親コンポーネント）・・・card.vue,inputComponent.vueを内包したもの。配列や入力するtodoの値などを保持している。
card.vue(子コンポーネント）・・・List.vueからpropsで値が渡ってきて、todoと削除ボタンを表示させるもの。
inputComponent.vue(子コンポーネント）・・・todoを追加するためのもの。List.vueから入力するtodoの値がpropsで渡ってきて、その値をemitでList.vueに渡している。

List.vue側で、card.vueとinputcomponent.vueを内包している状態です。
card.vueとinputcomponent.vueを内包したList.vue単体で表示しているときは、うまくTODOの作成、削除ができました。

ですが、List.vueをApp.vueに２個表示させた時に、同じ配列の値を参照しているのでlocalstorageにはList.vue１つ分のコンポーネントの値しか保存されませんでした。
例えばList.vueを4つ表示したい場合、どのような設計が望ましいのでしょうか。。なかなか思いつかず、苦戦中です。。
ご教示のほど、よろしくお願い致します。

各コンポーネントは下記になります。

App.vueコンポーネント

<template>
  <div id="app">
    <div class="container">
      <List />
      <List />
    </div>
  </div>
</template>

<script>
import List from './components/List';
export default {
  data() {
    return {};
  },
  components: {
    List,
  },
  methods: {},
};
</script>

List.vueコンポーネント

<template>
  <div>
    <h1>Listコンポーネント</h1>
    <draggable :options="{ group: 'todos' }">
      <card
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @clicked-remove-todo="removetodo(todo)"
      />
    </draggable>
    <input-component
      @clicked-add-todo="addtodo"
      :value="value"
      @input="value = $event"
    />
  </div>
</template>

<script>
import card from './card';
import inputComponent from './inputComponent';
import draggable from 'vuedraggable';

export default {
  data() {
    return {
      value: '',
      uid: 0,
      todos: [],
    };
  },
  mounted() {
    if (localStorage.getItem('todos')) {
      try {
        this.todos = JSON.parse(localStorage.getItem('todos'));
      } catch (e) {
        localStorage.removeItem('todos');
      }
    }
  },
  components: {
    card,
    inputComponent,
    draggable,
  },
  methods: {
    addtodo() {
      if (this.value == '') {
        return;
      }
      console.log('子コンポーネントのイベントをキャッチしました。');
      const params = {
        title: this.value,
        id: this.uid++,
      };
      this.todos.push(params);
      this.value = '';
      this.savetodos();
    },
    removetodo(todo) {
      this.todos.splice(this.todos.indexOf(todo), 1);
      this.savetodos();
    },
    savetodos() {
      //this.todos の値を保存
      const parsed = JSON.stringify(this.todos);
      localStorage.setItem('todos', parsed);
    },
  },
};
</script>

<style></style>

cardコンポーネント

<template>
  <div>
    <h2>カードコンポーネント</h2>
    {{ todo.title }}
    {{ todo }}
    {{ todo.id }}
    <button @click="removetodo">削除</button>
  </div>
</template>

<script>
export default {
  props: ['todo'],
  methods: {
    removetodo(todo) {
      this.$emit('clicked-remove-todo', todo);
    },
  },
};
</script>

<style></style>

inputコンポーネント

<template>
  <div>
    <h2>inputコンポーネント</h2>
    <input
      type="text"
      @keyup.enter="addtodo"
      :value="value"
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {};
  },
  methods: {
    addtodo() {
      // 親コンポーネントであるList.vueにemitでイベントを発火させる。
      this.$emit('clicked-add-todo');
    },
  },
};
</script>

<style></style>