Angular hot observables with RxJS: Changes on array are not emitted to subscribers

I have a small task board like trello with tasks to be done, doing and done. All the tasks are stored on 3 separate arrays in one service called TaskService. To show the task and change task state I have implemented angular’s cdk drag n drop.

My goal now is to subscribe to the the task arrays so when the array changes send the changes to an api. For now I’m just trying to console.log the events but I’m not understanding what’s happening it seemly to work but I can’t get the arrays updates.

This is my component controller:

doing: any[];

  constructor(private taskService: TaskService) {}

  ngOnInit(): void {
    this.getTodoTasks();
    // this.getDoingTasks();
    this.getDoneTasks();

    const obs$ = this.taskService.getDoing();

    obs$.subscribe({
      next: (data: any[]) => {
        this.doing = data;
        console.log(data);
      },
    });
  }

  todo: any[];
  // doing: Subscriber<any[]>;
  done: any[];
  newTaskText: string = '';

  isModalShown: boolean = false;

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer == event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }

  newTask() {
    console.log(`Click Modal!`);
    this.isModalShown
      ? (this.isModalShown = false)
      : (this.isModalShown = true);
  }

  getTodoTasks() {
    this.taskService.getTodos().subscribe((data) => {
      this.todo = data;
      console.log(`Se ha añadido Tak a : Todo`);
    });
  }

This is my view:

<app-modal *ngIf="isModalShown" (close)="newTask()">
  <div class="modalContent">
    <textarea
      name=""
      id=""
      cols="30"
      rows="10"
      class="newTask"
      [(ngModel)]="newTaskText"
    ></textarea>
    <div class="modalButtons">
      <input
        type="button"
        value="Cancel"
        class="btn btn-secondary"
        (click)="cancelTask()"
      />
      <input type="button" value="Save" class="btn btn-primary" (click)="saveTask()" />
    </div>
  </div>
</app-modal>

<div class="container">
  <div class="list">
    <h2>TO DO</h2>
    <input type="button" value="Modal" (click)="newTask()" />
    <div
      class="tasks"
      cdkDropList
      #todoList="cdkDropList"
      [cdkDropListData]="todo"
      [cdkDropListConnectedTo]="[doingList, doneList]"
      (cdkDropListDropped)="drop($event)"
    >
      <div class="task" *ngFor="let item of todo" cdkDrag>{{ item }}</div>
    </div>
  </div>
  <div
    class="list"
    cdkDropList
    #doingList="cdkDropList"
    [cdkDropListData]="doing"
    [cdkDropListConnectedTo]="[doneList, todoList]"
    (cdkDropListDropped)="drop($event)"
  >
    <h2>DOING</h2>
    <div class="tasks">
      <div class="task" *ngFor="let item of doing" cdkDrag>{{ item }}</div>
    </div>
  </div>
  <div
    class="list"
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="[doingList, todoList]"
    (cdkDropListDropped)="drop($event)"
  >
    <h2>DONE</h2>
    <div class="tasks">
      <div class="task" *ngFor="let item of done" cdkDrag>{{ item }}</div>
    </div>
  </div>
</div>

And my service:

constructor() {}

  todo = ['task 1', 'task 2', 'task 3'];
  doing = [];
  done = [];

  getTodos(): Observable<any[]> {
    return of(this.todo);
  }

  getDoing(): Observable<any[]> {
    return new Observable((subscriber) => {
      subscriber.next();
    })
  }

  getDone(): Observable<any[]> {
    return of(this.done);
  }