[SalesForce] How to handle a record save event in salesforce lightning

You are hitting a timing issue with init that is by design - you should not use component.getElement() in init because elements are not reliably available in init handlers - you'll want to look into using a custom renderer afterRender method which gets called at a point where you are guaranteed to have actual DOM elements available and was designed for exactly this ind of scenario.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_renderers.htm

You can fire an application event from the Modal component(which you are doing now), which carries necessary data and a unique indentifier(might me workitem id) to identify a specific child component.

Also, passing the workitem object from the workItem Component would also work too but you have access it incorrectly in the modal component.

So do the following changes:

taskModalController.js

1.Access the workitem using event.getParam():

showTaskModal : function(component, event, helper) {

    var taskModal = component.find('task-modal');
    $A.util.removeClass(taskModal, "hide")
    var workItem = event.getParam('work'); // Now you'll get the workitem object
    console.log('event.getParam(work??)', workItem);
    component.set('v.work', workItem);
}

2.Add the workItem object/id to the AA_updateTaskEvent app event along with taskName.

saveTask: function(component, event, helper){
    var taskInput = component.find('task-input');
    var taskName = taskInput.get("v.value");
    var updateEvent = $A.get("e.c:AA_updateTaskEvent");

    updateEvent.setParams(
        {
            'taskName': taskName,
            'workItemId':component.get("v.work").Id
        }

    );

    updateEvent.fire();
    // other logics
},

3.Check if you need to add the task in workItem child.

workItemController.js

updateTask: function(component, event, helper){

    console.log('fired update task in work item-------------------');
    var taskName = event.getParam("taskName"); // Get the task name
    var workItemId = event.getParam("workItemId"); // Get the workitemid 
    var workItem = component.get("v.work");

    //if it turns out true, then we have got to the workitem component whose's task should be updated.
    if(workItem.Id == workItemId){
        var newTask = {agf__Subject__c: taskName};

        var workTasks = component.get("v.tasks");
        console.log("the work item-----", workTasks)

        workTasks.push(newTask);
        component.set("v.tasks", workTasks);
    }

    //all work items get pushed my new task since workItem.cmp
    //has a listener
}

To answer your other questions.

1) I have already answer it above.

2) In my opinion its better to keep the modal in the root rather than in the workItem which causes unnecessary DOM to be present. Honestly, I don't see anything complicate here.

3) Application events are best suited in places where components that aren't part of containment hierarchy need to communicate. Your discussion to keep the modal standalone(common to your app/component) and communicating with app event is a perfect example.