問題
* 下記のような検索フォームがあります
* input に検索ワードを入力して button を押すと API にリクエストを送ります
* 送信の形式は https://api.example.com/search?q=〇〇 とします
* サーバーからは下記のような JSON が返ってくるのでその内容をdivに展開します
* { id: number, title: string }[] とします
* 一覧の各要素には title が表示されます
* クエリが空の時は何も返ってきません
* サーバーはとても貧弱です、極力サーバーに優しくなるよう処理を書いてください
* CSSに関しては一切考慮しなくてよいです
+-----------+ +--------+
| input | | button |
+-----------+ +--------+
+-----------------------+
| div |
+-----------------------+

備考
* 表示には何のライブラリを使っても良いものとします（ jQuery、React、Vue、Angular、生 JS ）。
* Ajax リクエストにも何を使っても良いものとします（ axios、$.ajax、fetch、生 XHR ）
* メソッド名は多少間違っててもいいですし、設問者に聞いて教えてもらって構いません。
* input や button の class や id は適当に補って構いません

<template>
<div>
    <div>
        <form @submit.prevent="getContents(search_word)">
            <input type="text" v-model="search_word">
            <button type="submit">
        </form>
    </div>
    <div>
        <div v-for="content of contents">
        {{content.title}}
        </div>
    <div>
<div>
</template>


<script lang="ts">
    @Component
    export default class Search extends Vue {
        search_word: string = '';
        contents: string[] = []
        
        async getContents(search_word: string){
        try{
            const {data} = await axios.get('https://api.example.com/search', {
                data:{
                    q: search_word
                }
            });
            }catch(e){
                // 
            }
            this.contents = data;
        }
    }
</script>