Nuxt: asyncData({ $axios }) call working differently in deployment than on localhost

Question

I've developed a Nuxt.js app that uses several asyncData({ $axios }) calls. In dev mode these calls work. In deployment most of the calls work. However, sometimes they appear to be working only after a page is 'returned to', that is, by pushing back on the browser. At that point the data populates and the page displays as intended. Before the page is 'returned to', i.e., when it is first visited, the call is not being made, verified with console.log("in asyncData") not appearing in the console. Here is the code of the call (again, this works fine in dev mode):

async asyncData({ $axios }) {
  try {
    let dogsResponse = await $axios.$get("/api/dogs");
    
    console.log("inside asyncData");
    console.log("dogsResponse", dogsResponse);

    return {
      dogs: dogsResponse.dogs,
    }
  } catch (err) {
    console.log(err.message)
  }
},

You can see this in action by visiting my site at cal-dog-run.herokuapp.com and logging in with the following credentials. Login: [email protected] Password: aa

-->Click to view profile

-->Click on the picture of 'bb'

-->This page (/dogProfile?dog=bb) should show this dog's information (an image and information about all appointments) via the asyncData call and some otherwise working code. At this point it shows only the template. If you then click on 'schedule an appointment for bb' it takes you a different vue and the asyncData call on that vue appropriately fires and populates an image. IF you then click 'back' on the browser, and return to (/dogProfile?dog=bb), now asyncData fires and appropriately populates the page with an image and appointment info, and also console.logs 'inside asyncData' and 'dogsResponse.

I would appreciate any insight into why this may be happening, thank you.