How to populate a select list that depends on another select list value while being realtime?

I have been doing the meteor simple todos app and finished it then decided to fiddle around with the thing and see how easy I can do things. It took me one day to figure out how to do the following problem but even after all that I could not figure out how to make it real-time while not loading extra data unnecessarily (meaning publishing everything at once). Anyhow, I had one dropdown (select) for the users and another one that would display the tasks of the selected user (in the first dropdown). I used method calls to fetch the tasks of the selected user however that’s not realtime information because if I insert a new task for the selected user that tasks’ dropdown does not update itself. I will link my repo below so you could see the files. The file that holds the two dropdowns is UserTasksForm.jsx and the one that holds the the second dropdown is UserTasksSelect.jsx. Please if you have a solution to this problem, share with me. In fact, I am new to meteor and the js world in general so if you have any pointers about anything please don’t hesitate to say besides the problem. And finally the repo. It might be worth noting that the fields owner and private in the tutorial has been replace to userId and isPrivate for the tasks schema

Someone help pls. That problem seems like such a routine for web apps. I am surprised I did not receive an answer yet