v-forを用いて、データを表示したい

Question

現在、google bools apiを用いた本の検索と気になる（保管）機能の実装したサイトを制作しております。

現状できていること）
・検索を押して本を表示させること
・気になるボタンを押して、firebaseにidとtitleを保管すること

やりたいこと）
気になるボタンのクリックイベントでapi内のIDとタイトルを画面上の気になるリストに登録する

詰まっているところ）
idとtitleが画面に表示されない

上記において、アドバイスを頂けると助かります。
よろしくお願いいたします。

HTML

<div class="hamburger-menu" id="favoshelf">
        <input type="checkbox" id="menu-btn-check">
        <label for="menu-btn-check" class="menu-btn"><span></span></label>
        <div class="menu-content">
            <ul>
                <li>
                <p>気になるリスト</p>
                </li>
                <li v-for="booksFav in booksFavs"
                    v-bind:key="booksFav">
                  　{{booksFav}}
                </li>
            </ul>
        </div>
    </div>

Javascript

 data: {
         booksFavs:{
           
         }
      },

    addFavorite(setId,setTitle) {
      //気になるボタンの本のIDとtitleを取得する
      let setDatas = {
        id    : setId,
        title : setTitle
      };
      //IDとtitleをfirebaseに登録する
      firebase
        .database()
        .ref('my-key')
        .push(setDatas);

      // idとtitleを取得 
      this.booksFavs = firebase
        .database()
        .ref('my-key')
        .orderByChild('setData');
    }