Answer a question

This may be trivial but I could not make a select box in Vue.js template to show US as default (that is before the drop down being clicked)

<select v-model="country">                                           
    <option selected="selected">US</option>
    <option>UK</option>
    <option>EU</option>
</select>

The problem is that selector appears blank before being clicked whatever I try.

How can I fix it?

Answers

See Form Input Bindings - Select. You just need to set your bound v-model property to the appropriate value.

Here's an example...

new Vue({
  el: '#app',
  data: {
    country: 'US'
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <select v-model="country">
    <!-- as recommended by Vue -->
    <option disabled value="">Please select one</option>
    <option>US</option>
    <option>UK</option>
    <option>EU</option>
  </select>
  
  <pre>Selected country: {{ country }}</pre>
</div>