laravel belong to many not working -- "1048 Column 'purchase_id' cannot be null"

Question

I am trying to store multiple purchaseCategory using Laravel and Vue, but after clicking submit I am getting this error. How do I solve it?

1048 Column 'purchase_id' cannot be null

In my Vue file I am getting the purchaseCategory like this:

<select multiple v-model="purchaseCategory">
  <option
    v-for="purchaseType in purchaseTypes"
    :key="purchaseType.id"
    :value="purchaseType.id"
  >
    {{ purchaseType.purchaseType }}
  </option>
</select>

I have also created a table to join purchases and purchase_types:

Schema::create('purchase_type_purchase', function (Blueprint $table) {
    $table->unsignedBigInteger('purchase_type_id');
    $table->unsignedBigInteger('purchase_id');
    $table->primary(['purchase_type_id', 'purchase_id']);
    $table->foreign('purchase_type_id')->references('id')->on('purchase_types')->onUpdate('cascade')->onDelete('cascade');
    $table->foreign('purchase_id')->references('id')->on('purchases')->onUpdate('cascade')->onDelete('cascade');
});

In my purchase.php model I have:

use HasFactory;

protected $guarded = [];

public function purchase_types()
{
    return $this->belongsToMany(PurchaseType::class,'purchase_type_purchase', 'purchase_id', 'purchase_type_id');
}

In my PurchaseType.php model I have:

class PurchaseType extends Model
{
    protected $guarded = [];
    
    public function purchases()
    {
        return $this->belongsToMany(purchase::class);
    }
}

In my controller I am storing the data like this:

$data = new purchase;

foreach ($req->purchaseCategory as $value) {
    $data->purchase_types()->attach($value);
}