Question 18: Given the following parent-child component setup: Parent…

1<template>
2  <div>
3    <h2>Selected Tasks</h2>
4    <task-list :tasks="tasks" @task-selected="addToSelection" />
5    <p>Total Selected: {{ selectedTasks.length }}</p>
6    <ul>
7      <li v-for="task in selectedTasks" :key="task.id">{{ task.name }}</li>
8    </ul>
9  </div>
10</template>
11
12<script>
13import TaskList from './TaskList.vue';
14
15export default {
16  components: { TaskList },
17  data() {
18    return {
19      tasks: [
20        { id: 1, name: 'Design UI' },
21        { id: 2, name: 'Write Backend' },
22        { id: 3, name: 'Write Tests' }
23      ],
24      selectedTasks: []
25    };
26
27  },
28  methods: {
29    addToSelection(task) {
30      const exists = this.selectedTasks.some(t => t.id === task.id);
31      if (!exists) {
32        this.selectedTasks.push(task);
33      }
34    }
35  }
36};
37</script>

1<template>
2  <div>
3    <h3>All Tasks</h3>
4    <ul>
5      <li v-for="task in tasks" :key="task.id">
6        {{ task.name }}
7        <button @click="select(task)">Select</button>
8      </li>
9    </ul>
10  </div>
11</template>
12
13<script>
14export default {
15  props: ['tasks'],
16  methods: {
17    select(task) {
18      this.$emit('task-selected', task);
19    }
20  }
21};
22</script>