Vue: Having a v-model on a Select dropdown clears other input values

Question

I have a form with input values. When I have a select with a v-model on it and go to change the drop down value, the input from the previous fields clear. I made a simple codepen to demonstrate this. It's been a pain point for me for a while but now it's starting to interfere with customer experience so I'd like to see why this happens.

https://codepen.io/lorvenji9533/pen/VwvVBMV

<template>
  <div id="app">
    <input></input>
      <select v-model="foo">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
  </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foo: ""
    };
  }
}
</script>