Couldn't find a way to achieve this Vue function

Issue

i have a list of tasks (each task is inside a div), and i want to create a function so that if a task was clicked its border becomes red and if a different task was clicked the border of the previous one should turn normal and the new one's border should become red, there is a file called task for one task and tasks which implements task and shows all tasks, i've tried different ways and searched about the subject, but it's too difficult to seearch about this exact problem, i always get irrelevant results, if u guys know a source or a better way to get information then it's sufficient, if there's no other way here's the code in my files, thank u all so much (i've deleted styling and comments to make code shorter and easier to read, hope it won't cause issue)

code in task file
  <template>
  <div @dblclick="$emit('togglereminder', task.id)" :class="[task.reminder ? 'reminder' : '', 'task']">
    <h3>{{ task.text }}</h3>
    <p>{{ task.id }}</p>
  </div>
</template>

<script>
export default {
  name: "Task",
  props: {
    task: Object,
  },
};
</script>

code in tasks file:

    <template>
      <div :key="task.id" v-for="task in tasks">
        <Task :task="task" @togglereminder="$emit('togglereminder', task.id)" />
      </div>
    </template>
    <script>

import Task from "./task.vue";
export default {
  name: "Tasks",
  props: {
    tasks: Array,
  },
  components: {
    Task,
  },
  emits: ["togglereminder"],
};
</script>

Solution

You can toggle class with prop and method

Vue.component('Task', {
  template: `
    <div @click="$emit('togglereminder', task.id)" :class="cls === task.id ? 'act' : ''" class="task">
    <h3>{{ task.text }}</h3>
    <p>{{ task.id }}</p>
  </div>
  `,
  props: {
    task: Object,
    cls: Number
  }
})
new Vue({
  el: "#demo",
  data() {
    return {
      tasks: [{id: 1, text: 'aaa'}, {id: 2, text: 'bbb'}],
      sel: null
    }
  },
  methods: {
    selected(e) {
      this.sel = e
    }
  }
  /*props: {
    tasks: Array,
  },
  emits: ["togglereminder"],*/
})

.task {
  border: 2px solid transparent;
  padding: 0 1em;
  cursor: pointer;
}
.act {
  border: 2px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div :key="task.id" v-for="task in tasks">
    <task :task="task" :cls="sel" @togglereminder="selected" />
  </div>
</div>

Answered By - Nikola Pavicevic