Vue charts是一種流行的Javascript圖表庫，可以輕松地在Vue項目中集成各種圖表。由于大多數Vue圖表庫都只提供了同步數據加載，因此Vue charts提供了異步加載選項，可以更靈活地處理數據。

首先，為了實現異步加載，需要定義一個函數來獲取數據。可以使用axios或者fetch等方法獲取數據。在這個例子中，我們可以使用axios庫：

async function getData() {
try {
const response = await axios.get('數據的url');
return response.data;
} catch (error) {
console.error(error);
}
}

當數據被獲取后，我們可以使用Vue的$nextTick方法來渲染數據到圖表上。這個方法會確保所有已更新的狀態和屬性都在下一個視圖更新周期中同步。同時，要確保Vue chart組件已經加載：

import VueCharts from 'vue-chartjs';
export default {
extends: VueCharts.Line,
mounted () {
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Sales Value',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39]
}
]
}, {responsive: true, maintainAspectRatio: false});
},
methods: {
async updateChart() {
const data = await getData();
this.$data._chart.destroy();
this.renderChart({labels: data.labels, datasets: data.datasets},
{responsive: true, maintainAspectRatio: false});
}
}
};

以上代碼會渲染一個基礎的圖表，然后在updateChart方法中重新渲染圖表數據。在此方法中，getData()函數被調用，并等待數據返回。一旦數據返回，renderChart()方法會更新圖表數據并重新渲染。由于_chart.destroy()方法會銷毀當前的圖表實例，因此在每次更新之前需要調用該方法。

最后，在Vue的模板中，我們可以調用updateChart方法來動態更新圖表數據。例如，我們可以使用點擊按鈕的事件觸發更新：

在這個例子中，我們演示了如何使用Vue chart異步加載和更新數據。這種方法允許我們從外部數據源動態地加載數據，可以更靈活地處理數據。