Bind a different copy of an array to vue select

I am trying to create some form for choosing a city and its dependent areas, the user can add multiple zones, for each zone after the user has chosen the city they get a different list of areas depend on that city.
My problem here is that am passing the same area array for the select so every zone gets the array of the last selected city, I want each zone to get its own copy of that array

Here's a snippet of my select for the city

<b-col v-for="(location, locationKey) in profile.location" :key="locationKey">
   <main-select labelTitle='City' :name="`City ${locationKey + 1}`"  placeholder="Choose" 
               :options="allCities" label="name" :reduce="data=> data.id"
               @change="getAreasDependOnCity(location.city_id)" v-model="location.city_id">
   </main-select>

Selecting a city changes the area list

 getAreasDependOnCity (id) {
    settingsService.getCityArea(id).then(res => {
       this.allArea = res.data.data
    })
  }

Now for the area select I want it somehow to take unchanging copy of that array if they change the city for another zone

  <main-select labelTitle='Area' :name="`Area ${locationKey + 1}`"  placeholder="Choose" 
           :options="allArea" :multiple="true" label="name" :reduce="data=> data.id"
           v-model="location.areas">
   </main-select>
</b-col>

I tried to send a copy of allArea list :options="[...allArea]" but I guess it doesn't work like this
so any suggestions? can I do it with the same array or should I make completely different arrays for each zone?

Edit:
Expected output

[{ // zone 1
   "city": "Cairo",
   "areas": ["Nasr city", "Mohandseen"]
},
{ // zone 2
   "city": "Giza",
   "areas": ["6 October"]
}]