fix(vue-app): this.$nuxt.refresh doesn't refresh every fetch hooks

packages/vue-app/template/App.js

@@ -182,6 +182,13 @@ export default {
         if (page.$options.fetch && page.$options.fetch.length) {
           p.push(promisify(page.$options.fetch, this.context))
         }
+        if (page.$fetch) {
+          p.push(page.$fetch())
+        }
+        // Get all component instance to call $fetch
+        for (const component of getChildrenComponentInstancesUsingFetch(page.$vnode.componentInstance, [], pages)) {
+          p.push(component.$fetch())
+        }
         <% } %>
 
         <% if (features.asyncData) { %>
@@ -201,7 +208,7 @@ export default {
         // Wait for asyncData & old fetch to finish
         await Promise.all(p)
         // Cleanup refs
-        p = [] 
+        p = []
 
         if (page.$fetch) {
           p.push(page.$fetch())
@@ -214,6 +221,24 @@ export default {
 
         return Promise.all(p)
       })
+
+      <% if (features.fetch) { %>
+      const layout = this.$children.find((component) => component._name?.toLowerCase().includes("layouts"))
+      // if layout is enabled
+      if (layout) {
+        const p = [];
+        // get layout fetch if exist
+        if (layout.$fetch) {
+          p.push(layout.$fetch())
+        }
+        // Get all component instance from layout to call $fetch
+        for (const component of getChildrenComponentInstancesUsingFetch(layout.$vnode.componentInstance, [], pages)) {
+          p.push(component.$fetch())
+        }
+
+        promises.push(Promise.all(p))
+      }
+      <% } %>
       try {
         await Promise.all(promises)
       } catch (error) {

packages/vue-app/template/utils.js

@@ -53,9 +53,12 @@ export function purifyData(data) {
       return obj
     }, {})
 }
-export function getChildrenComponentInstancesUsingFetch(vm, instances = []) {
+export function getChildrenComponentInstancesUsingFetch(vm, instances = [], exclude = []) {
   const children = vm.$children || []
   for (const child of children) {
+    // ignore the component when it is in the exclude list
+    if (exclude.includes(child)) continue;
+
     if (child.$fetch) {
       instances.push(child)
     }