我是Vue新手，当通过单击按钮更新父数据时，我尝试将数据从父组件传递到子组件。父数据正在更新，但更新的数据未传递到子组件。
我的主App.vue文件相当标准：

<template>
  <div id="app">
    <parent></parent>
  </div>
</template>

<script>

import parent from './components/parent.vue';
export default {
  components: {
    'parent':parent
  },
  name: 'app',
  data () {
    return {
    }
  }
}
</script>

父组件有一个按钮，单击该按钮可更新数据，更改将显示在组件中
Parent.vue：

<template>
    <div>
        <h2>Text Input</h2>
        <input v-model="input1"> {{ input1 }}

        <h2>Multi Checkbox</h2>
        <input type="checkbox" id="jack" value="Jack" v-model="input2">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="input2">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="input2">
        <label for="mike">Mike</label>
        <p>Checked names: <pre>{{ input2 }}</pre></p>

        <h2>Radio</h2>
        <input type="radio" id="one" value="One" v-model="input3">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="input3">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{ input3 }}</span>
        <h2>new stuff</h2>
        <button @click="getData()">Push Me</button>

        <p> The data is changing here: {{ allInputs }} </p>

        <child :all-inputs="allInputs"></child >
    </div>
</template>

<script>
import child  from './child .vue';

export default{
    components: {
        'child':child 
    },
    data(){
        return{
            input1: '',
            input2: [],
            input3: '',
            allInputs: ''
        }
    },
    methods: {
        getData(){
            this.allInputs = {
                input1: this.input1,
                input2: this.input2,
                input3: this.input3
            }
        }
    }
}
</script>

但是当我将数据从父级传递给子级时，数据在更新时不显示：
Child.vue：

<template>
    <div class="all-inputs">
        <p>{{ passedData }}</p>
    </div>
</template>

<script>

export default {
    props: ["allInputs"],
    data (){
        return{
            passedData: this.allInputs
        }
    }
}
</script>