JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="main">
  <sub-select :subs="data" @comp-update="onShufflePaths($event)"></sub-select>
</div>

CSS

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

JavaScript

import { createApp, ref, reactive, watch, computed, onMounted, unref, toRaw, nextTick } from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm-browser.prod.js'
 
 const ui = {
   setup() {
    
    let data = ref('first_second_thrid');
    
    const onShufflePaths = (ind) => {
    	let subs = data.value.match(/[^_]+/g);
    	const main = subs.splice(ind, 1)[0];
   		data.value = [main, ...subs].join('_');
    }
        
     return {
       data, onShufflePaths, 
     };
   },
 };

 const vueApp = createApp(ui);
 
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>`
});
 
 vueApp.mount('#main');