diff --git a/src/components/ObjectInspector.vue b/src/components/ObjectInspector.vue
index 10058f31..9c4f6147 100644
--- a/src/components/ObjectInspector.vue
+++ b/src/components/ObjectInspector.vue
@@ -145,7 +145,7 @@ import 'tippy.js/animations/scale.css'
 import 'tippy.js/animations/shift-away.css'
 import 'tippy.js/animations/shift-toward.css'
 
-export default defineComponent({
+export default {
   components: {
     ObjectImage,
     BiomeImage,
@@ -170,6 +170,10 @@ export default defineComponent({
       }
     };
 
+    onMounted(() => {
+      loadObject();
+    });
+
     watch(
       () => route.params.id,
       () => {
@@ -177,10 +181,6 @@ export default defineComponent({
       }
     );
 
-    onMounted(() => {
-      loadObject();
-    });
-
     const biomes = computed(() => {
       return object.value?.data?.biomes?.map(biomeData => Biome.find(biomeData.id.toString())) || [];
     });
@@ -333,7 +333,7 @@ export default defineComponent({
   metaInfo() {
     return { title: this.object?.name };
   },
-});
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/ObjectSearch.vue b/src/components/ObjectSearch.vue
index c1ed709c..8d16566f 100644
--- a/src/components/ObjectSearch.vue
+++ b/src/components/ObjectSearch.vue
@@ -52,8 +52,7 @@ export default {
           placeholderVal.value = "Search";
         } else {
           let newSelectedObject = GameObject.find(route?.params?.id.split('-')[0]);
-          selectedObject.value = GameObject.find(route?.params?.id.split('-')[0]);
-          if (VueSelectElem.value) VueSelectElem.value.mutableValue = newSelectedObject.name;
+          if (VueSelectElem.value) VueSelectElem.value.mutableValue = newSelectedObject;
         }
       }),
     );
@@ -66,8 +65,10 @@ export default {
         newSelectedObject = object;
       }
       if (newSelectedObject === selectedObject.value) return;
-      if (newSelectedObject)
+      if (newSelectedObject) {
+        selectedObject.value = newSelectedObject;
         router.push(newSelectedObject.url());
+      }
     };
 
     return {
diff --git a/src/components/Recipe.vue b/src/components/Recipe.vue
index f89901f4..4b11cb2c 100644
--- a/src/components/Recipe.vue
+++ b/src/components/Recipe.vue
@@ -15,9 +15,9 @@
 
     <h3 v-if="loading || !objectData">Loading...</h3>
     <div v-else class="steps">
-      <RecipeIngredients v-if="objectData.recipe.ingredients" :ingredients="objectData.recipe.ingredients" :rightClickObject="filterObject" />
+      <RecipeIngredients v-if="objectData.recipe?.ingredients" :ingredients="objectData.recipe?.ingredients" :rightClickObject="filterObject" />
 
-      <RecipeIngredients v-if="objectData.recipe.uncraftables" title="UNCRAFTABLE Ingredients" :ingredients="objectData.recipe.uncraftables" :rightClickObject="filterObject" />
+      <RecipeIngredients v-if="objectData.recipe?.uncraftables" title="UNCRAFTABLE Ingredients" :ingredients="objectData.recipe?.uncraftables" :rightClickObject="filterObject" />
 
       <div class="filterHeadline" v-if="filteredObject">
         <h4>Filter:</h4>
@@ -31,7 +31,7 @@
       </div>
 
       <RecipeStep
-        v-for="(transitions, index) in objectData.recipe.steps"
+        v-for="(transitions, index) in objectData.recipe?.steps"
         :transitions="transitions"
         :number="index + 1"
         :key="index"
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 7de2376e..3f60d70b 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -1,344 +1,5 @@
-<style>
-  .v-select {
-    position: relative;
-    font-family: sans-serif;
-  }
-
-  .v-select,
-  .v-select * {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-  /* Rtl support */
-  .v-select.rtl .open-indicator {
-    left: 10px;
-    right: auto;
-  }
-  .v-select.rtl .selected-tag {
-    float: right;
-    margin-right: 3px;
-    margin-left: 1px;
-  }
-  .v-select.rtl .dropdown-menu {
-    text-align: right;
-  }
-  .v-select.rtl .dropdown-toggle .clear {
-    left: 30px;
-    right: auto;
-  }
-  /* Open Indicator */
-  .v-select .open-indicator {
-    position: absolute;
-    bottom: 6px;
-    right: 10px;
-    display: inline-block;
-    cursor: pointer;
-    pointer-events: all;
-    transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
-    transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
-    opacity: 1;
-    height: 20px; width: 10px;
-  }
-  .v-select .open-indicator:before {
-    border-color: rgba(60, 60, 60, .5);
-    border-style: solid;
-    border-width: 3px 3px 0 0;
-    content: '';
-    display: inline-block;
-    height: 10px;
-    width: 10px;
-    vertical-align: top;
-    transform: rotate(133deg);
-    transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
-    transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
-    box-sizing: inherit;
-  }
-  /* Open Indicator States */
-  .v-select.open .open-indicator:before {
-    transform: rotate(315deg);
-  }
-  .v-select.loading .open-indicator {
-    opacity: 0;
-  }
-  .v-select.open .open-indicator {
-    bottom: 1px;
-  }
-  /* Dropdown Toggle */
-  .v-select .dropdown-toggle {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    display: block;
-    padding: 0;
-    background: none;
-    border: 1px solid rgba(60, 60, 60, .26);
-    border-radius: 4px;
-    white-space: normal;
-  }
-  .v-select .dropdown-toggle:after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: " ";
-    clear: both;
-    height: 0;
-  }
-
-  /* Search Button */
-  .v-select .dropdown-toggle .search-icon, .v-select .dropdown-toggle .spin {
-    position: absolute;
-    top: 9px;
-    left: 10px;
-    cursor: pointer;
-  }
-
-  /* Clear Button */
-  .v-select .dropdown-toggle .clear {
-    position: absolute;
-    bottom: 9px;
-    right: 30px;
-    font-size: 23px;
-    font-weight: 700;
-    line-height: 1;
-    color: rgba(60, 60, 60, .5);
-    padding: 0;
-    border: 0;
-    background-color: transparent;
-    cursor: pointer;
-  }
-
-  /* Dropdown Toggle States */
-  .v-select.searchable .dropdown-toggle {
-    cursor: text;
-  }
-  .v-select.unsearchable .dropdown-toggle {
-    cursor: pointer;
-  }
-  .v-select.open .dropdown-toggle {
-    border-bottom-color: transparent;
-    border-bottom: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  /* Dropdown Menu */
-  .v-select .dropdown-menu {
-    display:block;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: 1000;
-    min-width: 160px;
-    padding: 5px 0;
-    margin: 0;
-    width: 100%;
-    overflow-y: scroll;
-    border: 1px solid rgba(0, 0, 0, .26);
-    box-shadow: 0px 3px 6px 0px rgba(0,0,0,.15);
-    border-top: none;
-    border-radius: 0 0 4px 4px;
-    text-align: left;
-    list-style: none;
-    background: #fff;
-  }
-  .v-select .no-options {
-    text-align: center;
-  }
-  /* Selected Tags */
-  .v-select .selected-tag {
-    color: #333;
-    background-color: #f0f0f0;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    height: 26px;
-    margin: 4px 1px 0px 32px;
-    padding: 1px 0.25em;
-    float: left;
-    line-height: 24px;
-  }
-  .v-select.single .selected-tag {
-    background-color: transparent;
-    border-color: transparent;
-  }
-  .v-select.single.open .selected-tag {
-    position: absolute;
-    opacity: .5;
-  }
-  .v-select.single.open.searching .selected-tag,
-  .v-select.single.loading .selected-tag {
-    display: none;
-  }
-  .v-select .selected-tag .close {
-    float: none;
-    margin-right: 0;
-    font-size: 20px;
-    appearance: none;
-    padding: 0;
-    cursor: pointer;
-    background: 0 0;
-    border: 0;
-    font-weight: 700;
-    line-height: 1;
-    color: #000;
-    text-shadow: 0 1px 0 #fff;
-    filter: alpha(opacity=20);
-    opacity: .2;
-  }
-  .v-select.single.searching:not(.open):not(.loading) input[type="search"] {
-    opacity: .2;
-  }
-  /* Search Input */
-  .v-select input[type="search"]::-webkit-search-decoration,
-  .v-select input[type="search"]::-webkit-search-cancel-button,
-  .v-select input[type="search"]::-webkit-search-results-button,
-  .v-select input[type="search"]::-webkit-search-results-decoration {
-    display: none;
-  }
-  .v-select input[type="search"]::-ms-clear {
-    display: none;
-  }
-  .v-select input[type="search"],
-  .v-select input[type="search"]:focus {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    line-height: 1.42857143;
-    font-size:1em;
-    height: 34px;
-    display: inline-block;
-    border: none;
-    outline: none;
-    margin: 0;
-    padding: 0 .5em;
-    padding-left: 35px;
-    width: 10em;
-    max-width: 100%;
-    background: none;
-    position: relative;
-    box-shadow: none;
-  }
-  .v-select.unsearchable input[type="search"] {
-    opacity: 0;
-  }
-  .v-select.unsearchable input[type="search"]:hover {
-    cursor: pointer;
-  }
-    /* List Items */
-  .v-select li {
-    line-height: 1.42857143; /* Normalize line height */
-  }
-  .v-select li > a {
-    display: block;
-    padding: 3px 20px;
-    clear: both;
-    color: #333; /* Overrides most CSS frameworks */
-    white-space: nowrap;
-  }
-  .v-select li:hover {
-    cursor: pointer;
-  }
-  .v-select .dropdown-menu .active > a {
-    color: #333;
-    background: rgba(50, 50, 50, .1);
-  }
-  .v-select .dropdown-menu > .highlight > a {
-    /*
-     * required to override bootstrap 3's
-     * .dropdown-menu > li > a:hover {} styles
-     */
-    background: #5897fb;
-    color: #fff;
-  }
-  .v-select .highlight:not(:last-child) {
-    margin-bottom: 0; /* Fixes Bulma Margin */
-  }
-  /* Loading Spinner */
-  .v-select .spinner {
-    opacity: 0;
-    position: absolute;
-    top: 5px;
-    right: 10px;
-    font-size: 5px;
-    text-indent: -9999em;
-    overflow: hidden;
-    border-top: .9em solid rgba(100, 100, 100, .1);
-    border-right: .9em solid rgba(100, 100, 100, .1);
-    border-bottom: .9em solid rgba(100, 100, 100, .1);
-    border-left: .9em solid rgba(60, 60, 60, .45);
-    transform: translateZ(0);
-    animation: vSelectSpinner 1.1s infinite linear;
-    transition: opacity .1s;
-  }
-  .v-select .spinner,
-  .v-select .spinner:after {
-    border-radius: 50%;
-    width: 5em;
-    height: 5em;
-  }
-
-  /* Disabled state */
-  .v-select.disabled .dropdown-toggle,
-  .v-select.disabled .dropdown-toggle .clear,
-  .v-select.disabled .dropdown-toggle input,
-  .v-select.disabled .selected-tag .close,
-  .v-select.disabled .open-indicator {
-    cursor: not-allowed;
-    background-color: rgb(248, 248, 248);
-  }
-
-  /* Loading Spinner States */
-  .v-select.loading .spinner {
-    opacity: 1;
-  }
-  /* KeyFrames */
-  @-webkit-keyframes vSelectSpinner {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-  @keyframes vSelectSpinner {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-  /* Dropdown Default Transition */
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity .15s cubic-bezier(1.0, 0.5, 0.8, 1.0);
-  }
-  .fade-enter,
-  .fade-leave-to {
-    opacity: 0;
-  }
-
-  /* Override */
-
-  /* Avoid mobile wrap bug */
-  .v-select .selected-tag {
-    position: absolute;
-  }
-  .spin {
-     transform: rotate(0);
-     animation: spin 1.1s infinite linear;
-   }
-   @keyframes spin {
-      0% {
-         transform: rotate(0deg);
-      }
-      100% {
-         transform: rotate(360deg);
-      }
-   }
-</style>
-
 <template>
-   <div :dir="dir" class="dropdown v-select" :class="dropdownClasses">
+   <div ref="rootElement" :dir="dir" class="dropdown v-select" :class="dropdownClasses">
       <div ref="toggle" @mousedown.prevent="toggleDropdown" :class="['dropdown-toggle', 'clearfix']">
          <img v-if="!processing" src="../assets/search.svg" width="19" height="20" class="search-icon"/>
          <svg v-else xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-loader spin" width="19" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -365,7 +26,7 @@
         see: https://github.com/vuejs/vue/issues/9299
       -->
       <input
-              ref="search"
+              ref="searchInput"
               :value="search"
               @input="event => (search = event.target.value)"
               @keydown.delete="maybeDeleteValue"
@@ -438,14 +99,12 @@
   </div>
 </template>
 
-<script type="text/babel">
-  import ajax from '../mixins/ajax'
+<script>
+  import _ from 'lodash';
 
-  import _ from 'lodash'
+  import { ref, computed, watch, onMounted } from 'vue';
 
   export default {
-    mixins: [ajax],
-
     props: {
       /**
        * Contains the currently selected value. Very similar to a
@@ -549,30 +208,11 @@
       /**
        * Tells vue-select what key to use when generating option
        * labels when each `option` is an object.
-       * @type {String}
-       */
-      label: {
-        type: String,
-        default: 'label'
-      },
-
-      /**
-       * Callback to generate the label text. If {option}
-       * is an object, returns option[this.label] by default.
-       * @type {Function}
-       * @param  {Object || String} option
-       * @return {String}
+       * @type {String}
        */
-      getOptionLabel: {
-        type: Function,
-        default(option) {
-          if (typeof option === 'object') {
-            if (this.label && option[this.label]) {
-              return option[this.label]
-            }
-          }
-          return option;
-        }
+      label: {
+        type: String,
+        default: 'label'
       },
 
       /**
@@ -585,7 +225,7 @@
       onChange: {
         type: Function,
         default: function (val) {
-          this.$emit('input', val)
+          emit('input', val)
         }
       },
 
@@ -628,21 +268,6 @@
         default: true
       },
 
-      /**
-       * User defined function for adding Options
-       * @type {Function}
-       */
-      createOption: {
-        type: Function,
-        default(newOption) {
-          if (typeof this.mutableOptions[0] === 'object') {
-            newOption = {[this.label]: newOption}
-          }
-          this.$emit('option:created', newOption)
-          return newOption
-        }
-      },
-
       /**
        * When false, updating the options will not reset the select value
        * @type {Boolean}
@@ -690,344 +315,435 @@
         type: Boolean,
         default: false,
       },
-    },
 
-    data() {
-      return {
-        search: '',
-        open: false,
-        mutableValue: null,
-        mutableOptions: [],
-        worker: null,
-        worker_promises: [], // keep track of multiple pending search requests.
-        displayedOptions: [],
-        processing: false,
-        maybeInaccurate: false, // if results are from guessing
-        typeAheadPointer: -1,
+      /**
+       * Toggles the adding of a 'loading' class to the main
+       * .v-select wrapper. Useful to control UI state when
+       * results are being processed through AJAX.
+       */
+      loading : {
+        type : Boolean,
+        default : false
+      },
+
+      /**
+       * Accept a callback function that will be
+       * run when the search text changes.
+       *
+       * loading() accepts a boolean value, and can
+       * be used to toggle a loading class from
+       * the onSearch callback.
+       *
+       * @param {search}  String          Current search text
+       * @param {loading} Function(bool)  Toggle loading class
+       */
+      onSearch : {
+        type : Function,
+        default : function(search, loading) {}
       }
     },
 
-    watch: {
-      displayedOptions() {
-        this.typeAheadPointer = 0;
-      },
-      typeAheadPointer() {
-        this.maybeAdjustScroll(); // Added from pointerScroll.js
-      },
+    setup(props, { emit }) {
+      // Reactive data
+      const searchInput = ref(null);
+      const search = ref('');
+      const open = ref(false);
+      const mutableValue = ref(null);
+      const mutableLoading = ref(false);
+      const mutableOptions = ref([]);
+      const worker = ref(null);
+      const worker_promises = ref([]); // keep track of multiple pending search requests.
+      const displayedOptions = ref([]);
+      const processing = ref(false);
+      const maybeInaccurate = ref(false); // if results are from guessing
+      const typeAheadPointer = ref(-1);
+      const dropdownMenu = ref(null);
+      const toggle = ref(null);
+      const openIndicator = ref(null);
+      const rootElement = ref(null);
+
+      // Computed values
+      const clearSearchOnSelectProp = computed(() => props.clearSearchOnSelect);
+      const closeOnSelectProp = computed(() => props.closeOnSelect);
+      const dirProp = computed(() => props.dir);
+      const disabledProp = computed(() => props.disabled);
+      const filterableProp = computed(() => props.filterable);
+      const getOptionLabelProp = computed(() => props.getOptionLabel);
+      const inputIdProp = computed(() => props.inputId);
+      const labelProp = computed(() => props.label);
+      const loadingProp = computed(() => props.loading);
+      const maxHeightProp = computed(() => props.maxHeight);
+      const multipleProp = computed(() => props.multiple);
+      const noDropProp = computed(() => props.noDrop);
+      const onChangeProp = computed(() => props.onChange);
+      const onSearchProp = computed(() => props.onSearch);
+      const optionsProp = computed(() => props.options);
+      const placeholderProp = computed(() => props.placeholder);
+      const pushTagsProp = computed(() => props.pushTags);
+      const resetOnOptionsChangeProp = computed(() => props.resetOnOptionsChange);
+      const searchableProp = computed(() => props.searchable);
+      const tabindexProp = computed(() => props.tabindex);
+      const taggableProp = computed(() => props.taggable);
+      const transitionProp = computed(() => props.transition);
+      const useGuessingEngineProp = computed(() => props.useGuessingEngine);
+      const valueProp = computed(() => props.value);
 
       /**
-       * When the value prop changes, update
-			 * the internal mutableValue.
-       * @param  {mixed} val
-       * @return {void}
+       * Callback to generate the label text. If {option}
+       * is an object, returns option[labelProp.value] by default.
+       * @type {Function}
+       * @param  {Object || String} option
+       * @return {String}
        */
-      value(val) {
-				this.mutableValue = val
-      },
+      const getOptionLabel = (option) => {
+        if (typeof option === 'object') {
+          if (labelProp.value && option[labelProp.value]) {
+            return option[labelProp.value];
+          }
+        }
+        return option;
+      }
+
+      const dropdownClasses = computed(() => {
+        return {
+          open: dropdownOpen.value,
+          single: !multipleProp.value,
+          searching: searching.value,
+          searchable: searchableProp.value,
+          unsearchable: !searchableProp.value,
+          loading: mutableLoading.value,
+          rtl: dirProp.value === 'rtl',
+          disabled: disabledProp.value
+        }
+      });
 
       /**
-       * Maybe run the onChange callback.
-       * @param  {string|object} val
-       * @param  {string|object} old
-       * @return {void}
+       * If search text should clear on blur
+       * @return {Boolean} True when single and clearSearchOnSelect
        */
-			mutableValue(val, old) {
-        if (this.multiple) {
-          this.onChange ? this.onChange(val) : null
-        } else {
-          this.onChange && val !== old ? this.onChange(val) : null
+      const clearSearchOnBlur = computed(() => {
+        return clearSearchOnSelectProp.value && !multipleProp.value
+      });
+
+      /**
+       * Return the current state of the
+       * search input
+       * @return {Boolean} True if non empty value
+       */
+      const searching = computed(() => {
+        return !!search.value
+      });
+
+      /**
+       * Return the current state of the
+       * dropdown menu.
+       * @return {Boolean} True if open
+       */
+      const dropdownOpen = computed(() => {
+        return noDropProp.value ? false : open.value && !mutableLoading.value
+      });
+
+      /**
+       * Return the placeholder string if it's set
+       * & there is no value selected.
+       * @return {String} Placeholder text
+       */
+      const searchPlaceholder = computed(() => {
+        if (isValueEmpty.value && placeholderProp.value) {
+          return placeholderProp.value;
         }
-      },
+      });
 
       /**
-       * When options change, update
-       * the internal mutableOptions.
-       * @param  {array} val
-       * @return {void}
+       * Check if there aren't any options selected.
+       * @return {Boolean}
        */
-      options(val) {
-        this.mutableOptions = val
-      },
+       const isValueEmpty = computed(() => {
+        if (mutableValue.value) {
+          if (typeof mutableValue.value === 'object') {
+            return !Object.keys(mutableValue.value).length
+          }
+          return !mutableValue.value.length
+        }
+
+        return true;
+      });
 
       /**
-			 * Maybe reset the mutableValue
-       * when mutableOptions change.
-       * @return {[type]} [description]
+       * Return the current value in array format.
+       * @return {Array}
        */
-      mutableOptions() {
-        if (!this.taggable && this.resetOnOptionsChange) {
-					this.mutableValue = this.multiple ? [] : null
+       const valueAsArray = computed(() => {
+        if (multipleProp.value) {
+          return mutableValue.value
+        } else if (mutableValue.value) {
+          return [mutableValue.value]
         }
-      },
+
+        return []
+      });
 
       /**
-			 * Always reset the mutableValue when
-       * the multiple prop changes.
-       * @param  {Boolean} val
-       * @return {void}
+       * Determines if the clear button should be displayed.
+       * @return {Boolean}
        */
-      multiple(val) {
-				this.mutableValue = val ? [] : null
+       const showClearButton = computed(() => {
+        return !multipleProp.value && !open.value && mutableValue.value != null
+      });
+
+      // Methods
+      const toggleLoading = (toggle = null) => {
+        if (toggle == null) {
+          return this.mutableLoading = !this.mutableLoading
+        }
+        return this.mutableLoading = toggle
       }
-    },
 
-    /**
-     * Clone props into mutable values,
-     * attach any event listeners.
-     */
-    created() {
-			this.mutableValue = this.value
-      this.mutableOptions = this.options.slice(0)
-			this.mutableLoading = this.loading
-      if (this.useGuessingEngine && typeof Worker !== "undefined") {
-         this.prepareEngine();
-      } else if (this.useGuessingEngine) {
-         console.error("can't use guessing engine, web worker not supported on this browser.")
-      }
+      const createOption = (newOption) => {
+        if (typeof mutableOptions.value[0] === 'object') {
+          newOption = {[labelProp.value]: newOption};
+        }
+        maybePushTag(newOption);
+        return newOption;
+      };
+
+      const doSearch = async () => {
+        processing.value = true;
+        try {
+          if (!filterableProp.value && !taggableProp.value) {
+            return mutableOptions.value.slice();
+          }
+          let options = mutableOptions.value.filter((option) => {
+            if (typeof option === 'object' && option.hasOwnProperty(labelProp.value)) {
+              return option[labelProp.value].toLowerCase().indexOf(search.value.toLowerCase()) > -1
+            } else if (typeof option === 'object' && !option.hasOwnProperty(labelProp.value)) {
+              return console.warn(`[vue-select warn]: Label key "option.${labelProp.value}" does not exist in options object.\nhttp://sagalbot.github.io/vue-select/#ex-labels`)
+            }
+            return option.toLowerCase().indexOf(search.value.toLowerCase()) > -1
+          })
+          if (taggableProp.value && search.value.length && !optionExists(search.value)) {
+            options.unshift(search.value)
+          }
+          if (options.length === 0 && useGuessingEngineProp.value) {
+            const query = search.value.toLowerCase()
+            options = await new Promise(resolve => {
+              worker_promises.value.push(resolve);
+              worker.value.postMessage({
+                signal: 'search',
+                data: query,
+                meta: {limit: 30, promise_index: worker_promises.value.length - 1}
+              })
+            })
+            maybeInaccurate.value = true;
+          } else {
+            maybeInaccurate.value = false;
+          }
+          displayedOptions.value = _.take(options, 30);
+        } finally {
+          processing.value = false;
+        }
+      };
 
-      this.$watch('mutableOptions', this.doSearch)
-      this.$watch('taggable', this.doSearch)
-      this.$watch('filterable', this.doSearch)
-      // debounce will only trigger the search after user stopped typing for 250ms
-      this.$watch('search', _.debounce(this.doSearch, 250))
-      this.$on('option:created', this.maybePushTag)
-    },
-    methods: {
-      async doSearch() {
-         this.processing = true;
-         try {
-           if (!this.filterable && !this.taggable) {
-             return this.mutableOptions.slice()
-           }
-           let options = this.mutableOptions.filter((option) => {
-             if (typeof option === 'object' && option.hasOwnProperty(this.label)) {
-               return option[this.label].toLowerCase().indexOf(this.search.toLowerCase()) > -1
-             } else if (typeof option === 'object' && !option.hasOwnProperty(this.label)) {
-               return console.warn(`[vue-select warn]: Label key "option.${this.label}" does not exist in options object.\nhttp://sagalbot.github.io/vue-select/#ex-labels`)
-             }
-             return option.toLowerCase().indexOf(this.search.toLowerCase()) > -1
-           })
-           if (this.taggable && this.search.length && !this.optionExists(this.search)) {
-             options.unshift(this.search)
-           }
-           if (options.length === 0 && this.useGuessingEngine) {
-             const query = this.search.toLowerCase()
-             options = await new Promise(resolve => {
-               this.worker_promises.push(resolve);
-               this.worker.postMessage({
-                 signal: 'search',
-                 data: query,
-                 meta: {limit: 30, promise_index: this.worker_promises.length - 1}
-               })
-             })
-             this.maybeInaccurate = true;
-           } else {
-             this.maybeInaccurate = false;
-           }
-           this.displayedOptions = _.take(options, 30);
-         } finally {
-           this.processing = false;
-         }
-      },
-      prepareEngine() {
-        this.worker = new Worker(new URL("../search.worker.js", import.meta.url))
-        this.worker.onmessageerror = this.worker.onerror = function () {
+      const debouncedDoSearch = _.debounce(() => doSearch(), 250);
+
+      const prepareEngine = () => {
+        worker.value = new Worker(new URL("../search.worker.js", import.meta.url))
+        worker.value.onmessageerror = worker.value.onerror = function () {
           console.error("web worker unexpected error!");
         }
-        this.worker.onmessage = ({data: {signal, data, meta}}) => {
+        worker.value.onmessage = ({data: {signal, data, meta}}) => {
           meta = meta || {};
           if (signal === 'log') {
             console.log("WebWorkerLog: " + data)
           } else if (signal === 'search_result') {
-            const result = data.map(index => this.mutableOptions[index]);
-            this.worker_promises[meta.promise_index](result)
+            const result = data.map(index => mutableOptions.value[index]);
+            worker_promises.value[meta.promise_index](result)
           } else {
             console.error("unknown signal from web worker: " + signal);
           }
         }
-        this.$watch('mutableOptions', () => {
-          this.worker.postMessage({signal: 'set_search_list', data: this.mutableOptions.map(opt => opt[this.label])})
-        }, {immediate: true})
-      },
+        watch(mutableOptions, (curr, prev) => {
+          worker.value.postMessage({signal: 'set_search_list', data: curr.map(opt => opt[labelProp.value])})
+        }, {immediate: true});
+      };
+
       /**
        * Select a given option.
        * @param  {Object|String} option
        * @return {void}
        */
-      select(option) {
-        if (this.isOptionSelected(option)) {
-          this.deselect(option)
+      const select = (option) => {
+        if (isOptionSelected(option)) {
+          deselect(option)
         } else {
-          if (this.taggable && !this.optionExists(option)) {
-            option = this.createOption(option)
+          if (taggableProp.value && !optionExists(option)) {
+            option = createOption(option)
           }
 
-          if (this.multiple && !this.mutableValue) {
-            this.mutableValue = [option]
-          } else if (this.multiple) {
-            this.mutableValue.push(option)
+          if (multipleProp.value && !mutableValue.value) {
+            mutableValue.value = [option]
+          } else if (multipleProp.value) {
+            mutableValue.value.push(option)
           } else {
-            this.mutableValue = option
+            mutableValue.value = option
           }
         }
 
-        this.onAfterSelect(option)
-      },
+        onAfterSelect(option)
+      };
 
       /**
        * De-select a given option.
        * @param  {Object|String} option
        * @return {void}
        */
-      deselect(option) {
-        if (this.multiple) {
-          let ref = -1
-          this.mutableValue.forEach((val) => {
-            if (val === option || typeof val === 'object' && val[this.label] === option[this.label]) {
-              ref = val
+       const deselect = (option) => {
+        if (multipleProp.value) {
+          let ref = -1;
+          mutableValue.value.forEach((val) => {
+            if (val === option || typeof val === 'object' && val[labelProp.value] === option[labelProp.value]) {
+              ref = val;
             }
           })
-          var index = this.mutableValue.indexOf(ref)
-          this.mutableValue.splice(index, 1)
+          let index = mutableValue.value.indexOf(ref);
+          mutableValue.value.splice(index, 1);
         } else {
-          this.mutableValue = null
+          mutableValue.value = null
         }
-      },
+      };
 
       /**
        * Clears the currently selected value(s)
        * @return {void}
        */
-       clearSelection() {
-         this.mutableValue = this.multiple ? [] : null
-       },
+      const clearSelection = () => {
+        mutableValue.value = multipleProp.value ? [] : null;
+      };
 
       /**
-       * Called from this.select after each selection.
+       * Called from select after each selection.
        * @param  {Object|String} option
        * @return {void}
        */
-      onAfterSelect(option) {
-        if (this.closeOnSelect) {
-          this.open = !this.open
-          this.$refs.search.blur()
+      const onAfterSelect = (option) => {
+        if (closeOnSelectProp.value) {
+          open.value = !open.value;
+          searchInput.value.blur();
         }
 
-        if (this.clearSearchOnSelect) {
-          this.search = ''
+        if (clearSearchOnSelectProp.value) {
+          search.value = '';
         }
-      },
+      };
 
       /**
        * Toggle the visibility of the dropdown menu.
        * @param  {Event} e
        * @return {void}
        */
-      toggleDropdown(e) {
-        if (e.target === this.$refs.openIndicator || e.target === this.$refs.search || e.target === this.$refs.toggle || e.target === this.$el) {
-          if (this.open) {
-            this.$refs.search.blur() // dropdown will close on blur
-          } else {
-            if (!this.disabled) {
-              this.open = true
-              this.search = "";
-              this.$refs.search.focus()
-            }
+      const toggleDropdown = (e) => {
+        if (open.value) {
+          searchInput.value.blur(); // dropdown will close on blur
+        } else {
+          if (!disabledProp.value) {
+            open.value = true;
+            search.value = "";
+            searchInput.value.focus();
           }
         }
-      },
+      };
 
       /**
        * Check if the given option is currently selected.
        * @param  {Object|String}  option
        * @return {Boolean}        True when selected | False otherwise
        */
-      isOptionSelected(option) {
-        if (this.multiple && this.mutableValue) {
-          let selected = false
-          this.mutableValue.forEach(opt => {
-            if (typeof opt === 'object' && opt[this.label] === option[this.label]) {
-              selected = true
-            } else if (typeof opt === 'object' && opt[this.label] === option) {
-              selected = true
+      const isOptionSelected = (option) => {
+        if (multipleProp.value && mutableValue.value) {
+          let selected = false;
+          mutableValue.value.forEach(opt => {
+            if (typeof opt === 'object' && opt[labelProp.value] === option[labelProp.value]) {
+              selected = true;
+            } else if (typeof opt === 'object' && opt[labelProp.value] === option) {
+              selected = true;
             }
             else if (opt === option) {
-              selected = true
+              selected = true;
             }
           })
-          return selected
+          return selected;
         }
 
-        return this.mutableValue === option
-      },
+        return mutableValue.value === option;
+      };
 
       /**
        * If there is any text in the search input, remove it.
        * Otherwise, blur the search input to close the dropdown.
        * @return {void}
        */
-      onEscape() {
-        if (!this.search.length) {
-          this.$refs.search.blur()
+      const onEscape = () => {
+        if (!search.value.length) {
+          searchInput.value.blur();
         } else {
-          this.search = ''
+          search.value = '';
         }
-      },
+      };
 
       /**
        * Close the dropdown on blur.
        * @emits  {search:blur}
        * @return {void}
        */
-      onSearchBlur() {
-        if (this.clearSearchOnBlur) {
-          this.search = ''
+      const onSearchBlur = () => {
+        if (clearSearchOnBlur.value) {
+          search.value = '';
         }
-        this.open = false
-        this.$emit('search:blur')
-      },
+        open.value = false;
+        emit('search:blur');
+      };
 
       /**
        * Open the dropdown on focus.
        * @emits  {search:focus}
        * @return {void}
        */
-      onSearchFocus() {
-        this.open = true
-        this.$emit('search:focus')
-      },
+      const onSearchFocus = () => {
+        open.value = true;
+        emit('search:focus');
+      };
 
       /**
        * Delete the value on Delete keypress when there is no
        * text in the search input, & there's tags to delete
        * @return {this.value}
        */
-      maybeDeleteValue() {
-        if (!this.$refs.search.value.length && this.mutableValue) {
-          return this.multiple ? this.mutableValue.pop() : this.mutableValue = null
+      const maybeDeleteValue = () => {
+        if (!search.value.value.length && mutableValue.value) {
+          return multipleProp.value ? mutableValue.value.pop() : mutableValue.value = null;
         }
-      },
+      };
 
       /**
        * Determine if an option exists
-       * within this.mutableOptions array.
+       * within mutableOptions.value array.
        *
        * @param  {Object || String} option
        * @return {boolean}
        */
-      optionExists(option) {
+      const optionExists = (option) => {
         let exists = false
 
-        this.mutableOptions.forEach(opt => {
-          if (typeof opt === 'object' && opt[this.label] === option) {
-            exists = true
+        mutableOptions.value.forEach(opt => {
+          if (typeof opt === 'object' && opt[labelProp.value] === option) {
+            exists = true;
           } else if (opt === option) {
-            exists = true
+            exists = true;
           }
         })
 
-        return exists
-      },
+        return exists;
+      };
 
       /**
        * If push-tags is true, push the
@@ -1036,56 +752,56 @@
        * @param  {Object || String} option
        * @return {void}
        */
-      maybePushTag(option) {
-        if (this.pushTags) {
-          this.mutableOptions.push(option)
+      const maybePushTag = (option) => {
+        if (pushTagsProp.value) {
+          mutableOptions.value.push(option);
         }
-      },
+      };
       
       /**
        * Move the typeAheadPointer visually up the list by
        * subtracting the current index by one.
        * @return {void}
        */
-      typeAheadUp() {
-        if (this.typeAheadPointer > 0) {
-          this.typeAheadPointer--;
-          if (this.maybeAdjustScroll) {
-            this.maybeAdjustScroll();
+      const typeAheadUp = () => {
+        if (typeAheadPointer.value > 0) {
+          typeAheadPointer.value--;
+          if (maybeAdjustScroll) {
+            maybeAdjustScroll();
           }
         }
-      },
+      };
 
       /**
        * Move the typeAheadPointer visually down the list by
        * adding the current index by one.
        * @return {void}
        */
-      typeAheadDown() {
-        if (this.typeAheadPointer < this.displayedOptions.length - 1) {
-          this.typeAheadPointer++;
-          if (this.maybeAdjustScroll) {
-            this.maybeAdjustScroll();
+      const typeAheadDown = () => {
+        if (typeAheadPointer.value < displayedOptions.value.length - 1) {
+          typeAheadPointer.value++;
+          if (maybeAdjustScroll) {
+            maybeAdjustScroll();
           }
         }
-      },
+      };
 
       /**
        * Select the option at the current typeAheadPointer position.
        * Optionally clear the search input on selection.
        * @return {void}
        */
-      typeAheadSelect() {
-        if (this.displayedOptions[this.typeAheadPointer]) {
-          this.select(this.displayedOptions[this.typeAheadPointer]);
-        } else if (this.taggable && this.search.length) {
-          this.select(this.search);
+      const typeAheadSelect = () => {
+        if (displayedOptions.value[typeAheadPointer.value]) {
+          select(displayedOptions.value[typeAheadPointer.value]);
+        } else if (taggableProp.value && search.value.length) {
+          select(search.value);
         }
 
-        if (this.clearSearchOnSelect) {
-          this.search = "";
+        if (clearSearchOnSelectProp.value) {
+          search.value = "";
         }
-      },
+      };
 
       /**
        * Adjust the scroll position of the dropdown list
@@ -1093,168 +809,581 @@
        * overflow bounds.
        * @returns {*}
        */
-      maybeAdjustScroll() {
-        let pixelsToPointerTop = this.pixelsToPointerTop();
-        let pixelsToPointerBottom = this.pixelsToPointerBottom();
-
-        if (pixelsToPointerTop <= this.viewport().top) {
-          return this.scrollTo(pixelsToPointerTop);
-        } else if (pixelsToPointerBottom >= this.viewport().bottom) {
-          return this.scrollTo(this.viewport().top + this.pointerHeight());
+      const maybeAdjustScroll = () => {
+        let pixelsToPointerTopVal = pixelsToPointerTop();
+        let pixelsToPointerBottomVal = pixelsToPointerBottom();
+
+        if (pixelsToPointerTopVal <= viewport().top) {
+          return scrollTo(pixelsToPointerTopVal);
+        } else if (pixelsToPointerBottomVal >= viewport().bottom) {
+          return scrollTo(viewport().top + pointerHeight());
         }
-      },
+      };
 
       /**
        * The distance in pixels from the top of the dropdown
        * list to the top of the current pointer element.
        * @returns {number}
        */
-      pixelsToPointerTop() {
-        let pixelsToPointerTop = 0;
-        if (this.$refs.dropdownMenu) {
-          for (let i = 0; i < this.typeAheadPointer; i++) {
-            pixelsToPointerTop += this.$refs.dropdownMenu.children[i].offsetHeight;
+      const pixelsToPointerTop = () => {
+        let pixelsToPointerTopVal = 0;
+        if (dropdownMenu.value) {
+          for (let i = 0; i < typeAheadPointer.value; i++) {
+            pixelsToPointerTopVal += dropdownMenu.value.children[i].offsetHeight;
           }
         }
-        return pixelsToPointerTop;
-      },
+        return pixelsToPointerTopVal;
+      };
 
       /**
        * The distance in pixels from the top of the dropdown
        * list to the bottom of the current pointer element.
        * @returns {*}
        */
-      pixelsToPointerBottom() {
-        return this.pixelsToPointerTop() + this.pointerHeight();
-      },
+      const pixelsToPointerBottom = () => {
+        return pixelsToPointerTop() + pointerHeight();
+      };
 
       /**
        * The offsetHeight of the current pointer element.
        * @returns {number}
        */
-      pointerHeight() {
-        let element = this.$refs.dropdownMenu ? this.$refs.dropdownMenu.children[this.typeAheadPointer] : false;
+      const pointerHeight = () => {
+        let element = dropdownMenu.value ? dropdownMenu.value.children[typeAheadPointer.value] : false;
         return element ? element.offsetHeight : 0;
-      },
+      };
 
       /**
        * The currently viewable portion of the dropdownMenu.
        * @returns {{top: (string|*|number), bottom: *}}
        */
-      viewport() {
+      const viewport = () => {
         return {
-          top: this.$refs.dropdownMenu ? this.$refs.dropdownMenu.scrollTop : 0,
-          bottom: this.$refs.dropdownMenu
-            ? this.$refs.dropdownMenu.offsetHeight + this.$refs.dropdownMenu.scrollTop
+          top: dropdownMenu.value ? dropdownMenu.value.scrollTop : 0,
+          bottom: dropdownMenu.value
+            ? dropdownMenu.value.offsetHeight + dropdownMenu.value.scrollTop
             : 0,
         };
-      },
+      };
 
       /**
        * Scroll the dropdownMenu to a given position.
        * @param position
        * @returns {*}
        */
-      scrollTo(position) {
-        if (this.$refs.dropdownMenu) {
-          this.$refs.dropdownMenu.scrollTop = position;
+      const scrollTo = (position) => {
+        if (dropdownMenu.value) {
+          dropdownMenu.value.scrollTop = position;
+        }
+      };
+
+      onMounted(() => {
+        mutableValue.value = valueProp.value;
+        mutableOptions.value = optionsProp.value.slice(0);
+        if (useGuessingEngineProp.value && typeof Worker !== "undefined") {
+          prepareEngine();
+        } else if (useGuessingEngineProp.value) {
+          console.error("can't use guessing engine, web worker not supported on this browser.")
         }
-      },
-    },
 
-    computed: {
+        // Watchers
+        watch(search, (curr, prev) => {
+          if (curr.length > 0) {
+            onSearchProp.value(curr, toggleLoading);
+            emit('search', curr, toggleLoading);
+          }
+        });
+
+        watch(displayedOptions, async(curr, prev) => {
+          typeAheadPointer.value = 0;
+        });
+
+        watch(typeAheadPointer, async(curr, prev) => {
+          maybeAdjustScroll();
+        });
+
+        watch(loadingProp, (val) => {
+          mutableLoading.value = val;
+        });
+
+        /**
+         * When the value prop changes, update
+         * the internal mutableValue.
+         * @param  {mixed} val
+         * @return {void}
+         */
+        watch(valueProp, async(curr, prev) => {
+          mutableValue.value = curr;
+        });
+
+        /**
+         * Maybe run the onChange callback.
+         * @param  {string|object} val
+         * @param  {string|object} old
+         * @return {void}
+         */
+        watch(mutableValue, (curr, prev) => {
+          if (multipleProp.value) {
+            onChangeProp.value ? onChangeProp.value(curr) : null;
+          } else {
+            (onChangeProp.value && curr !== prev) ? onChangeProp.value(curr) : null;
+          }
+        });
+
+        /**
+         * When options change, update
+         * the internal mutableOptions.
+         * @param  {array} val
+         * @return {void}
+         */
+        watch(optionsProp, (curr, prev) => {
+          mutableOptions.value = curr;
+        });
+
+        /**
+         * Maybe reset the mutableValue
+         * when mutableOptions change.
+         * @return {[type]} [description]
+         */
+        watch(mutableOptions, (curr, prev) => {
+          if (!taggableProp.value && resetOnOptionsChangeProp.value) {
+            mutableValue.value = multipleProp.value ? [] : null
+          }
+        });
 
-      /**
-       * Classes to be output on .dropdown
-       * @return {Object}
-       */
-      dropdownClasses() {
-        return {
-          open: this.dropdownOpen,
-          single: !this.multiple,
-          searching: this.searching,
-          searchable: this.searchable,
-          unsearchable: !this.searchable,
-          loading: this.mutableLoading,
-          rtl: this.dir === 'rtl',
-          disabled: this.disabled
-        }
-      },
+        watch(multipleProp, (curr, prev) => {
+          mutableValue.value = curr ? [] : null
+        });
 
-      /**
-       * If search text should clear on blur
-       * @return {Boolean} True when single and clearSearchOnSelect
-       */
-      clearSearchOnBlur() {
-        return this.clearSearchOnSelect && !this.multiple
-      },
+        watch(mutableOptions, () => doSearch());
+        watch(taggableProp, () => doSearch());
+        watch(filterableProp, () => doSearch());
+        // debounce will only trigger the search after user stopped typing for 250ms
+        watch(search, () => debouncedDoSearch());
+      });
 
-      /**
-       * Return the current state of the
-       * search input
-       * @return {Boolean} True if non empty value
-       */
-      searching() {
-        return !!this.search
-      },
+      return {
+        // Reactive data
+        search,
+        searchInput,
+        open,
+        mutableValue,
+        mutableLoading,
+        mutableOptions,
+        worker,
+        worker_promises,
+        displayedOptions,
+        processing,
+        maybeInaccurate,
+        typeAheadPointer,
+        dropdownMenu,
+        toggle,
+        openIndicator,
+        rootElement,
+        // Computed data
+        // Reactive props
+        clearSearchOnSelectProp,
+        closeOnSelectProp,
+        dirProp,
+        disabledProp,
+        filterableProp,
+        getOptionLabelProp,
+        inputIdProp,
+        labelProp,
+        loadingProp,
+        maxHeightProp,
+        multipleProp,
+        noDropProp,
+        onChangeProp,
+        onSearchProp,
+        optionsProp,
+        placeholderProp,
+        pushTagsProp,
+        resetOnOptionsChangeProp,
+        searchableProp,
+        tabindexProp,
+        taggableProp,
+        transitionProp,
+        useGuessingEngineProp,
+        valueProp,
+        // Other computed data
+        getOptionLabel,
+        dropdownClasses,
+        clearSearchOnBlur,
+        searching,
+        dropdownOpen,
+        searchPlaceholder,
+        isValueEmpty,
+        valueAsArray,
+        showClearButton,
+        // Methods
+        createOption,
+        doSearch,
+        debouncedDoSearch,
+        prepareEngine,
+        select,
+        deselect,
+        clearSelection,
+        onAfterSelect,
+        toggleDropdown,
+        isOptionSelected,
+        onEscape,
+        onSearchBlur,
+        onSearchFocus,
+        maybeDeleteValue,
+        optionExists,
+        maybePushTag,
+        typeAheadUp,
+        typeAheadDown,
+        typeAheadSelect,
+        maybeAdjustScroll,
+        pixelsToPointerTop,
+        pixelsToPointerBottom,
+        pointerHeight,
+        viewport,
+        scrollTo,
+        toggleLoading,
+      }
+    },
 
-      /**
-       * Return the current state of the
-       * dropdown menu.
-       * @return {Boolean} True if open
-       */
-      dropdownOpen() {
-        return this.noDrop ? false : this.open && !this.mutableLoading
-      },
+  }
+</script>
 
-      /**
-       * Return the placeholder string if it's set
-       * & there is no value selected.
-       * @return {String} Placeholder text
-       */
-      searchPlaceholder() {
-        if (this.isValueEmpty && this.placeholder) {
-          return this.placeholder;
-        }
-      },
+<style>
+  .v-select {
+    position: relative;
+    font-family: sans-serif;
+  }
 
-      /**
-       * Check if there aren't any options selected.
-       * @return {Boolean}
-       */
-      isValueEmpty() {
-        if (this.mutableValue) {
-          if (typeof this.mutableValue === 'object') {
-            return !Object.keys(this.mutableValue).length
-          }
-          return !this.mutableValue.length
-        }
+  .v-select,
+  .v-select * {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  /* Rtl support */
+  .v-select.rtl .open-indicator {
+    left: 10px;
+    right: auto;
+  }
+  .v-select.rtl .selected-tag {
+    float: right;
+    margin-right: 3px;
+    margin-left: 1px;
+  }
+  .v-select.rtl .dropdown-menu {
+    text-align: right;
+  }
+  .v-select.rtl .dropdown-toggle .clear {
+    left: 30px;
+    right: auto;
+  }
+  /* Open Indicator */
+  .v-select .open-indicator {
+    position: absolute;
+    bottom: 6px;
+    right: 10px;
+    display: inline-block;
+    cursor: pointer;
+    pointer-events: all;
+    transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
+    transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
+    opacity: 1;
+    height: 20px; width: 10px;
+  }
+  .v-select .open-indicator:before {
+    border-color: rgba(60, 60, 60, .5);
+    border-style: solid;
+    border-width: 3px 3px 0 0;
+    content: '';
+    display: inline-block;
+    height: 10px;
+    width: 10px;
+    vertical-align: top;
+    transform: rotate(133deg);
+    transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
+    transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
+    box-sizing: inherit;
+  }
+  /* Open Indicator States */
+  .v-select.open .open-indicator:before {
+    transform: rotate(315deg);
+  }
+  .v-select.loading .open-indicator {
+    opacity: 0;
+  }
+  .v-select.open .open-indicator {
+    bottom: 1px;
+  }
+  /* Dropdown Toggle */
+  .v-select .dropdown-toggle {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    display: block;
+    padding: 0;
+    background: none;
+    border: 1px solid rgba(60, 60, 60, .26);
+    border-radius: 4px;
+    white-space: normal;
+  }
+  .v-select .dropdown-toggle:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+
+  /* Search Button */
+  .v-select .dropdown-toggle .search-icon, .v-select .dropdown-toggle .spin {
+    position: absolute;
+    top: 9px;
+    left: 10px;
+    cursor: pointer;
+  }
 
-        return true;
-      },
+  /* Clear Button */
+  .v-select .dropdown-toggle .clear {
+    position: absolute;
+    bottom: 9px;
+    right: 30px;
+    font-size: 23px;
+    font-weight: 700;
+    line-height: 1;
+    color: rgba(60, 60, 60, .5);
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+    cursor: pointer;
+  }
 
-      /**
-       * Return the current value in array format.
-       * @return {Array}
-       */
-      valueAsArray() {
-        if (this.multiple) {
-          return this.mutableValue
-        } else if (this.mutableValue) {
-          return [this.mutableValue]
-        }
+  /* Dropdown Toggle States */
+  .v-select.searchable .dropdown-toggle {
+    cursor: text;
+  }
+  .v-select.unsearchable .dropdown-toggle {
+    cursor: pointer;
+  }
+  .v-select.open .dropdown-toggle {
+    border-bottom-color: transparent;
+    border-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  /* Dropdown Menu */
+  .v-select .dropdown-menu {
+    display:block;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 0;
+    width: 100%;
+    overflow-y: scroll;
+    border: 1px solid rgba(0, 0, 0, .26);
+    box-shadow: 0px 3px 6px 0px rgba(0,0,0,.15);
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    text-align: left;
+    list-style: none;
+    background: #fff;
+  }
+  .v-select .no-options {
+    text-align: center;
+  }
+  /* Selected Tags */
+  .v-select .selected-tag {
+    color: #333;
+    background-color: #f0f0f0;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    height: 26px;
+    margin: 4px 1px 0px 32px;
+    padding: 1px 0.25em;
+    float: left;
+    line-height: 24px;
+  }
+  .v-select.single .selected-tag {
+    background-color: transparent;
+    border-color: transparent;
+  }
+  .v-select.single.open .selected-tag {
+    position: absolute;
+    opacity: .5;
+  }
+  .v-select.single.open.searching .selected-tag,
+  .v-select.single.loading .selected-tag {
+    display: none;
+  }
+  .v-select .selected-tag .close {
+    float: none;
+    margin-right: 0;
+    font-size: 20px;
+    appearance: none;
+    padding: 0;
+    cursor: pointer;
+    background: 0 0;
+    border: 0;
+    font-weight: 700;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    filter: alpha(opacity=20);
+    opacity: .2;
+  }
+  .v-select.single.searching:not(.open):not(.loading) input[type="search"] {
+    opacity: .2;
+  }
+  /* Search Input */
+  .v-select input[type="search"]::-webkit-search-decoration,
+  .v-select input[type="search"]::-webkit-search-cancel-button,
+  .v-select input[type="search"]::-webkit-search-results-button,
+  .v-select input[type="search"]::-webkit-search-results-decoration {
+    display: none;
+  }
+  .v-select input[type="search"]::-ms-clear {
+    display: none;
+  }
+  .v-select input[type="search"],
+  .v-select input[type="search"]:focus {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    line-height: 1.42857143;
+    font-size:1em;
+    height: 34px;
+    display: inline-block;
+    border: none;
+    outline: none;
+    margin: 0;
+    padding: 0 .5em;
+    padding-left: 35px;
+    width: 10em;
+    max-width: 100%;
+    background: none;
+    position: relative;
+    box-shadow: none;
+  }
+  .v-select.unsearchable input[type="search"] {
+    opacity: 0;
+  }
+  .v-select.unsearchable input[type="search"]:hover {
+    cursor: pointer;
+  }
+    /* List Items */
+  .v-select li {
+    line-height: 1.42857143; /* Normalize line height */
+  }
+  .v-select li > a {
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    color: #333; /* Overrides most CSS frameworks */
+    white-space: nowrap;
+  }
+  .v-select li:hover {
+    cursor: pointer;
+  }
+  .v-select .dropdown-menu .active > a {
+    color: #333;
+    background: rgba(50, 50, 50, .1);
+  }
+  .v-select .dropdown-menu > .highlight > a {
+    /*
+     * required to override bootstrap 3's
+     * .dropdown-menu > li > a:hover {} styles
+     */
+    background: #5897fb;
+    color: #fff;
+  }
+  .v-select .highlight:not(:last-child) {
+    margin-bottom: 0; /* Fixes Bulma Margin */
+  }
+  /* Loading Spinner */
+  .v-select .spinner {
+    opacity: 0;
+    position: absolute;
+    top: 5px;
+    right: 10px;
+    font-size: 5px;
+    text-indent: -9999em;
+    overflow: hidden;
+    border-top: .9em solid rgba(100, 100, 100, .1);
+    border-right: .9em solid rgba(100, 100, 100, .1);
+    border-bottom: .9em solid rgba(100, 100, 100, .1);
+    border-left: .9em solid rgba(60, 60, 60, .45);
+    transform: translateZ(0);
+    animation: vSelectSpinner 1.1s infinite linear;
+    transition: opacity .1s;
+  }
+  .v-select .spinner,
+  .v-select .spinner:after {
+    border-radius: 50%;
+    width: 5em;
+    height: 5em;
+  }
 
-        return []
-      },
+  /* Disabled state */
+  .v-select.disabled .dropdown-toggle,
+  .v-select.disabled .dropdown-toggle .clear,
+  .v-select.disabled .dropdown-toggle input,
+  .v-select.disabled .selected-tag .close,
+  .v-select.disabled .open-indicator {
+    cursor: not-allowed;
+    background-color: rgb(248, 248, 248);
+  }
 
-      /**
-       * Determines if the clear button should be displayed.
-       * @return {Boolean}
-       */
-      showClearButton() {
-        return !this.multiple && !this.open && this.mutableValue != null
-      }
-    },
+  /* Loading Spinner States */
+  .v-select.loading .spinner {
+    opacity: 1;
+  }
+  /* KeyFrames */
+  @-webkit-keyframes vSelectSpinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes vSelectSpinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  /* Dropdown Default Transition */
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity .15s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+  }
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  /* Override */
 
+  /* Avoid mobile wrap bug */
+  .v-select .selected-tag {
+    position: absolute;
   }
-</script>
+  .spin {
+     transform: rotate(0);
+     animation: spin 1.1s infinite linear;
+   }
+   @keyframes spin {
+      0% {
+         transform: rotate(0deg);
+      }
+      100% {
+         transform: rotate(360deg);
+      }
+   }
+</style>
diff --git a/src/mixins/ajax.js b/src/mixins/ajax.js
deleted file mode 100644
index b8970535..00000000
--- a/src/mixins/ajax.js
+++ /dev/null
@@ -1,72 +0,0 @@
-module.exports = {
-	props: {
-		/**
-		 * Toggles the adding of a 'loading' class to the main
-		 * .v-select wrapper. Useful to control UI state when
-		 * results are being processed through AJAX.
-		 */
-		loading: {
-			type: Boolean,
-			default: false
-		},
-
-		/**
-		 * Accept a callback function that will be
-		 * run when the search text changes.
-		 *
-		 * loading() accepts a boolean value, and can
-		 * be used to toggle a loading class from
-		 * the onSearch callback.
-		 *
-		 * @param {search}  String          Current search text
-		 * @param {loading} Function(bool)  Toggle loading class
-		 */
-		onSearch: {
-			type: Function,
-			default: function(search, loading){}
-		}
-	},
-
-	data() {
-		return {
-      mutableLoading: false
-    }
-	},
-
-	watch: {
-		/**
-		 * If a callback & search text has been provided,
-		 * invoke the onSearch callback.
-		 */
-		search() {
-			if (this.search.length > 0) {
-				this.onSearch(this.search, this.toggleLoading)
-        this.$emit('search', this.search, this.toggleLoading)
-      }
-		},
-    /**
-		 * Sync the loading prop with the internal
-		 * mutable loading value.
-     * @param val
-     */
-		loading(val) {
-			this.mutableLoading = val
-		}
-	},
-
-	methods: {
-		/**
-		 * Toggle this.loading. Optionally pass a boolean
-		 * value. If no value is provided, this.loading
-		 * will be set to the opposite of it's current value.
-		 * @param toggle Boolean
-		 * @returns {*}
-		 */
-		toggleLoading(toggle = null) {
-			if (toggle == null) {
-				return this.mutableLoading = !this.mutableLoading
-			}
-			return this.mutableLoading = toggle
-		}
-	}
-}
diff --git a/src/mixins/index.js b/src/mixins/index.js
deleted file mode 100644
index 991ad77c..00000000
--- a/src/mixins/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import ajax from './ajax'
-import pointer from './typeAheadPointer'
-import pointerScroll from './pointerScroll'
-
-export default { ajax, pointer, pointerScroll }
diff --git a/src/models/GameObject.js b/src/models/GameObject.js
index 811b10f2..0b295d35 100644
--- a/src/models/GameObject.js
+++ b/src/models/GameObject.js
@@ -156,7 +156,8 @@ export default class GameObject {
       return "/not-found";
     const path = [`${this.id}-${this.name.replace(/\W+/g, '-')}`];
     if (subpath) path.push(subpath);
-    return '/' + path.map(encodeURIComponent).join("/");
+    let ret = '/' + path.map(encodeURIComponent).join("/");
+    return ret;
   }
 
   clothingPart() {