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>

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