title: How to get around vuetify's v-select internal state
body: <p>I'm trying to prevent a value from being 'selected' when using vuetify's v-select component. </p>
  
  <p>Given:</p>
  
  <pre><code>&lt;v-checkbox
      v-model="allowChanges"
  &gt;&lt;/v-checkbox&gt;
  &lt;v-select
      v-model="twoWayComputed"
      :items="items"
  &gt;&lt;/v-select&gt;
  
  new Vue({
    el: '#app',
    data: () =&gt; ({
      selected: "Foo",
      allowChanges: false,
      items: ['Foo', 'Bar', 'Fizz', 'Buzz']
    }),
    computed: {
      twoWayComputed: {
        get(){
          return this.selected
        },
        set(val){
          if (this.allowChanges){
            console.log("updating")
            this.selected = val
          }
        }
      }
    }
  })
  </code></pre>
  
  <p>Codepen: <a href="https://codepen.io/anon/pen/mYNVKN?editors=1011" rel="nofollow noreferrer">https://codepen.io/anon/pen/mYNVKN?editors=1011</a></p>
  
  <p>When another value is selected, the components selected value is not being updated. However v-select still shows the new selected value.</p>
  
  <p>I even tried all kinds of "tricks" like</p>
  
  <pre><code>  set(val){
      if (this.allowChanges){
        console.log("updating")
        this.selected = val
      } else {
        this.selected = this.selected
      }
  </code></pre>
  
  <p>but no luck.</p>
  
  <p>I believe v-select is maintaining its own internal selected value.</p>