title: dynamically change select options in vue.js changes the display value
body: <p>I have created a custom component for <code>select</code> that shows all the time for a single day in 15 min interval. I can also pass a optional min-start-time value. In my html, I have used two of these components. 
  I have defined the component as </p>
  
  <pre><code>Vue.component('time-select', {
     template: `
      &lt;select :value="value" 
        ref= 'input'
        v-on:input="onChange($event.target.value)"&gt;
          &lt;option value=""&gt; {{firstOption}} &lt;/option&gt;
          &lt;option v-for="t in getHours()" :value="t"&gt;
            {{ t }}
          &lt;/option&gt;
      &lt;/select&gt;
   `,
   props: {
      value: String,
      startTime: String,
      firstOption: {
        type: String,
        default: "Select"
      },
      step: {
        type: Number,
        default: 15
      }
   },
   methods: {
     getHours: function() {    
        var startHr = 0;
        var startMin = 0;
        if (this.startTime) {
           var timeParts = this.startTime.split(/[\s:]+/);
           startHr = parseInt(timeParts[0]);
           startMin = parseInt(timeParts[1]);    
           var ampm = timeParts[2];
           if(ampm == "PM" &amp;&amp; startHr &lt; 12)
             startHr = startHr + 12;
           else if(ampm == "AM" &amp;&amp; startHr === 12)
             startHr = startHr - 12;
       }      
  
       var hours = [];
       var start = new Date(1,1,1,startHr,startMin);  
       var end = new Date(1,1,2,0,0);
       if(this.startTime)
       {
          start.setMinutes(start.getMinutes() + this.step);
       }
       for (var d = start; d &lt; end; d.setMinutes(d.getMinutes() + this.step)) 
       {          
          hours.push(this.format(d));
       }
  
        return hours;
     },
     format: function(date)
     {
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var ampm = hours &lt; 12? "AM" : (hours=hours%12,"PM");
        hours =  hours == 0? 12 : hours &lt; 10? ("0" + hours) : hours;
        minutes = minutes &lt; 10 ? ("0" + minutes) : minutes;
        var ret = hours + ":" + minutes + " " + ampm;
        return ret;
     },
     onChange: function(val) {
        this.$emit('input', val);
     },
  }
  });
  </code></pre>
  
  <p>JsFiddle link is <a href="https://jsfiddle.net/xsnswxu1/1/" rel="nofollow noreferrer">https://jsfiddle.net/xsnswxu1/1/</a></p>
  
  <p>Now, if you select any value (e.g. 01:30 am) from the first drop down and any value (e.g. 03:30 am) from the second dropdown, and then again change the value of first dropdown to 12:30 am, the value of second dropdown automatically changes (for this example, it is 02:30 am). VM data retains the same though. When I change the first dropdown, the second dropdown value shouldn't be changed. Any idea what I'm doing wrong. VM is not updated which is good but the second dropdown display value is changing if I change the first dropdown.   </p>