どうもjackです。
今回は取得したデータを画面に表示させる処理を書いていきましょう！！
受け取ったデータから下記データを表示したいと思います。

・アーティスト名
・フォロワー数
・人気

ではそれぞれのデータを取り出しましょう。

src/components/Search.vue

<template>
  <div class="search">
    <input
        placeholder="enter artist name"
        v-model="search_artist_name">
    <button
      type="button"
      @click="seach_artist">
      search
    </button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'search',
  artist_data: [],
  data(){
    return {
      artist_data:'',
      search_artist_name: '',
      searched_artist_name: '',
      followers: '',
      popularity: '',
    }
  },
  methods:{
    // アーティストを検索
    seach_artist: function(){
      axios.get("https://api.spotify.com/v1/search",{
        headers:{"Authorization": "Bearer トークン"},
        params:{"q": this.search_artist_name , "limit": "1", "offset": "0", "type": "artist", "market": "US"}
      }).then(response=>{
        this.artist_data = response.data;
        this.retrieve_data();
      }).catch(error => console.log(error))
    },
    // 取得したアーティストデータから必要なデータを取り出す
    retrieve_data: function(){
      this.searched_artist_name = this.artist_data.artists.items[0].followers.name;
      this.followers = this.artist_data.artists.items[0].followers.total;
      this.popularity = this.artist_data.artists.items[0].popularity;
    }
  }
}
</script>

ではそれぞれのデータを表示しましょう！

src/components/Search.vue

<template>
  <div class="search">
    <input placeholder="enter artist name" 
    v-model="search_artist_name" />
    <button type="button" @click="seach_artist">
      search
    </button>
    <table class="table">
      <thead class="thead-dark">
        <tr>
          <th scope="col">artist_name</th>
          <th scope="col">followers</th>
          <th scope="col">popularity</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>{{ searched_artist_name }}</th>
          <td>{{ followers }}</td>
          <td>{{ popularity }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "search",
  data() {
    return {
      search_artist_name: "",
      artist_data:[],
      searched_artist_name: "",
      followers: "",
      popularity: ""
    };
  },
  methods: {
    // アーティストを検索
    seach_artist: function() {
      axios
        .get("https://api.spotify.com/v1/search", {
          headers: {
            Authorization:
              "Bearer トークン"
          },
          params: {
            q: this.search_artist_name,
            limit: "1",
            offset: "0",
            type: "artist",
            market: "US"
          }
        })
        .then(response => {
          this.artist_data = response.data;
          this.retrieve_data();
        })
        .catch(error => console.log(error));
    },
    // 取得したアーティストデータから必要なデータを取り出す
    retrieve_data: function() {
      this.searched_artist_name = this.artist_data.artists.items[0].name;
      this.followers = this.artist_data.artists.items[0].followers.total;
      this.popularity = this.artist_data.artists.items[0].popularity;
    }
  }
};
</script>

では早速、検索してみましょう！！

検索とテーブルがくっついてて嫌なので離そう！

src/components/Search.vue

<template>
  <div class="search">
    <input placeholder="enter artist name"
    id="search_box" 
    v-model="search_artist_name" />
    <button type="button" @click="seach_artist">
      search
    </button>
    <table class="table">
      <thead class="thead-dark">
        <tr>
          <th scope="col">artist_name</th>
          <th scope="col">followers</th>
          <th scope="col">popularity</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>{{ searched_artist_name }}</th>
          <td>{{ followers }}</td>
          <td>{{ popularity }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style>
#search_box {
  margin-bottom: 15px;
}
</style>

<script>
import axios from "axios";
export default {
  name: "search",
  artist_data: [],
  data() {
    return {
      search_artist_name: "",
      searched_artist_name: "",
      followers: "",
      popularity: ""
    };
  },
  methods: {
    // アーティストを検索
    seach_artist: function() {
      axios
        .get("https://api.spotify.com/v1/search", {
          headers: {
            Authorization:
              "Bearer トークン"
          },
          params: {
            q: this.search_artist_name,
            limit: "1",
            offset: "0",
            type: "artist",
            market: "US"
          }
        })
        .then(response => {
          this.artist_data = response.data;
          this.retrieve_data();
        })
        .catch(error => console.log(error));
    },
    // 取得したアーティストデータから必要なデータを取り出す
    retrieve_data: function() {
      this.searched_artist_name = this.artist_data.artists.items[0].name;
      this.followers = this.artist_data.artists.items[0].followers.total;
      this.popularity = this.artist_data.artists.items[0].popularity;
    }
  }
};
</script>

一応、検索結果がゼロ件の表示も用意しますか。

src/components/Search.vue

<template>
  <div class="search">
    <input placeholder="enter artist name"
    id="search_box" 
    v-model="search_artist_name" />
    <button type="button" @click="seach_artist">
      search
    </button>
    <table class="table">
      <thead class="thead-dark">
        <tr>
          <th scope="col">artist_name</th>
          <th scope="col">followers</th>
          <th scope="col">popularity</th>
        </tr>
      </thead>
      <tbody>
        <template v-if="artist_data.length == 0">
          <td>
          </td>
          <td style="text-align:;">
            no_data
          </td>
        </template>
        <tr>
          <td>{{ searched_artist_name }}</td>
          <td>{{ followers }}</td>
          <td>{{ popularity }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style>
#search_box {
  margin-bottom: 15px;
}
</style>

<script>
import axios from "axios";
export default {
  name: "search",
  artist_data: [],
  data() {
    return {
      artist_data:"",
      search_artist_name: "",
      searched_artist_name: "",
      followers: "",
      popularity: ""
    };
  },
  methods: {
    // アーティストを検索
    seach_artist: function() {
      axios
        .get("https://api.spotify.com/v1/search", {
          headers: {
            Authorization:
              "Bearer トークン"
          },
          params: {
            q: this.search_artist_name,
            limit: "1",
            offset: "0",
            type: "artist",
            market: "US"
          }
        })
        .then(response => {
          this.artist_data = response.data;
          this.retrieve_data();
        })
        .catch(error => console.log(error));
    },
    // 取得したアーティストデータから必要なデータを取り出す
    retrieve_data: function() {
      this.searched_artist_name = this.artist_data.artists.items[0].name;
      this.followers = this.artist_data.artists.items[0].followers.total;
      this.popularity = this.artist_data.artists.items[0].popularity;
    }
  }
};
</script>

終了でーーす。
お疲れ様でした。
気が向いたらPythonでサーバー作ってCRUDでもしますか。