<div id="app">
  <h1>Vue Select {{ test }}</h1>
  <v-select v-model="selectedValue" :options="options"></v-select>
  <div id="box" :class="selectedValue">
  </div>
</div>

body {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  text-rendering: optimizelegibility;
  -moz-osx-font-smoothing: grayscale;
  -moz-text-size-adjust: none;
}

h1,.muted {
  color: #2c3e5099;
}

h1 {
  font-size: 26px;
  font-weight: 600;
}

#app {
  max-width: 30em;
  margin: 1em auto;
}
#box {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  background-color: red;
  &.full {
    background-color: green;
  }
  &.half {
    background-color: blue;
  }
  &.third {
    background-color: orange;
  }
  &.narrow {
    background-color: red;
  }
}

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    options: [
      'full','half','third','narrow'
    ],
    selectedValue: 'full'
  }
})