想要在Vue中實現音樂搜索功能，需要使用第三方API來獲取音樂數據。目前比較常用的音樂API有網易云音樂API和QQ音樂API，這里我們以網易云音樂API為例。

const axios = require('axios'); // 引入axios
const musicAPI = {
searchMusic(keyword) { // 搜索音樂
const url = `https://musicapi.leanapp.cn/search?keywords=${keyword}`;
return axios.get(url).then(res =>res.data);
},
}
export default musicAPI; // 導出API

首先我們需要引入axios，axios是一個基于Promise的HTTP請求庫，可以用在瀏覽器和node.js中。然后定義一個musicAPI對象，其中searchMusic方法用于搜索音樂，根據輸入的關鍵詞調用API，獲取數據并返回。最后通過export default導出API。

<template>
<div class="search">
<input v-model="keyword" @keydown.enter="getMusic" placeholder="輸入關鍵詞搜索音樂">
<ul>
<li v-for="(music, index) in musicList" :key="index">
{{ music.name }} - {{ music.artists[0].name }}
</li>
</ul>
</div>
</template>
<script>
import musicAPI from '../api/musicAPI';
export default {
data() {
return {
keyword: '', // 搜索關鍵詞
musicList: [], // 音樂列表
}
},
methods: {
async getMusic() { // 獲取音樂列表
if (!this.keyword) return;
const res = await musicAPI.searchMusic(this.keyword);
this.musicList = res.result.songs;
},
},
};
</script>

接著，在Vue的組件中定義一個搜索框和一個音樂列表，使用v-model指令實現雙向綁定，當用戶輸入關鍵詞并按下回車鍵時，調用getMusic方法獲取音樂列表，通過await關鍵字等待API返回數據后修改音樂列表。需要注意的是，搜索關鍵詞不能為空。

此時，我們已經實現了一個簡單的音樂搜索功能，但是還可以進一步優化。例如，在請求數據時添加loading動畫、在搜索框中添加清空按鈕等。希望讀者可以根據實際需要自行添加優化。