select input: list of options retaining old values when data updates

[gwvt]

I have a select input with a list of options that gets updated based on another user input, like this:

template:

<!-- selectA -->
<b-select v-model="selectArray" @change="changeArray1()">
  <b-option v-for="i in [0, 1, 2]" :value="i"
  :key="i">
    {{ i }}
  </b-option>
</b-select>

<!-- selectB -->
<b-select>
  <b-option v-for="item in array1" :value="item"
  :key="item">
    {{ item }}
  </b-option>
</b-select>

script:

data() {
  return {
    array1: [1, 2, 3],
    selectArray: 0,
  };
},
methods: {
  changeArray1() {
    const arrays = [[1, 2, 3], [2, 3, 4], [4, 5, 6]];
    this.array1 = arrays[this.selectArray];
  },
},

As you can see, the user changing the input in selectA changes the values held in array1. Some of these values are the same, some different. Instead of the options for selectB being cleanly updated to bind to the new values held in array1, the list of selectB options retains the original values held in array1 and appends the values held in the new array1. I haven't determined the logic, but on multiple user inputs in the selectA to reassign values to array1, sometimes the duplicate values are appended to the end of the list of options for selectB and sometimes not.

One solution I explored was forcing the DOM to re-render, but after trying many things I was not able to get that to work.

Am I missing something? How can I get the select list to update cleanly?

[rafaberaldo]

I'm probably just gonna replace bOption with the native option, LMFT