puppeteerで取得した文字列をフロントに表示させたい Nuxt.js

Nuxt.jsでPuppeteerを使用しており、backendでexpressを使用。
puppeteerにより取得した文字列情報をフロントに表示させたいのですが、受け渡しがうまく行かず、数時間悩んでいます。
記事を探していても、js単体で取得する記事はあるのですが、jsで取得した情報をvueに表示させる記事が見つからず、聞きました。name,itemName,price,material,brandStyleIdを表示させたいです。
よろしくお願いいたします。

scraping.js

scraping.js
1const puppeteer = require('puppeteer');
2
3(async () => {
4  const browser = await puppeteer.launch({
5    headless: false,
6    slowMo: 50,
7  });
8
9  const page = await browser.newPage();
10
11
12  await page.goto('https://www.farfetch.com/jp/shopping/men/sacai--item-15466999.aspx?storeid=9359');
13
14  let farfetchBrandName = "#bannerComponents-Container > h1 > span._0ab287 > a > span";
15  let farfetchItemName = "#bannerComponents-Container > h1 > span._d85b45._3c73f1._d85b45";
16  let farfetchItemPrice = "#slice-pdp > div > div._53a765 > div._d47db0 > div._3eed2e > div._7dad7e > div > span";
17  let farfetchItemMaterial = "#panelInner-0 > div > div:nth-child(2) > div > div:nth-child(1) > p";
18  let farfetchItemBrandStyleId = "#panelInner-0 > div > div:nth-child(2) > div > div:nth-child(3) > p > span";
19
20  const name = await page.$eval(farfetchBrandName, item => {
21    return item.textContent;
22  });
23
24  const itemName = await page.$eval(farfetchItemName, item => {
25    return item.textContent;
26  });
27
28  const price = await page.$eval(farfetchItemPrice, item => {
29    return item.textContent;
30  });
31
32  const material = await page.$eval(farfetchItemMaterial, item => {
33    return item.textContent;
34  });
35
36  const brandStyleId = await page.$eval(farfetchItemBrandStyleId, item => {
37    return item.textContent;
38  });
39
40  console.log(name);
41  console.log(itemName);
42  console.log(price);
43  console.log(material);
44  console.log(brandStyleId);
45
46  await browser.close();
47
48})();
49

index.js

index.js
1const express = require('express');
2const app = express();
3const scraping = require('./scraping')
4
5app.get('/scraping', async(req, res) => {
6  const data = await scraping.brand()
7  res.json(data)
8})
9
10module.exports = {
11  path:'/api',
12  handler: app
13}
14

scraping.vue

<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        FARFETCH PUPPETEER
      </h1>
      <div class="main">
        <h2>アイテム詳細</h2>
        <p class="time">更新日時：{{ data.datetime }}</p>
        <table border="1">
          <thead>
            <tr>
              <th>商品情報</th>
            </tr>
          </thead>
          <tbody>
            <td>{{ brand.name }}</td>
            <td>{{ brand.itemName }}</td>
            <td>{{ brand.price }}</td>
            <td>{{ brand.material }}</td>
            <td>{{ brand.brandStyleId }}</td>
          </tbody>
        </table>
        <button　@click="reload">RELOAD</button>
      </div>
    </div>
  </div>
</template>



<script>
export default {
  async asyncData({ $axios }) {
    const data = await $axios.$get('/api/scraping')
    return { data }
  },

  data: () => ({
    data: []
  }),

  methods: {
    reload() {
      location.reload()
    }
  }
}
</script>

<style>

.article-top {
  text-align: center;
}

</style>