JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify/dist/vuetify.min.css">
<div id="app">
<v-app>
	<v-card class="grey lighten-4 elevation-0">
		<v-card-text>
			<v-container fluid>
				<v-layout row wrap>
					<v-flex xs4>
						<v-flex>
							<v-subheader>Origin Province</v-subheader>
						</v-flex>
						<v-flex>
							<v-select
							:items="options.opt_province"
							v-model="support.home_province"
							label="Select"
							class="input-group--focused"
							single-line>
							</v-select>
						</v-flex>
					</v-flex>
					<v-flex xs4>
						<v-flex>
							<v-subheader>Origin City</v-subheader>
						</v-flex>
						<v-flex>
							<v-select
							:items="filteredData"
							v-model="items.home_id"
							label="Select"
							class="input-group--focused"
							single-line
							autocomplete>
							</v-select>
						</v-flex>
					</v-flex>
				</v-layout>
			</v-container>
		</v-card-text>
	</v-card>
  
</v-app>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons')

JavaScript

console.clear()
Vue.use(Vuetify);

var app = new Vue({
  el: '#app',
	data() {
		return {
			items: {
				home_id: null,
			},
			support: {
				home_province: '',
			},
			options: {
				opt_province: [
        		{text: 'British Columbia', value: 1},
            {text: 'Ontario', value: 2}
        ],
				opt_city: [
        		{text: 'Vancouver', value: 1, dependency: 1},
            {text: 'Surrey', value: 1, dependency: 1},
            {text: 'London', value: 1, dependency: 2},
            {text: 'Toronto', value: 1, dependency: 2}            
        ]
			}
		}
	},
  computed: {
    filteredData() {
			let options = this.options.opt_city
      return options.filter(o => o.dependency == this.support.home_province)
    }
  }
})