Paginated async Component doesn't trigger setup() on route change

Question

I have a paginated component. The async setup() method is pulling data from an API to populate the page. It works fine when the route is directly loaded, but when I change the route to a different page slug (eg. clicking a router-link), the component is not reloaded and setup is not executed again to fetch the new data.

I guess I somehow want to force reloading the component?

This is my MainApp component it has the router view and fallback.

<router-view v-slot="{ Component }">
    <Suspense>
        <template #default>
            <component :is="Component" />
        </template>
        <template #fallback>
            loading...
        </template>
    </Suspense>
</router-view>

The router looks kinda like that. You see the page component takes a page_slug:

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "",
    component: MainApp,
    children: [
        {
            name: "page",
            path: "page/:page_slug",
            component: Page,
            props: true,
        },
        // [...]
    ]
  }

And this is how my Page component looks like. It uses the page_slug to load data from an API which is then used in the template:

<template>
    <div> {{ pageData }} </div>
</template>

export default defineComponent({
  name: "Page",
  props: {
    page_slug: {
      type: String,
      required: true,
    },
  },
  async setup(props) {

      const pageData = await store.dispatch("getPageData", {
        page_slug: props.page_slug
      });

      return { pageData }
  }
}

When I directly open the route, the fallback "loading..." is nicely shown until the data is returned and the component is rendered. But when I do a route change to another page, then async setup() is not executed again. In that case the url in the browser updates, but the data just remains the same.

How can I solve this case? Do I have to force reload the component somehow? Or have an entirely different architecture to the data loading?

Answer 1

The answer is simple, when trying to create Vue 3 Single File Components (SFCs) in Composition API way as shown below:

<template>
  <!--  Your HTML code-->
</template>

<script>
export default {
  name: 'ComponentName',
  async setup():{
        // Your code
  }
};
</script>

<style>
/*Your Style Code*/
</style>

<script>, will only executes once when the component is first imported. So, when the data have changed by other component, the component above will not updated or in other words not re-created. To make your component re-created whenever it about to mount, you have to use <script setup> which will make sure the code inside will execute every time an instance of the component is created, but you need to re-write your script code with few changes in comparison when using setup() method, and also you are able to use both of scripts like this:

<script>
// normal <script>, executed in module scope (only once)
runSideEffectOnce()

// declare additional options
export default {
  name: "ComponentName",
  inheritAttrs: false,
  customOptions: {}
}
</script>

<script setup>
// executed in setup() scope (for each instance)
</script>

Read this documentation carefully to have full idea.