title: Changing selected value to null when the current option is removed in Vue
body: <p>I have two linked selects that allows the user to select the first option (which is kind of "what you already have") and that option is then excluded from the other select (you can think of it as "what you want").</p>
  
  <p>Here is my current code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var linkedSelects = new Vue({
    el: '#linked-selects',
    data: {
      opt1: null,
      opt2: null,
      options: ['a', 'b', 'c', 'd']
    },
    computed: {
      allOptions() {
        const allOptions = [...this.options];
        
        allOptions.push('other');
        
        return allOptions;
      },
      remainingOptions() {
        const remainingOptions = [...this.options];
        
        remainingOptions.push('any');
        
        const opt1Index = remainingOptions.indexOf(this.opt1);
        
        if (-1 &lt; opt1Index)
          remainingOptions.splice(opt1Index, 1);
          
        return remainingOptions;
      }
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="linked-selects"&gt;
    &lt;div&gt;
    Choose what to exclude:
      &lt;select v-model="opt1"&gt;
        &lt;option
          v-for="opt in allOptions" 
          :value="opt" 
          :key="opt" &gt;
            {{opt}}
        &lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      Select out of the remaining:
      &lt;select v-model="opt2"&gt;
        &lt;option
          v-for="opt in remainingOptions" 
          :value="opt" 
          :key="opt" &gt;
            {{opt}}
        &lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    
    &lt;div&gt;Value 1: {{opt1}}&lt;/div&gt;
    &lt;div&gt;Value 2: {{opt2}}&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>A problem arises when the following sequence of actions is made:</p>
  
  <ol>
  <li>User selects an option (say <code>a</code>) in the second select.</li>
  <li>User selects the same option (<code>a</code>) in the first select.</li>
  </ol>
  
  <p>When this is done, the option <code>a</code> is removed from the second select but the value of <code>opt2</code> remains equal to <code>a</code>. How can I make Vue change it to <code>null</code> at that situation?</p>
  
  <p>The particular need to solve this is because I am using Buefy and leaving <code>opt2</code> to nonexistant option makes the select appear empty instead of displaying the placeholder. To see a placeholder the option must be changed to <code>null</code>.</p>