title: Vue select change event firing before I trigger any action
body: <p>I have a Vue app that seems to fire the change event even before I change the selection, recently tried the @input instead but still the same thing happens(as shown below) </p>
  
  <p><strong>Please note I have tried @change and @input and the event still fires on loading of the controls</strong> </p>
  
  <p>Now this was working before I made css changes to scope the component, so that it doesn't effect the surrounding css. But cant fathom why this would make any difference.</p>
  
  <p>Does anyone know why when adding the options tag and contents would make the change event fire?</p>
  
  <pre><code>&lt;div class="form-group" :class="{formError: errors.has('formSection')}"&gt;
      &lt;label for="formSection"&gt;Section*&lt;/label&gt;
      {{ formModel }}
      &lt;select
          v-model="formModel.idSection1"
          class="form-control"
          id="formSection"
          name="formSection"
          @input="onChangeSectionLevel1"&gt;
          &lt;option v-for="sectionLevel1 in formModel.sectionLevel1" 
                                      v-bind:value="sectionLevel1.value" 
                                      v-bind:key="sectionLevel1.id"&gt;
                                      {{ sectionLevel1.value }}
          &lt;/option&gt;
      &lt;/select&gt;                                
      &lt;span v-if="errors.has('formSection')"&gt;This field is required&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As soon as I add in the options tag which loops through the items the onChangeSectionLevel1 function gets called. I thought it might be vee-validate but taken this out and still happens.</p>
  
  <pre><code>methods: {
     onChangeSectionLevel1() {
        alert("changed");
        ...
     }
  }
  </code></pre>
  
  <p>Update:</p>
  
  <p>I have noticed that if I print out the object that is being bound, I get this which missing the <strong>idSection1</strong> item.</p>
  
  <pre><code>{
      "idSection2": null,
      "idSection3": null,
  }
  </code></pre>
  
  <p>If I then just put a dummy option as below then I can see my 3 data items including the idSection1 that is missing if I loop through with the v-for</p>
  
  <pre><code>&lt;select
      v-model="formModel.idSection1"
      class="form-control"
      id="formSection"
      name="formSection"
      @change="onChangeSectionLevel1"&gt;
      &lt;option&gt;Hello World&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The data item still has the idSection1 listed</p>
  
  <pre><code>{
      "idSection1": null,
      "idSection2": null,
      "idSection3": null
  }
  </code></pre>
  
  <p>Many thanks in advance</p>