Async populated select

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <div>
    <select class="form-control" v-model="selected" required>
      <option v-for="option in options" v-bind:value="option.id">{{ option.name }}</option>
    </select>
    {{selected}}
  </div>


<input type="text" :name="elementName" v-model="selected">
</div>

JavaScript

var demo = new Vue({
  el: '#demo',
  mounted() {
    this.fetchList();
  },
  data() {
    return {
      selected: '',
      options: [{
        id: '',
        name: 'Pilih Kategori'
      }]
    };
  },
  methods: {
    fetchList: function() {
      setTimeout(() => {
        var resp = {
          "20": "Category 1",
          "21": "Category 2",
          "22": "Category 3"
        }
        Object.keys(resp).forEach((key) => {
          console.log(key)
          console.log(resp[key])
          this.options.push({
            id: key,
            name: resp[key]
          })
        });
      }, 300)
    },
  }
})