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 */
    }
  }
});

Я сталкиваюсь с двумя ошибками: [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 с вводом текста будет добавлен завтра (код оставлен на работе).