How to combine two values from child components with an event?

I can't assign data from child component.

I am simply trying to implement emitting a specific value with an event

Child component is:

<template>

    <StackLayout orientation="vertical" width="210" height="210"
        backgroundColor="blue" color="white">
        <Label text="Father" row="0" col="1"
            class="h2 text-center p-t-5 text-primary" />
        <ListPicker :items="maleName" v-model="maleIndex" row="1" col="1"
            @selectedIndexChange="selectedIndexofFatherChanged" />
    </StackLayout>
</template>

<script>
    export default {
        data() {
            return {
                maleName: [
                    "Rey",
                    "Antonia",
                    "Victor",
                    "Lincoln",
             
                ],
                maleIndex: 0
            };
        },
        methods: {
            selectedIndexofFatherChanged() {
                this.$emit("fatherChanged", this.fatherName);
                // console.log("changed to: " + this.fatherName);
            }
        },
        computed: {
            fatherName() {
                return this.maleName[this.maleIndex];
            }
        }
    };
</script>

and Parent Component is:

<template>
    <Page>
        <ActionBar title="Choose Parent" />
        <GridLayout columns="*, *" rows="*,90">
            <SelectMother col="0" @motherChanged="onMotherChanged">
            </SelectMother>
            <SelectFather col="1" @fatherChanged="onFatherChanged">
            </SelectFather>
            <Button text="Show Result" @tap="onButtonTap" row="2"
                colSpan="2" />
        </GridLayout>
    </Page>
</template>

<script>
    import SelectMother from "./SelectMother";
    import SelectFather from "./SelectFather";

    export default {
        components: {
            SelectMother,
            SelectFather
        },
        data() {
            return {
                motherName: null,
                fatherName: null
            };
        },
        methods: {
            onButtonTap() {
                alert("father: " + this.fatherName + " mother: " + this
                    .motherName);
            },
        },
        watch: {
            onFatherChanged(nameFromComponent) {
                nameFromComponent = this.fatherName;
            },
            onMotherChanged(nameFromComponent) {
                nameFromComponent
                    = this.motherName;
            }
        },
    };
</script>

When I console log payload in onFatherChanged method it turns null

How to combine father and mother and show results.

1. Select Father from child component
2. Select Mother from second child component
3. Assign incoming payload and Show Results

Please check {N} Playground

https://play.nativescript.org/?template=play-vue&id=Dez2fV&v=26

Instead of

onFatherChanged(payload) {
                payload = this.fatherName;
                console.log(payload);
            },

It should be;

onFatherChanged(payload) {
                this.fatherName = payload;
                console.log(payload);
            },