vue cliによるfirestoreのデータ表示ができない。

Question

前提

FirestoreとVue CLIでToDoListアプリを作成しています。まずFirestoreへ登録したデータをVue CLIのwebアプリへ表示するために、init.jsというファイルを作成して、そこでfirebaseの初期化とSDKツールをインポートしました。

import * as firebase from "firebase/app";
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getfirestore, where, query } from 'firebase/firestore';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';

const firebaseConfig = {
  apiKey: *****,
  authDomain: *****
  projectId: *****
  storageBucket: *****
  messagingSenderId: *****
  appId: *****,
  measurementId: *****
};

firebase.initializeApp(firebaseConfig);
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
// const db = getFirestore(app);

export default getFirestore(app);

発生している問題・エラーメッセージ

その上で、index.vueというファイルで上記ファイルを呼び出して、dbの中身をconsole.log表示しようとしましたが、うまくいきません。

import db from '@/firebase/init'
...
created(){
    db.collection('smoothies').get()
    .then(snapshot => {
      snapshot.forEach(doc => {
        console.log(doc)
      })
    })

試したこと

doc, .id, .data(), .get()など色々と試したのですが、いずれも** TypeError: db.collection is not a function というエラーが出てしまいます。。