Rails APIモードで作成したJSONをVue.jsでレンダリングしたい

お世話になります。

使用環境：WSL2　Ubuntu20.04
Ruby2.6.8,Ruby on Rails 6.1.4,Vue.js2.6.14

https://qiita.com/Moo_Moo_Farm/items/075e970287cb1aaf52c1
上記の記事を参考に、Vue router導入前まで進行しました。

ですが、railsで作成できたjsonをVue.jsで拾う事ができません。
作成初期に動作テストした際のapp.vueですが、

Vue.js
1<template>
2  <div id="app">
3    <p>{{ message }}</p>
4  </div>
5</template>
6
7<script>
8export default {
9  data: function () {
10    return {
11      message: "Hello Vue! on Rails"
12    }
13  }
14}
15</script>
16
17<style scoped>
18p {
19  font-size: 2em;
20  text-align: center;
21}
22</style>
23

上記のコードを実行して localhost:5000 に移動するとmessageが表示され、vue devtoolsも動いているのですが、作成を進めて localhost:5000/api/books に移動すると、devtoolsのアイコンが灰色になり動いていません。vue.jsがインポートできていないのか他の原因なのかわからない状況です。
他に必要なファイルがありましたらご指示下さい。

https://www.google.com/search?q=vue.js+%E3%82%A8%E3%83%B3%E3%83%88%E3%83%AA%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88&oq=vue.js+%E3%82%A8%E3%83%B3%E3%83%88%E3%83%AA%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88&aqs=chrome..69i57.4877j0j7&sourceid=chrome&ie=UTF-8

Vue側のエントリポイントの書き方の問題なのかと思い、上記の記事などと照らし合わせて書き換えてみたのですが、成功しません。どのような対応をすればいいかご教示下さい。よろしくお願いします。