Vue3 - Table not updating responsively? Axios request

Question

I am trying to dynamically update a table based on a google maps query of nearby areas. The query is returning the right data in the onMounted lifecycle, but does not return the appropriate data or display it when it comes time to render.

I have tried making it reactive, a ref, moving it to another method and much more.

The axois request actually is logging the relevant data, as I mark in the program below, but does not actually return the axios get value when rendering.

  <script>
    import { reactive, ref, onMounted } from "vue";
    import Vue3Geolocation from "vue3-geolocation";
    const axios = require("axios");
    export default {
      name: "App",
      setup() {
        let fjson = ref(null);
    
        onMounted(async () => {
          const URL = google query url
          fjson.value = await axios.get(URL, {
            headers: {
              "X-Requested-With": "XMLHttpRequest",
            },
          });
    
          fjson.value = JSON.parse(JSON.stringify(fjson.value));
    
          **** THIS LOGS THE RIGHT VALUE! ****
          console.log(fjson.value.data.results);
    
          if (fjson.value.data.results.length > 2) {
            for (let index = 0; index < 3; index++) {
              console.log(fjson.value.data.results[index]);
            }
          }
    
          **** ALSO WORKS! ****
          fjson.value.data.results.forEach((place) => {
            const lat = place.geometry.location.lat;
            const lng = place.geometry.location.lng;
            let marker = new google.maps.Marker({
              position: new google.maps.LatLng(lat, lng),
              map: map,
            });
    
            google.maps.event.addListener(marker, "click", () => {
              infowindow.setContent(
                `<div class="ui header">${place.name}</div><p>${place.vicinity}</p>`
              );
              infowindow.open(map, marker);
            });
          });
        });
    
        **** LOGS NULL :( ****
        console.log(fjson.value);
        return { mapDiv, coords, fjson: fjson.value };
      },
    };
    </script>
    
    <template>
      <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-12 d-flex align-items-stretch">
          <div class="card" style="width: 100%">
            <div class="card-header text-white" style="background-color: #00aa9e">
              <div v-for="result in fjson">
                <p>{{ result }}</p>
              </div>
              Nearby churches
            </div>
          </div>
        </div>
      </div>
    
      <div ref="mapDiv" style="width: 100%; height: 80vh" />
    </template>

Answer 1

onMounted is called after the setup function. Since your console.log(fjson.value); is outside of your onMounted callback, it runs before your axios request.

your v-for is also wrong. It should be:

<div v-for="result in fjson.data.results">
    <p>{{ result }}</p>
</div>

since results is the actual array