Vue 更新子组件中的输入值

Question

我正在将数据从 #app 发送到 modal.vue 组件，但我无法更改模态组件内的输入值

这是我发送数据的app.js

import Vue from "vue";
import modal from "./components/modal";


var vm = new Vue({
    el: "#app",
    components: {
        'modal' : modal
    },
    data: {
        showModal: false,
    },
    methods: {
        openModal(value){
            this.showModal = true;
            modal.methods.setInputValue(value)
        }
    }
});

<块引用>

在 modal.vue 内，我可以访问从 app.js 发送的数据

<script>
export default {
    name: 'modal',
    data:{
        input : {
            name : 'Default name',
        }
    },
    methods: {
        setInputValue: function (val) {
            console.log('setInputValue', val)
            this.input.name =  val
        },
    }
};
</script>

问题是我不能改变输入值

错误是

无法设置未定义的属性“名称”

和

无法读取未定义的属性“名称”

这是我在 modal.vue 中的输入

<input type="text" :value="input.name">

如何更新输入值？ 谢谢