laravel + vue でのSPAでDBのデータを取得したい

前提・実現したいこと

Vue初学者です。
laravel8.12 + Vue2.5.17 + Vue-router3.4.9でSPAの実装をしています。
写真ギャラリーにドラッグアンドドロップで写真を保存したいと思っています。
また、写真ギャラリー内はカテゴリーごとに写真が管理されており、写真ギャラリートップ->写真カテゴリーと遷移し、写真をドラッグアンドドロップできる形となっております。
axiosを用いて、写真の保存までは出来たのですが、写真を取得することが出来ません。
getでそのカテゴリーに属する写真を取得しているのですが、うまく行かず、帰ったきた値をconsole.logで表示するとなぜか、viewのbladeファイルが表示されてしまいます。

なお、ユーザー側とadmin側を両方SPAとして実装しております。

何が原因かわからず詰まっております。
何かアドバイスをいただけると幸いでございます。

発生している問題・エラーメッセージ

エラーメッセージ

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title></title>
  <!-- CSRF Token -->
  <meta name="csrf-token" content="MYJ616wFLi9t1VZHJdPzRdVVo7FJMc0xOv2wA58N">
   <!-- Scripts -->
   <script src="http://localhost:8383/js/admin.js" defer></script>
   <!-- Fonts -->
   <link rel="dns-prefetch" href="//fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
   <!-- Styles -->
   <link href="/css/app.css" rel="stylesheet">
   <link href="http://localhost:8383/css/common.css" rel="stylesheet">
   <link href="http://localhost:8383/css/header.css" rel="stylesheet">
   <link href="http://localhost:8383/css/footer.css" rel="stylesheet">
   <link href="http://localhost:8383/css/main.css" rel="stylesheet">
   <link href="http://localhost:8383/css/blogs.css" rel="stylesheet">
   <link href="http://localhost:8383/css/adminMedia.css" rel="stylesheet">
   <link href="http://localhost:8383/css/adminMediaTop.css" rel="stylesheet">
</head>
<body>
  
<div id="admin">

</div>


</body>
</html>

これがconsoleに表示される。

migrationファイル

media_categories_table

<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateMediaCategoriesTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('media_categories', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('name'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('media_categories'); } } medias_table <?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateMediasTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('medias', function (Blueprint $table) { $table->bigIncrements('id'); $table->foreignId('slider_id')->nullable()->constrained('sliders')->onDelete('set null'); $table->foreignId('media_category_id')->constrained('media_categories')->onDelete('cascade'); $table->string('pass'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('medias'); } } ``` ### Model MediaCategory.php <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class MediaCategory extends Model { use HasFactory; protected $fillable = [ 'name' ]; } Media.php <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; use App\Models\MediaCategory; class Media extends Model { use HasFactory; protected $fillable = ['pass', 'slider_id', 'media_category_id']; public function mediaCategories() { return $this->belongsTo(MediaCategory::class, 'media_categories'); } } ###Controller AdminController public function getMedias($mediaCategoryId) { $medias = $this->media->where('id', $mediaCategoryId)->get(); return json_encode($medias); } ###Vueファイル <template> <div> <div class="container"> <div class="media-wrapper"> <div class="media-block"> <div class="media-area" @dragenter="dragEnter" @dragleave="dragLeave" @dragover.prevent @drop.prevent="dropFile" :class="{enter: isEnter}"> <input type="file" ref="file"> </div> </div> <div> <div v-for="photo in photos"> <p>{{ photo.pass }}</p> </div> </div> <button @click="show" class="btn btn-primary">カテゴリー名変更</button> <div v-if="isshow"> <div class="form-group"> <input v-model="form.name" type="text" class="col-4 form-control m-3"> <button type="submit" @click="editMediaCategory" class="col-1 btn btn-success form-control m-3">create</button> </div> </div> <button @click="deleteMediaCategory" class="btn btn-danger">カテゴリー削除</button> </div> </div> </div> </template> <script> export default { props: {id: Number}, data: function() { return { isEnter: false, form: {}, photos: {}, files: [], } }, methods: { getMedias() { axios.get('api/getMedias' + this.id).then(response => { this.photos = response.data console.log(this.photos) }) }, show() { this.isshow = true; }, dragEnter() { this.isEnter = true; }, dragLeave() { this.isEnter = false; }, dragOver() { console.log('DragOver') }, dropFile() { this.files = [...event.dataTransfer.files] const formData = new FormData(); for (let i = 0; i < this.files.length; i += 1) { console.log(this.files[i]); formData.append('file', this.files[i]); axios.post('api/post/' + this.id, formData, { headers: { 'content-type': 'multipart/form-data' } }).then(response => { console.log(resonse.data); }) } this.isEnter = false; }, editMediaCategory() { axios.post('api/edit/' + this.id, this.form).then(response => { this.$router.push({name: 'medias'}) }) }, openModal() { this.modal = ture }, closeModal() { this.modal = false }, deleteMediaCategory(){ axios.delete('api/delete/' + this.id).then(response => { this.$router.push({name: 'medias'}) }) }, }, mounted() { this.getMedias() } } </script> ### ルーティング api.php Route::get('/topNotices', [ApiUserController::class, 'showTopNotices']); Route::get('/nextMatch', [ApiUserController::class, 'showNextMatch']); Route::get('/topBlogs', [ApiUserController::class, 'showTopBlogs']); Route::get('/topResult', [ApiUserController::class, 'showTopResult']); Route::get('/sns', [ApiUserController::class, 'getYoutubePass']); Route::prefix('admin')->group(function (){ // メデイアギャラリー一覧表示 Route::get('api/medias', [AdminController::class, 'getMediaCategory']); // メデイアギャラリー追加 Route::post('api/medias/create', [AdminController::class, 'addMediaCategory']); // メディアカテゴリー編集 Route::post('media/api/edit/{id}', [AdminController::class, 'editMediaCategory']); // メディアカテゴリー削除 Route::delete('media/api/delete/{id}', [AdminController::class, 'deleteMediaCategory']); // メディアカテゴリー詳細表示 Route::get('media/api/getMedia/{id}', [AdminController::class, 'getMedias']); // メディア追加 Route::post('media/api/post/{id}', [AdminController::class, 'postMedia']); }); web.php // ユーザー側 Route::get('/{any}', function () { return view('user.top'); })->where('any','^(?!admin/).*'); // admin側 Route::get('/admin/{any?}', function() { return view('admin.index'); })->where('any', '.*');