Updating Input Array

You can either not create a copy of the array itself because that changes the reference to the old array and hence any operations on the new array would have no result on the old / passed array.

Or

If you want to limit the operations in the child component and want to send the data only after click of a button, like say 'Save' button, then you may use @Output property to send the array in your child component to the parent component. The @Output works just like emitting events.

why you don't just use services for this

1- create new service and add it in app.module.ts

2- in service file add your array and add a method that when it fire update the array by push new value to it.

3- you can access to this service in both components whether retrieve the array or push new value to it

4- both components will get the same instance of the service which is the same array

The problem: You are mutating an array in the child component and the grids aren't getting notified of the changes, the grid seems to be checking ONLY for reference changes. (Check this answer for a similar problem)

You have two options

Option 1 - Use a EventEmitter to notify parent of changes

Emit an event when the data changes.

@Output()
onDataChanged: EventEmitter<any> = new EventEmitter();

moveToTarget() {
    this.targetList.push(this.sourceList.splice(0, 1)[0]);
    console.log('this.targetList');
    console.log(this.targetList);
    console.log('this.sourceList');
    console.log(this.sourceList);
    this.onDataChanged.emit();   // <---
}

Then in the parent component, refresh the array upon receiving the event

<app-picklist [sourceList]="sourceFunction" [targetList]="targetFunction" 
(onDataChanged)="refresh()"></app-picklist>

public refresh() {
    this.sourceFunction = [...this.sourceFunction];
    this.targetFunction = [...this.targetFunction];
}

Stackblitz

Option 2 - Create a shared data service and make use of Observable/BehaviorSubject.