VueJS 2：无法为输入组件设置双向数据绑定

Question

对于Vue来说还很陌生，当我无法在组件内部的输入/选择标签和Vue实例内部的数据之间建立绑定时，我就遇到了问题。

示例1：

html

<sidebar-select
  :title="UI.sidebar.localeSelect.title"
  :name="UI.sidebar.localeSelect.name"
  :options="UI.sidebar.localeSelect.options"
  :vmodel="selectedLocale">
</sidebar-select>
<sidebar-select
  :title="UI.sidebar.currencySelect.title"
  :name="UI.sidebar.currencySelect.name"
  :options="UI.sidebar.currencySelect.options"
  :vmodel="state.currency">
</sidebar-select>

js - component

Vue.component('sidebar-select', {
  props: ['title', 'name', 'options', 'vmodel'],
  data() {
    return {
      vmodel: this.value
    }
  },
  template: `<div class="col-xs-12 col-md-6" style="padding-left:0;padding-right:30px">
  <div class="cg">
    <label :for="name"><h4>{{ title }}</h4></label>
    <select class="form-control form-horizontal" style="max-width: 300px" 
      :name="name"
      v-model="vmodel">
      <option v-for="option in options" :value="option.value">{{ option.text }}</option>
    </select>
  </div>
</div>`
});

js - data part

var app = new Vue({
  el: '#app',
  data: {
    selectedLocale: 'ru',
    user: {
      'ru': {
        name: 'Саша',
        surname: 'Найдович',
        position: 'программист',
        phone: '1234567',
        email: 'jdlfh@jdlbf.com'
      },
      'en': {
        name: 'Alex',
        surname: 'Naidovich',
        position: 'frontend',
        phone: '1234567',
        email: '1234567@email.eu'
      }
    },
    state: {
      locale: 'ru',
      currency: '€',
      /* *** */
    },
    UI: {
      sidebar: {

        localeSelect: {
          title: 'Язык КП',
          name: 'offer-lang',
          options: [
            {value: 'en', text: 'International - English'},
            /* *** */
            {value: 'ru', text: 'Русский'}
          ],
          preSelected: 'ru',
          stateprop: 'locale'
        },

        currencySelect: {
          title: 'Валюта КП',
          name: 'offer-curr',
          options: [
            {value: '$', text: '$ (Dollar)'},
            {value: '€', text: '€ (Euro)'},
            {value: '₤', text: '₤ (UK Фунт)'},
            {value: '₽', text: '₽ (RUS Рубль)'},
            {value: '', text: 'Ввести вручную'}
          ],
          preSelected: '€',
          stateprop: 'currency'
        },
      } /* etc */
    }
  }
});

我遇到了2个错误：初始化时发生[Vue warn]: The data property "vmodel" is already declared as a prop. Use prop default value instead.，而我尝试更改选择时发生了[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "vmodel"。我想知道我在做错什么，对于这种情况，最好的做法是什么。

更新：主要问题是关于将v-model作为参数传递给v-model时如何正确使用props双向数据绑定组件。

要进行更新：明天将添加带有文本输入的示例2（代码将留在工作中）。