Итак, похоже, что это ошибка в библиотеке.

Решение 1.

оберните тег select в шаблоне другим тегом, например (чтобы это не одинокий корневой элемент в шаблоне):

template: `
  <div><select :value="subpath" @change="onChange($event.target.value)">
    <option v-for="(v,k) in subs">{{k}}: {{v}}</option>
  </select></div>`

Решение 2:

Напишите геттер / сеттер в переменную подпути, поэтому определение компонента выглядит следующим образом:

vueApp.component('sub-select', {
  props: ['subs'],
  emits: ['comp-update'],
  setup(props, { emit }) {
  
        let subs = computed(() => props.subs.match(/[^_]+/g));
    
    let subpath = computed({
      get: () => '0: ' + subs.value[0],
      
      set (value) {
        emit('comp-update', value.slice(0,1))
      }
    });
    
    return { subs, subpath };
  },
  template: `
  <select v-model="subpath">
    <option v-for="(v,k) in subs">{{k}}: {{v}}</option>
  </select>`
});

Чтобы по умолчанию был выбран первый вариант, вам нужно указать индекс 0.

Здесь ваш индекс - k из v-for

<option v-for="(v,k) in subs" :selected="k === 0">{{k}}: {{v}}</option>

В select нет v-model, я думаю, что это основная проблема. Другое - непонятно, что тебе делать.

пожалуйста, обратитесь к следующему коду и проверьте, соответствует ли он вашим потребностям.

    // app.vue
    <template>
      <sub-select v-model="value" :options="options" />
      {{ value }}
    </template>
    
    <script>
    import { ref } from "vue";
    import subSelect from "./components/subSelect.vue";
    
    export default {
      name: "App",
      components: {
        subSelect,
      },
      setup() {
        const value = ref(null);
        const options = ref(["one", "two", "three"]);
    
        return { value, options };
      },
    };
    </script>

видите, что я использовал v-model для привязки значения к sub-select компоненту.

компонент sub-select следующим образом

// subSelect.vue
<template>
  <select v-model="compValue">
    <template v-for="(option, index) in compOptions" :key="index">
      <option :value="option">{{ index }}: {{ option }}</option>
    </template>
  </select>
</template>

<script>
import { computed } from "vue";

export default {
  name: "subSelect",
  props: ["modelValue", "options"],
  setup(props, { emit }) {
    // if value is null then update it to be first option.
    if (props.modelValue === null) {
      emit("update:modelValue", props.options[0]);
    }

    const compValue = computed({
      get: () => props.modelValue,
      set: (v) => emit("update:modelValue", v),
    });
   
    // return selected option first in list/Array.
    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 };
  },
};
</script>

в компоненте sub-select я сначала проверяю, является ли modelValue null, и если да, установите значение как первый вариант.

а также предоставление compOptions в такой последовательности, чтобы выбранные параметры всегда были первыми в списке параметров выбора.

так что это удовлетворяет

1. По умолчанию всегда выбирается первый вариант.
2. Выбранный вариант всегда будет первым в списке вариантов.

проверьте работающий код в codeandbox

редактировать

jsfiddle согласно запросу

также я подозреваю, что вам нужны параметры в виде строки, разделенной подчеркиванием, для этого обратитесь к _ 11_ для преобразования в массив и _ 12_ для объединения массива обратно в строку. если это так, прокомментируйте, чтобы я мог обновить свой ответ. Это должно быть возможно, если установить наблюдатель на compOptions и передать отдельное событие для родительского элемента, но я не думаю, что это хорошая идея!