如何将动态数据传递给组件？

Question

我是Vue的新手，所以这可能是愚蠢的。在主要组件中我有这个：

components: [FormSelect],        
data() {
  return {
    listing: {
      country: ''
    }     
  }
}

我想要包含一个组件：

<form-select
  name="country"
  model="listing"
  :onchange="onCountryChange"
  :options="{{ ListingStatic::getCountries()->toSelect()->toJson() }}"
  label="{{ trans('listing::form.country') }}"
  placeholder="{{ trans('listing::form.choose_country') }}">
</form-select>

指定为：

<template>
    <div class="col-md-6 form-group" :class="{'has-error': getModel.errors.has(getName)}" >
        <label for="" class="control-label">{{ label }}</label>
        <v-select
                :value.sync="getModel.fields.getName"
                :on-change="onchange"
                :options="options"
                placeholder="placeholder">
        </v-select>
        <span class="help-block" v-show="getModel.errors.has(getName)">
            @{{ getModel.errors.get(getName) }}
        </span>
    </div>
</template>

<script type="text/ecmascript">
    module.exports = {
        name: 'FormSelect',
        props: ['label', 'placeholder', 'options', 'model', 'onchange'],
        computed: {
            getModel() {
                console.log(this.model)
                return this.model;
            },
            getName() {
                return this.name;
            }
        }
    };
</script>

基本上我想通过将选择字段包装到组件中来概括它 我应该使用计算属性来获得正确的模型和密钥吗？如何使用getModel和getName，以便根据传入的属性返回？