如何在父组件中解析数据

我使用Vue v1.0.28和vue-resource调用我的API并获得资源数据。所以我有一个父组件，叫做Role，它有一个子组件InputOptions。它有一个遍历角色的foreach。

所有这一切的大局是一个可以选择的项目列表，所以API可以返回预先选择的项目，因为用户以前保存/选择了它们。关键是我不能填充InputOptions的selectedOptions。我怎样才能从父组件获得这些信息呢?这是正确的做法，对吗?

我在这里粘贴了一段代码，试图更好地显示我的问题:

role.vue

<template>
    <div class="option-blocks">
    <input-options
        :options="roles"
        :selected-options="selected"
        :label-key-name.once="'name'"
        :on-update="onUpdate"
        v-ref:input-options
    ></input-options>
    </div>
</template>
<script type="text/babel">
    import InputOptions from 'components/input-options/default'
    import Titles from 'steps/titles'
    export default {
        title: Titles.role,
        components: { InputOptions },
        methods: {
            onUpdate(newSelectedOptions, oldSelectedOptions) {
                this.selected = newSelectedOptions
            }
        },
        data() {
            return {
                roles: [],
                selected: [],
            }
        },
        ready() {
            this.$http.get('/ajax/roles').then((response) => {
                this.roles = response.body
                this.selected = this.roles.filter(role => role.checked)
            })
        }
    }
</script>

InputOptions

<template>
    <ul class="option-blocks centered">
        <li class="option-block" :class="{ active: isSelected(option) }" v-for="option in options" @click="toggleSelect(option)">
            <label>{{ option[labelKeyName] }}</label>
        </li>
    </ul>
</template>
<script type="text/babel">
    import Props from 'components/input-options/mixins/props'
    export default {
        mixins: [ Props ],
        computed: {
            isSingleSelection() {
              return 1 === this.max
            }
        },
        methods: {
            toggleSelect(option) {
                //...
            },
            isSelected(option) {
                return this.selectedOptions.includes(option)
            }
        },
        data() {
            return {}
        },
        ready() {
            // I can't figure out how to do it
            // I guess it's here where I need to get that information,
            // resolved in a promise of the parent component
            this.$watch('selectedOptions', this.onUpdate)
        }
    }
</script>

道具

export default {
    props: {
        options: {
            required: true
        },
        labelKeyName: {
            required: true
        },
        max: {},
        min: {},
        onUpdate: {
            required: true
        },
        noneOptionLabel: {},
        selectedOptions: {
            type: Array
            default: () => []
        }
    }
}

编辑

我现在在控制台中得到这个警告:

[Vue warn]: Data field "selectedOptions" is already defined as a prop. To provide default value for a prop, use the "default" prop option; if you want to pass prop values to an instantiation call, use the "propsData" option. (found in component: <default-input-options>)