Layout setup gets resolved after page setup

[robinscholz]

Environment

---

• Operating System: Darwin
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.8
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: app, experimental, modules, buildModules, postcss, css, colorMode, vite, runtimeConfig, build
• Runtime Modules: @nuxtjs/supabase@^0.1.19, @nuxtjs/color-mode@^3.1.4
• Build Modules: @pinia/nuxt@^0.4.1, nuxt-windicss@^2.5.0, unplugin-icons/nuxt

---

Reproduction

https://stackblitz.com/edit/github-9kowc2?file=pages/index.vue

Describe the bug

When navigating between / and /index you can see in the console.log that the page script setup is called once before the layout script setup and once after.

On initial page load the page script setup is called after the layout script setup.

When fetching data within the layout and using provide/inject to provide the data within page/custom.vue this behavior breaks the app, since the page script setup is resolved before the layout script setup and thus inject is undefined.

Additional context

No response

Logs

[Vue warn]: injection "Symbol(collections)" not found. 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>

[danielroe]

Let's track in #14573.