Nuxt3でGoogle Places API を使用して取得したデータを<template>内で表示させたいです。

Question

Nuxt3でGoogle Places APIを用いて飲食店の名前を取得して<template>内に表示させたいです。下記のresult_shop.value = resultの部分ではresult_shopにデータは取得できているのですが、最後のreturnで返している変数であるresult_shopが「not defined」になり、template内のv-forのresult_shopも空なので表示されません。
このif文の中のresult_shopにアクセスしてreturnでtemplateにデータを渡して表示させる方法をご教授いただければ幸いです。

ソースコード

<template>
<div v-for="shop in result_shop">
  <div>{{ shop.name }}</div>
</div>
           
</template>

<script>
import color from "@/assets/json/color.json";
import city from "@/assets/json/pref_city.json";
import { Loader } from "@googlemaps/js-api-loader";
import { onMounted, ref } from "vue";
export default {
  setup() {
   let result_shop = ref([]);
    const loader = new Loader({
      apiKey: "xxxxxxxxxxxxxxxx",
      version: "weekly",
      libraries: ["drawing", "geometry", "places", "visualization"],
    });

    onMounted(() => {
      loader.load().then((google) => {
        const geocoder = new google.maps.Geocoder();
        let lat = "";
        let lng = "";
        geocoder.geocode(
          {
            //クエリパラメータを使用
            address: "東京都 港区"
          },
          (result, status) => {
            if (status == "OK") {
              //取得した緯度・経度を使って周辺検索する
              lat = result[0].geometry.location.lat();
              lng = result[0].geometry.location.lng();
        
            }
          }
        );

        const lat_lng = new google.maps.LatLng(
          parseFloat(lat),
          parseFloat(lng)
        );
        const map = new google.maps.Map(document.createElement("div"));
        const service = new google.maps.places.PlacesService(map);
        service.textSearch(
          {
            location: lat_lng,
            radius: 2000,
            query: "飲食店 東京都 港区" ,
            language: "ja",
          },
          (result, status) => {
            if (status == "OK") {
              result_shop.value = result;
            }
          }
        );
      });
    });
    return { result_shop };
  },
};
</script>

Answer 1

次の日になると問題なく動きました。ありがとございます。

Answer 2

onMounted の中だとうまく行かないとかですかね？
setupの中に外部問い合わせを書いた動作例

<script lang="ts">
export default defineComponent({
  async setup() {
    const { data: items } = await useFetch('https://jsonplaceholder.typicode.com/todos/')
    return {
      items
    }
  },
})
</script>

<template>
  <ul>
    <li v-for="item in items">
      {{ item.id }} {{ item.title }}
    </li>
  </ul>
</template>

Answer 3

data 定義がないからとかですかね？
こんな風にdataを作っておいて $this.result_shop = xxx; みたいに変数代入できませんか

<template>
  <ul>
    <li v-for="item in items">
      {{ item.id }} {{ item.title }}
    </li>
  </ul>
</template>

<script>

export default {
  data: () => {
    return {
      items: [],
    };
  },
  async mounted() {
    const data = await fetch('https://jsonplaceholder.typicode.com/todos/')
    const json = await data.json()
    this.items = json
  }
};
</script>

Comments

[uaaa0348]

回答ありがとうございます。
Vue2だとそうなのですが、Nuxt3なのでVue3のcompositonAPIの書き方で行いたいと考えています。