Customer.php

<?php

namespace App\Services;

use App\Mail\WelcomeNewCustomer;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Mail;

class Customer
{
    /**
     * Create customer and send email.
     * @param  array  $data
     * 
     * @return void
     */
    public function store(array $data)
    {
        DB::table('customers')->insert($data);
        Mail::to($data['email'])->send(new WelcomeNewCustomer($data));
    }

}

CustomerController.php

<?php

namespace App\Http\Controllers;

use App\Services\Customer;
use Illuminate\Http\Request;

class CustomerController extends Controller
{
    public function store(CustomerRequest $request)
    {
        Customer::store($data);
        return ['saved' => true];
    }
}

CustomerTest.php

<?php

namespace Tests\Feature;

use App\Mail\WelcomeNewCustomer;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Foundation\Testing\WithFaker;
use Illuminate\Support\Facades\Mail;
use Tests\TestCase;

class CustomerTest extends TestCase
{
    /**
     * customer create validation
     */
    public function testMustEnterNameAndEmail()
    {
        $this->json('POST', 'api/customer')
            ->assertStatus(422)
            ->assertJson([
                "message" => "The given data was invalid.",
                "errors" => [                 
                    'name' => ["The name field is required."],
                    'email' => ["The email field is required."],
                ]
            ]);
    }
    /**
     * send welcome email to customer
     */
    public function testSendWelcomeEmail()
    {
       $data =  [
            'name' => 'Maulik Shah',
            'email' => '[email protected]'
       ];
        Mail::fake();
        Mail::send(new WelcomeNewCustomer($data));
        Mail::assertSent(WelcomeNewCustomer::class);

        Mail::assertSent(WelcomeNewCustomer::class, function ($mail) {
            $mail->build(); 
            return true;
        });
    }

    /**
     * A basic feature test example.
     *
     * @return void
     */
    public function testCustomerCreatedSuccessfully()
    {
        $this->postJson('/api/customer',[
                'name' => 'Maulik Shah',
                'email' => '[email protected]'
            ])->assertStatus(200)
            ->assertJson([
                'saved' => true,
            ]);
    }
}

VueJS.js

<template>
  <div class="widget" id="app">
    <div v-if="activeItems && activeItems.length > 0">
      <ul>
        <li v-for="item in activeItems" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      loading: true,
      list: {
        John: true,
        Jane: true,
        Bob: false,
      },
    };
  },
  computed: {
    activeItems() {
      return Object.entries(this.list)
        .filter(function (value) {
          return value[1];
        })
        .map(function (value) {
          return {
            name: value[0],
            active: true,
          };
        })
        .flat(1);
    },
  },
};
</script>