JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="main">
  <sub-select v-model="value" :options="options" />
  {{ value }}
</div>

CSS

body {
   background: #fff;
   color: grey;
 }
 * {
   margin-bottom: 5px;
 }

JavaScript

import { createApp, ref, computed } from 'https://cdn.jsdelivr.net/npm/vue@3.0.2/dist/vue.esm-browser.prod.js'

const App =  {
  name: "App",
  setup() {
    const value = ref(null);
    const options = ref(["one", "two", "three"]);

    return { value, options };
  },
};

 const vueApp = createApp(App);
 
vueApp.component('sub-select', {
  props: ["modelValue", "options"],
  setup(props, { emit }) {
    if (props.modelValue === null) {
      emit("update:modelValue", props.options[0]);
    }

    const compValue = computed({
      get: () => props.modelValue,
      set: (v) => emit("update:modelValue", v),
    });

    const compOptions = computed(() => {
      const selected = props.options.filter((o) => o === compValue.value);
      const notSelected = props.options.filter((o) => o !== compValue.value);
      return [...selected, ...notSelected];
    });

    return { compValue, compOptions };
  },
  template: `
  <select v-model="compValue">
    <template v-for="(option, index) in compOptions" :key="index">
      <option :value="option">{{ index }}: {{ option }}</option>
    </template>
  </select>
  `
});
 
 vueApp.mount('#main');