How to send a primary key as a foreign key to another table while submitting the form in Laravel vue?

I have these 2 tables:

Table one(parties):

public function up()
{
    Schema::create('parties', function (Blueprint $table) {
        $table->id();
        $table->string('full_name');
        $table->string('ic_passport');
        $table->string('nationality');
        $table->string('income_tax_no');
        $table->string('income_Tax_filing_branch');
        $table->string('phone_no');
        $table->string('email');
        $table->timestamps();
    });
}

Table two(corraddresses):

public function up()
{
    Schema::create('corraddresses', function (Blueprint $table) {
        $table->id();
        $table->unsignedBigInteger('party_id');
        $table->foreign('party_id')->references('id')->on('parties');
        $table->string('address_1');
        $table->string('address_2');
        $table->string('city');
        $table->string('poscode');
        $table->timestamps();
    });
}

Model one(Party):

class Party extends Model
{
use HasFactory;
protected $fillable = ['full_name','ic_passport','nationality','income_tax_no',
'income_Tax_filing_branch','phone_no','email'];
}

Model two(Corraddress):

class Corraddress extends Model
{
use HasFactory;
protected $fillable = ['address_1','address_2','city','poscode','party_id'];

public function partyId()
{
    return $this->belongsTo(Party::class, 'party_id', 'id');
}
}

Controller one(PartyController – store function):

public function store(Request $request)
{
    $party = Party::create($request->post());
    return response()->json([
        'message'=>'Party Created Successfully!!',
        'party'=>$party
    ]);
}

Controller two(CorraddressController – store function):

public function store(Request $request)
{
    $corraddress = Corraddress::create($request->post());
    return response()->json([
        'message'=>'Corraddress Created Successfully!!',
        'corraddress'=>$corraddress
    ]);
}

The view below is submitting all data from one form:

Form view – Script:

data() {
return {
full_name: '',
ic_passport: '',
nationality: '',
income_tax_no: '',
income_Tax_filing_branch: '',
phone_no: '',
email: '',

address_1: '',
address_2: '',
city: '',
poscode: '',
party_id: '',
};
},
methods: {
addNewPost(){
            axios.post('/api/auth/party',{
                full_name: this.full_name,
                ic_passport: this.ic_passport,
                nationality: this.nationality,
                income_tax_no: this.income_tax_no,
                income_Tax_filing_branch: this.income_Tax_filing_branch,
                phone_no: this.phone_no,
                email: this.email,
            })
            axios.post('/api/auth/corraddress',{
                address_1: this.address_1,
                address_2: this.address_2,
                city: this.city,
                poscode: this.poscode,
                party_id: response.party.id,
                // party_id: this.party_id,
            })
},
},

when i submit the above the data will be stored in "parties" table only

but when i try to "un-comment" this-> // party_id: this.party_id, and submit i get this meesage:

message "SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'party_id' cannot be null (SQL: insert into `corraddresses` (`address_1`, `address_2`, `city`, `poscode`, `party_id`, `updated_at`, `created_at`) values (awgawg, awgawg, gawg, awgaw, ?, 2022-11-08 04:31:58, 2022-11-08 04:31:58))"

what i am trying to do is when i submit the form i want the primary key of the record in "parties" to be saved as a foreign key in "corraddresses" tables under "party_id" column i have been stuck in this issue for a few days now, i can’t find answer for it so far..

am i doing anything wrong? is there a problem with my migrations or models or is there anything missing from controllers or the view?

Note: when i try to submit the form without any relationship between the two tables both records will be saved in "parties" table and "corraddresses" table