BeforeRouteEnter not working in production with script setup

Question

I used the beforeRouteEnter hook in vue-router to load data from two different endpoints using axios. I used promise.all() to load the data and then passed it to the component using next(). It seems to be working in development but when it is hosted on vercel the data isn't rendered on the component.

import axios from "axios"
import NProgress from "nprogress"

export default {
  name: "DetailView",


beforeRouteEnter(to, from, next) {
    NProgress.start()

    const getDetails = axios.get(`api/grades/${ to.params.id }/`)
    const getResults =
      axios.get(`api/results/`, {
        params: {
          'grade-id': to.params.id,
        }
      })


    Promise.all([getDetails, getResults])
      .then(([details, results]) => {
        next((vm) => {
          vm.details = details.data
          vm.results = results.data
        })
      })
      .finally(NProgress.done())
  },
}

I used a <script setup>...</script> for the setup function with the

import { ref } from "vue"

const details = ref({})
const grades = ref({})

I'm relatively new to javascript too and still trying to understand promises and async/await very well. Thank you

Answer 1

Finally found a solution to the problem. Components using <script setup> in vue are closed by default, he public instance of the component, which is retrieved via template refs or $parent chains, will not expose any of the bindings declared inside <script setup>. From the vue docs.

I had to explicitly expose the properties used in the beforeRouteEnter navigation guard using the defineExpose compiler macro

defineExpose(
    {
       details,
       results
    }
)