What causes the validation error in this Laravel 8 and a Vue 3 application?

I am working on a registration form consisting of a Laravel 8 API and a Vue 3 front-end.

I have this piece of code in the AuthController to register a new user:

class AuthController extends Controller {
    
    public function countries()
    {
        return Country::all('id', 'name', 'code');
    }
    
    public function register(Request $request) {

        $rules = [
            'first_name' => 'required|string',
            'last_name' => 'required|string',
            'email' => 'required|email|unique:users,email',
            'password' => 'required|string|confirmed',
            'country' => 'required|string',
            'accept' => 'accepted',
        ];

        $customMessages = [
            'first_name.required' => 'First name is required.',
            'last_name.required' => 'Last name is required.',
            'email.required' => 'A valid email is required.',
            'email.email' => 'The email address you provided is not valid.',
            'password.required' => 'A password is required.',
            'password.confirmed' => 'The passwords do NOT match.',
            'country.required' => 'Please choose a country.',
            'accept.accepted' => 'You must accept the terms and conditions.'
        ];

        $fields = $request->validate($rules, $customMessages);
    
        $user = User::create([
            'first_name' => $fields['first_name'],
            'last_name' => $fields['last_name'],
            'email' => $fields['email'],
            'password' => bcrypt($fields['password']),
            'country' => $fields['country']
        ]);

        $token = $user->createToken('secret-token')->plainTextToken;

        $response = [
            'countries' => $this->countries(),
            'user' => $user,
            'token' => $token
        ];

        return response($response, 201);
    }
}

On the front-end, I have:

const registrationForm = {
  data() {
    return {
      apiUrl: 'http://myapp.test/api',
      formSubmitted: false,
      countries: [],
      fields: {
        first_name: '',
        last_name: '',
        email: '',
        password: '',
        country: '',
      },
      errors: {},
    };
  },
  methods: {
    // get Countries
    async getCountries(){
      try {
        const response = await axios
          .get(`${this.apiUrl}/register`)
          .catch((error) => {
            console.log(error.response.data);
          });

        // Populate countries array
        this.countries = response.data.countries;

      } catch (error) {
        console.log(error);
      }
    },

    registerUser(){
      // Do Registrarion
      axios.post(`${this.apiUrl}/register`, this.fields).then(() =>{
        // Show success message
        this.formSubmitted = true;

        // Clear the fields
        this.fields = {}

      }).catch((error) =>{
        if (error.response.status == 422) {
          this.errors = error.response.data.errors;
        }
      });
    }
  },
  async created() {
    await this.getCountries();
  }
};

Vue.createApp(registrationForm).mount("#myForm");

In the Vue template:

<form id="myForm">
    <div v-if="formSubmitted" class="alert alert-success alert-dismissible">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      Your account was created :)
    </div>

    <div class="form-group" :class="{ 'has-error': errors.first_name }">
    <input type="text" class="form-control" placeholder="First name" v-model="fields.first_name">
    <span v-if="errors.first_name" class="error-message">{{ errors.first_name[0] }}</span>
  </div>

  <div class="form-group" :class="{ 'has-error': errors.last_name }">
    <input type="text" class="form-control" placeholder="Last name" v-model="fields.last_name">
    <span v-if="errors.last_name" class="error-message">{{ errors.last_name[0] }}</span>
  </div>

  <div class="form-group" :class="{ 'has-error': errors.email }">
    <input type="email" class="form-control" placeholder="Enter email" v-model="fields.email">
    <span v-if="errors.email" class="error-message">{{ errors.email[0] }}</span>
  </div>

  <div class="form-group" :class="{ 'has-error': errors.password }">
    <input type="password" class="form-control" placeholder="Enter password" v-model="fields.password">
    <span v-if="errors.password" class="error-message">{{ errors.password[0] }}</span>
  </div>

  <div class="form-group" :class="{ 'has-error': errors.password_confirmation }">
    <input type="password" class="form-control" placeholder="Confirm password" v-model="fields.password_confirmation">
    <span v-if="errors.password_confirmation" class="error-message">{{ errors.password_confirmation[0] }}</span>
  </div>

  <div class="form-group">
    <select class="form-control" v-model="fields.country">
       <option value="0">Select your country</option>
       <option v-for="country in countries" :value="country.id">{{ country.name }}</option>
    </select>
  </div>

  <div class="form-group accept pl-1" :class="{ 'has-error': errors.accept }">
    <input type="checkbox" name="accept" v-model="fields.accept">
    <p>I accept <a href="#" class="text-link">The Terms and Conditions</a></p>
    <span v-if="errors && errors.accept" class="error-message">{{ errors.accept[0] }}</span>
  </div>

  <div class="form-group mb-0">
    <button @click.prevent="registerUser" type="submit" class="btn btn-sm btn-success btn-block">Register</button>
  </div>
</form>

The problem

For a reason I was unable to figure out, the app throws this error in the browser:

The given data was invalid.

Question

What am I doing wrong?

The issue I see is that you are sending the country.id (that is correct), but you are asking for a string on your validation (that is not correct), the validation for country should be:

'country' => 'required|exists:countries,id',

exists documentation.

And remember to then check if you want to store the country as a string field in your database (User model) or it should be a relationship.