Один массив, обновление нескольких параметров выбора - как сохранить выбранные значения?

Question

У меня есть один массив, который динамически обновляется с помощью вызова API, массив используется в нескольких элементах выбора. Когда массив обновляется, он стирает все прежние выбранные значения. Как сохранить выбранное значение и по-прежнему поддерживать один массив, который динамически обновляется?

<div id="app">

What are you interested in?

  <select v-model="inputa">
    <option v-for="options in todos" v-bind:value="options ">
    {{ options.text }} 
    </option>  
 </select>

  <br><br><br><br>

Your details:
  <select v-model="inputb">
  <option v-for="options in todos" v-bind:value="options ">
    {{ options.text }}
  </option>
  </select>
  <br><br><br><br>


  <button v-on:click="switchList()">
    Update Shared Array via API
    </button>
</div>


new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ],

        randomArray: [
      { text: "Age", done: false },
      { text: "DOB", done: false },
      { text: "Contact", done: true },
      { text: "Mobile", done: true }
    ],

        inputa: '',
        inputb: '',
  },

  methods: {

            switchList()
            {
                this.todos = [];
                this.todos = this.randomArray;

            }

  }
})

В приведенном выше примере я имитирую вызов API с помощью кнопки. Случайный массив - это список элементов, опять же для демонстрации.

Что я пытаюсь сделать:

1. Пользователь выбирает значение в списке опций выбора.
2. Вызов API обновляет массив новыми значениями.
3. Новые значения обновляют второй список параметров, сохраняя первый.

JsFiddle: https://jsfiddle.net/syed263/vrojh38w/27/