How to display an additional list in Vue.js when a certain item of an existing list in another component is clicked?

Question

Vue.js

I want to display a list of tasks created by the user when clicking on a menu item created using v-for inside another cyclic list of groups, the list of tasks is displayed in another component. Items in all lists are added by the user. I tried to double nest arrays using the current iteration keys, it seems that the values ​​​​are saved but crookedly, they are displayed only after clicking on another group and when you click on the corresponding menu item again, they are not displayed in the right component. Everything is too cumbersome, stupor. Can structurally change something? How can it be easier to make the list of added tasks tied to a specific menu item and displayed every time you click on it?
Here is the simplified code: https://jsfiddle.net/rokerok_22/vnvvpg9a/1/

Answer 1

Everything is too cumbersome, stupor.

Do you know why? Reason number one - goat names of variables, object properties, etc. For example, if your groups contain projects, then you would name the corresponding property projects, and not arr. Projects contain tasks - well, let's call their list tasks, not arr. And so you have two different arr - and you can’t tell about one right away what it is. Enough to be confused.
Selected group/project - instead of indexes, it is better to store a link to the object itself, in the case of a project, pass it to the component - this way a list of existing tasks will be available and your problem with their output will be solved by itself.
When adding new tasks, you overwrite their list - why?
Tweaked your code a bit, like this . Sounds like what you were aiming for?