My prop array isn't setting my data array value - vue.js

Question

I'm ultimately attempting to set the initial value of a multi select using an array I'm passing in via prop. But for whatever reason I can't get the initial value to stick onto my data property. I'm new to Vue and feel like there's something I'm fundamentally not grasping.
My prop is coming in properly with the correct values (initialroutes).
However, my data property is not getting the prop's values (rts).
Here is my code:
<v-select
v-model="rts"
:items="getRoutesOptions(item.CenterID)"
item-text="sRoute"
item-value="RouteID"
:multiple="true"
></v-select>
props: {
initialroutes: {
type: Array,
required: true
}
},
data() {
return {
rts: this.initialroutes
}
}
`

Answer 1

The values of the <v-select>.v-model must exactly match (including its type) the values found in <v-select>.items[]. The initialroutes[] values are numbers, so the values in <v-select>.items must also be numbers.
You probably have string values for items[].RouteID:
[
{ sRoute: 'A', RouteID: '1' },
{ sRoute: 'B', RouteID: '2' },
{ sRoute: 'C', RouteID: '3' },
{ sRoute: 'D', RouteID: '4' },
]
...which don't exactly match up to the numbers found in initialroutes[] ([1,2]).
You can either convert initialroutes[] to strings, or items[].RouteID to numbers:
[
{ sRoute: 'A', RouteID: 1 },
{ sRoute: 'B', RouteID: 2 },
{ sRoute: 'C', RouteID: 3 },
{ sRoute: 'D', RouteID: 4 },
]
demo