I have a problem when I visit the message page and I select a device, the v-model selected value will change. But if I visit the device page and contact page the v-model selected value will not change or become set to the last time value that I selected.

Here is my function in DeviceController to fetch devices:

public function devices()
{   
    try {
        $devices = Device::orderby('id', 'asc')->get();
        return response()->json($devices);
    } catch (\Throwable $th) {
        return response()->json(['message' => $th->getMessage()]);
    }
}

Here is the function from method to get devices{} data from DeviceController:

getDevices() {
    axios.get(`/api/devices`)
      .then(response => {
          this.devices = response.data;
      });
},

Here is my select option code:

<select class="form-select form-select-lg mb-3" v-model="choosed" @change="onChange()">
    <option :value="null">Choose Device to Send SMS</option>
    <option v-for="item in devices" :key="item.id" :value="item.id" >{{ item.device_name }} 
    </option>
</select>

Here is my selected v-model and devices JSON which devices that item.id came from in data:

export default {
    data() {
        return {
            devices: {}, 
            choosed: null,
        }
    },
}

Here is my onChange function in method:

onChange: function(){
    this.choosed = this.item.id;
},