JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="app">
  <my-select></my-select>
</div>

<template id="my-template">
  <div>
    <select v-model="team">
      <option v-for="n in teams" v-bind:value="n.id">
        {{n.name}}
      </option>
    </select>
    <p>Selected Team: {{team}}</p>
  </div>
</template>

JavaScript

Vue.component("my-select", {
	template: "#my-template",
  
  mounted: function() {
  	this.getTeams().then(data => {
    	this.teams = data;
    });
  },
  
  data: function() {    
    return {
    	team: 0,
      teams: []
    }
  },
  
  methods: {
  	getTeams: function() {
    	var d = $.Deferred();
    	setTimeout(function() {
      	var teams = [
        	{id: 1, name: "Real Madrid"},
          {id: 2, name: "Bayern MĂĽnchen"}
        ];
        
        d.resolve(teams);
      }, 2000);
      
      return d.promise();
    }
  }
});

new Vue({
	el: "#app"
});