Cannot read property 'getAttribute' of nullと出てしまう【Laravel】

Question

LaravelとVueで作っているサイトでページ遷移をしてもコンテンツが表示されず以下のエラーが起きました。

Uncaught TypeError: Cannot read property 'getAttribute' of null
    at Module.<anonymous> (app.js:75414)
    at Module../resources/js/app.js (app.js:75422)
    at __webpack_require__ (app.js:20)
    at Object.2 (app.js:76293)
    at __webpack_require__ (app.js:20)
    at app.js:84
    at app.js:87

app.jsのgetAttributeがnullになっているということで、app.jsを確認した際contentが空になっていることがわかり、原因を探った結果.querySelector('meta[name="api-token"]')のAPITokenあたりが怪しいかなと思い見直してみましたが、皆目わかりません。
app.blade.phpで埋め込まれたトークンを設定して、ユーザー認証が行われていれば、どのvueファイルでもユーザー認証に必要なAPIのトークンをリクエストヘッダーに設定できるというものです。
足りない情報があれば追記します。よろしくお願いします。

app.js

Vue.prototype.$http = axios; 

axios.defaults.headers.common['Authorization'] = "Bearer " + document
  .querySelector('meta[name="api-token"]')
  .getAttribute("content");

Vue.use(SocialSharing);

new Vue({
    router: router,
  
    components: {
      app: MainPage
    }
  
  }).$mount('#app')

Home.vue

<template>

  <div class="container is-fullhd">
      
      </main>

      <div class="container">
        <div class="notification">
          <div class="columns">
            <div class="column">
            　
                  <br/>
   
                    <div>
                      <form>
                        <button @click.stop.prevent="goQuiz()" class="button is-info is-centered">クイズ</button>
                      </form>
                    </div>
          
               
                <section class="home__notice">
                  <h2 class="title is-4">
                    お知らせ
                  </h2>
                  <dl v-for="(info, index) in information" :key="index">
                    <dt>{{info.created_at}}</dt>
                    <dd>{{info.information}}</dd>
                  </dl>
                </section>
            </div>
          </div>
        </div>
      </div>
  </main>

</div>

</template>

<script>


export default {
  data() {
    return {
      information: [],
   
    };
  },

  mounted() {
    this.$http.get("/api/information").then(response => {
      this.information = response.data;
    });
  },
  methods: {
    goQuiz() {
      this.$router.push("/quiz");
    },
    
    },
  }
};
</script>

LoginController.php(api_tokenをセッションに保存する処理)

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Support\Str;
use Illuminate\Http\Request;

class LoginController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Login Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles authenticating users for the application and
    | redirecting them to your home screen. The controller uses a trait
    | to conveniently provide its functionality to your applications.
    |
    */

    use AuthenticatesUsers;

    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/';

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    protected function authenticated(Request $request)
    {
      $token = Str::random(80);
  
      $request->user()->forceFill([
          'api_token' => hash('sha256', $token),
      ])->save();
  
      $request->user()->update(['api_token' => str_random(60)]);
  
      session()->put('api_token', $token);
    }


    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }
}

Seederで作成したinformationやquizのデータが表示されていないのでルーティングがおかしいのではと思いましたがわかりませんでした。

api.php

Route::group(['middleware' => ['api']], function () {
    Route::get('information', 'Api\InformationController@index');
    Route::get('quiz', 'Api\QuizController@show');
    Route::get('ranking', 'Api\RankingController@index');  
  });

Answer 1

ここのLoginController.phpで独自のtoken を生成してセッションにセットされているということで、

     $token = Str::random(80);

      $request->user()->forceFill([
          'api_token' => hash('sha256', $token),
      ])->save();

X-CSRF-TOKENを取得したいという事では無いのですね？
X-CSRF-TOKEN

csrf-tokenであればLaravelが埋め込んでくれます。

<meta name="csrf-token" content="...">

しかし、独自トークンであれば、ご自身でmetaタグを生成して埋め込む仕組みが必要になるかと思います。
一度、Choromeのデバッグ機能を使って生成されたHTMLにapi-tokenが無い事を確認されてはいかがでしょうか？