Javascriptは書く順番が大切

Vue.jsを書いていて、どうしても動かずハマってしまった部分がありました。
FirebaseをWebアプリに連携しようとして、 main.js に以下のように記述していました。

<script>
import { firestorePlugin } from 'vuefire'
    import firebase from 'firebase'
    import 'firebase/firestore'
    
    Vue.use(firestorePlugin)
    
    export const db = firebase.firestore()
    export const auth = firebase.auth()
    
    Vue.config.productionTip = false
    
    firebase.initializeApp({                
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: ""
    })

</script>

scriptは上から下に向けて実行されるため、これだと ｄｂ のインスタンスを作成する場合にfirebaseの認証がされていないことになります。
そのため、 db のインスタンスが作成されず、表示することができませんでした。
正しくは、 firebase.initializeApp を db のインスタンス作成より前に書き、

<script>
import { firestorePlugin } from 'vuefire'
    import firebase from 'firebase'
    import 'firebase/firestore'
    
    Vue.use(firestorePlugin)

　　 firebase.initializeApp({                
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: ""
    })
    
    export const db = firebase.firestore()
    export const auth = firebase.auth()
    
    Vue.config.productionTip = false
    
    

</script>

とすることで解決します。
またひとつ前進しました。