Why are vue components executing before main.js? What is the order of execution of a vue app?

Hello, I’m new to vue. I’m using pinia in a vue2 project. I created two pinia stores:

  1. questionStore
  2. editorStore

Problem is that the code of using those stores in vue components is executing before than creating pinia instance. Therefore I’m getting an error.

I’m under the impression that all the code in main.js until new Vue() executes first and then the App is rendered (during the rendering the script in components is executed.

my main.js file

import Vue from 'vue'
import App from './App.vue'
import PrimeVue from 'primevue/config'; //#PrimeVue
import Message  from 'primevue/message'; 


import ToastService from 'primevue/toastservice'; //#PrimeVue Toast

//#PrimeVue styles
import 'primevue/resources/themes/saga-blue/theme.css'       //theme
import 'primevue/resources/primevue.min.css'                 //core css
import 'primeicons/primeicons.css'                           //icons


//pinia store
import { createPinia, PiniaVuePlugin } from 'pinia'

console.log('creating pinia')
const pinia = createPinia()
console.log('created pinia')
Vue.use(pinia)
Vue.use(PiniaVuePlugin)

Vue.config.productionTip = false

Vue.use(PrimeVue);  //#PrimeVue
Vue.use(Message)

Vue.use(ToastService); //#PrimeVue Toast

  
new Vue({
  pinia,
  el: '#app',
  render: h => h(App),
})

App.vue

<template>
   <AceEditor>sdfsdf</AceEditor>
</template>
<script>
    console.log('calling questionStore from App.vue')
</script>

AceEditor.vue

//in the script tag
console.log('calling editorStore from AceEditor.vue')

In console of devtools

Life Cycle Diagram doesn’t speak much about code before new Vue()

Why are vue components executing before main.js?
What is the order of execution of a vue app?
How to make my pinia store code execute after vue?