Vue.jsとRailsでコンポーネントの切り分け？ができなくて困っています。

こちらのQiitaの記事を参考にしてVue.jsとRailsとAjaxを組み合わせたアプリケーションを作成しています。サイト通りに動かすことはできたのですが、これを少し改良したいと思っています。

GIFで動きを撮りましたこちらのGyazoをみてください

具体的には

現在のコードは

index.html.slim

.container.js-booksIndex
  .row
    - @books.each do |book|
      .card
        span.card-title v-on:click="setBookInfo(#{book.id})"
          = book.title

  .row.info v-show='bookInfoBool'
    .card-content.white-text
      span.card-title
        = "Title: {{ bookInfo.title }}"
      .detail
        = "Author: {{ bookInfo.author }}"
      .detail
        = "Publisher: {{ bookInfo.publisher }}"
      .detail
        = "Genre: {{ bookInfo.genre }}"

= javascript_pack_tag 'books/index'

index.js

import Vue from 'vue/dist/vue.esm';
import axios from 'axios';

new Vue({
  el: '.js-booksIndex',
  data: {
    bookInfo: {},
    bookInfoBool: false
  },
  methods: {
    setBookInfo(id){
      axios.get(`api/books/${id}.json`)
        .then(res => {
          this.bookInfo = res.data; //res.dataにjson形式の詳細ののデータが入っている
          this.bookInfoBool = true;
        });
    }
  }
});

books_controller.rb

class Api::BooksController < ApplicationController
  def show
    @book = Book.find(params[:id])
    render 'show', formats: 'json', handlers: 'jbuilder'
  end
end

json.title     @book.title
json.author    @book.author
json.publisher @book.publisher
json.genre     @book.genre

となっています。
これを最初に説明したようなものにしたいのですが、それぞれのauthorに対してbookInfoBoolに当たるような真偽値を割り振って管理しようと思ったのですが、RailsとJS側でやり取りの仕方がうまく思いつかなくて詰まっています。

author一つ一つをcomponentとして扱って管理できそうですが、具体的なやり方になるとどう書けばいいのかがわかりません。
どなたか教えていただけないでしょうか？