Refreshing/Reloading after using Vue Router to redirect

Question

In my Vue component I collect page data for jobs from Contentful. If the page data is missing I want to redirect the user back to another page (the jobs listing page). However, if I use this.$route.push('/jobs'), i'm finding that the redirect works but the page it redirects to is empty. It should have the list of jobs on it.

I'm assuming I need to force some kind of refresh to pull in the data but i'm not sure how to do this.

At the moment the code looks like this:

if (!job || !navbar) {
        throw `Error-fetching job child page data`;
      } else {
        this.pageData = job?.fields;
        this.navLinks = navbar;
        this.slug = slug;
      }
    } catch (error) {
      if (process.env.ROLLBAR_ENABLED === true) {
        Vue.rollbar.error(error);
      }
      this.$router.push({ path: '/jobs' });

      throw new Error(error);
    }
}

How jobs are fetched:

export default {
  name: "jobs-page",
  data() {
    return {
      seoMetaData: {},
      headerData: {},
      bodyData: {},
    };
  },
fetch: async function () {
    try {
      const data = await contentful.getEntries({
        content_type: "job",
        "fields.title": "title",
         include: 10,
      });

      if (!data || data.length < 1) {
        throw `Error-fetching Jobs page data`;
      } else {
        this.seoMetaData = data[0].fields?.seoMetadata?.fields || {};
        this.headerData = data[0].fields?.header;
        this.bodyData = data[0].fields?.bodySection?.fields;
      }
    } catch (error) {
      if (process.env.ROLLBAR_ENABLED === true) {
        Vue.rollbar.error(error);
      }
      throw new Error(error);
    }
  },