handle remote field (select2-like) vuejs → laravel

Hi, everybody!

Let's say, for example, that in Vue, given this user object, the role property comes from a select2 ajax which retrieves data from the roles table.

const user = reactive({
  username: "John Doe",
  email: "[email protected]",
  role: {
    id: 1,
    text: "Admin"
  }
})

According to some sort of best practices, we should not send the entire property role, but let laravel handle only role_id property to simplify / make more readable the validation on the backend (e.g. through a spatie/laravel-data DTO). Let's refactor this way...

const user = reactive({
  username: "John Doe",
  email: "[email protected]",
  role_id: 1
})

But... what if the role in Vue is selected through a "tag component"? ... so, we haven't an ID yet, but only a text label to send to Laravel backend.

const user = reactive({
  username: "John Doe",
  email: "[email protected]",
  role: {
    id: null,
    text: "Supervisor"
  }
})

We obviously can't write this:

const user = reactive({
  username: "John Doe",
  email: "[email protected]",
  role_id: null
})

Which is, in your opinion, the correct way to handle a generic remote field ( id + text ) ? Do we really need a second array/object to map text values?

Is there any consolidate patterns to deal with cases like this? I don't even know how to search around to look for ideas...

No inertiajs , no livewire.. just "vanilla" vue and laravel api.

Thanks if you may help 🙏