Trigger a select to open from a function in Vuejs

Question

I want to open a select in Vue via a function but I don't know what event to use. I've tried click and focus but those do not open the select.

JS

var app = new Vue({
  el: '#app',
  data: {
    message: '',
    selectVisibility: false
  },
  methods: {
    showSelect() {
      this.selectVisibility = !this.selectVisibility;
      this.$refs.select.focus().click();
    },
  }
})

HTML

<div id="app">
  <input type="text" v-model="message" @focus="showSelect()" @blur="showSelect()">
  <br>
  <select ref="select" name="" id="selectBox">
    <option value="car">Car</option>
    <option value="clothes">Clothes</option>
    <option value="boat">Boat</option>
    <option value="bike">Bike</option>
    <option value="jewellery">Jewellery</option>
  </select>
</div>

JSfiddle