[Vue]親コンポーネントの値の更新を子コンポーネントに伝えたい

Question

親コンポーネントで外部のAPI叩いて得た値[wordRanking]を子コンポーネントで、展開し、表示させるプログラムを書いています。
１回目は表示されるのですが、2回目以降表示内容が更新されません。

Vueファイル
・AppPage.vue : 親コンポーネント、API通信はここでおこなう
・Ranking.vue : 親からもらったwordRankingを表示する
・InputWord : API通信するために必要な入力値用のフォームとsubmitボタン

やってみたいが、やり方がわからない解決法
(1)子コンポーネントに＠Watchつけて、wordRankingを更新する
(2)更新した時のイベントハンドラを追加する

get+watchかイベントハンドラの追加の２択かなと考えております。
２回目以降も更新されるようにするにはどうすればいいでしょうか？
そもそも設計自体がよくないのでしょうか。
ご助言いただけると幸いです。

<template>
    <div class="appPage">
        <h1>楽天商品検索＋YahooテキストAPIを使った簡易アプリ</h1>
        <InputWord @click="receiveData"/>
        <div v-if="show">
            <Ranking :word-ranking="wordRanking"/>
        </div>
    </div>
</template>

<script lang="ts">
import { Component,Prop,Vue } from "vue-property-decorator";
import Methods from '../server/methods';
import Ranking from "@/components/Ranking.vue";
import InputWord from "@/components/InputWord.vue";
import Graph from "@/components/Graph.vue";

@Component({
    components: {
        InputWord,Ranking,Graph
    }
})

export default class AppPage extends Vue  {
    public input= "";
    public show = false;
    public wordRanking!:any;


    public async receiveData(input:string){
        this.input = input;
        if(!this.input){
            alert("キーワードを入力してください");
        }else if(this.input.length > 64){
            alert("検索文字数が多すぎます");
        }else{
            const response = await Methods.sendParams(this.input);
            this.wordRanking = response.data;
            console.log(this.wordRanking);
            if(Object.keys(this.wordRanking).length==0){
                alert("商品が見つかりませんでした");
            }else{
                this.show = true;
            }
        }
    }
}

<template>
    <div class="ranking">
        <ol>
            <li v-for="(item,index) in limitCount" :key="index">{{item.word}}</li>
        </ol>
    </div>
</template>

<script lang="ts">
import { Component,Prop,Vue,Watch } from "vue-property-decorator";

@Component
export default class Ranking extends Vue  {
    @Prop()
    public wordRanking!:any;

    @Prop()
    public input!:string;

    get limitCount(){
        return this.wordRanking.slice(0,10);
    } 
}


</script>

<style scoped>
</style>

<template>
    <div class="inputWord">
        <input id="word" v-model="inputText" type="text" placeholder="キーワードを入力">
        <input type="submit" value="検索" @click="setData"/> 
    </div>
</template>

<script lang="ts">
import { Component,Vue,Emit, Prop } from "vue-property-decorator";

@Component
export default class InputWord extends Vue  {
    public inputText = "";

    @Emit()
    public click(input:string){
        console.log(input);
    }

    public setData(){
        this.click(this.inputText);
    }
}

</script>

<style scoped>
</style>

Answer 1

親コンポーネントのwordRankingに初期値いれたら解決しました。
どうやら初期値入れないと更新処理がされないようです。