JSFiddle - React, Tailwind, and code Playground

by Vlad Rasenko

HTML

<script type="text/x-template" id="test-vue">
	<div>
  <!-- присваиваю уникальный ключ select -->
  	<select :value="value" @change="change($event.target.value)" :key="selectKey">
    	<option v-for="(el, idx) of list" :value="idx">{{el}}</option>
    </select>
    <br>
    value в компоненте: {{value}}
    <hr>
  </div>
</script>

<script type="text/x-template" id="root-vue">
 <div>
 	<test v-model:value="test" :list="test_list"></test>
  <select v-model:value="test">
    	<option v-for="(el, idx) of test_list" :value="idx">{{el}}</option>
    </select>
    <br>
     value в корне: {{test}}
 </div>
</script>

<div id="root">
  
</div>

JavaScript

Vue.component('test', {
	model: {
  	prop: 'value',
    event: 'change'
  },
	template: '#test-vue',
  props: ['value', 'list'],
  computed: {
  	selectKey: function () {
     //суть в том, что бы генерировать уникальный key, который связанный с списком опций
    	return this.list.length * Math.floor(Math.random() * 100);
    }
  },
  methods: {
  	change: function(val) {
    	this.$emit('change', val);
    }
  }
})

new Vue({
	el: '#root',
  template: '#root-vue',
  data: {
  	test: 1,
    test_list: {
    	0: 'test0',
      1: 'test1',
    	2: 'test2',

    }
  },
  created() {
  	var _this = this;
  	setTimeout(function() {
    	_this.test_list = {
    	3: 'test3',
      4: 'test4',
    	5: 'test5',
    }
    }, 2000);
    
    setTimeout(function() {
    	_this.test = 4;
    }, 4000);
  }
})