I am new with Vue 3 and Firebase v9. I am quite lost here.

I followed the steps in the documentation provided (https://firebase.google.com/docs/database/web/read-and-write) but I do not know why it only logs 'mounted test' and completely ignores onValue().

What am I missing here?

package.json:

"dependencies": {
  "bootstrap": "^5.1.3",
  "core-js": "^3.8.3",
  "firebase": "^9.9.0",
  "vue": "^3.2.37",
  "vue-router": "^4.0.3",
  "vuex": "^4.0.0"
},
"devDependencies": {
  "@babel/core": "^7.12.16",
  "@babel/eslint-parser": "^7.12.16",
  "@vue/cli-plugin-babel": "~5.0.0",
  "@vue/cli-plugin-eslint": "~5.0.0",
  "@vue/cli-plugin-router": "~5.0.0",
  "@vue/cli-plugin-vuex": "~5.0.0",
  "@vue/cli-service": "~5.0.0",
  "eslint": "^7.32.0",
  "eslint-config-prettier": "^8.3.0",
  "eslint-plugin-prettier": "^4.0.0",
  "eslint-plugin-vue": "^8.0.3",
  "prettier": "^2.4.1",
  "sass": "^1.32.7",
  "sass-loader": "^12.0.0"
}

App.vue

<script setup>
    import { onMounted } from 'vue'
    import { initializeApp } from 'firebase/app'
    import { getDatabase, ref, onValue } from 'firebase/database'
    
    const firebaseConfig = {
      apiKey: '',
      authDomain: '',
      databaseURL: '',
      projectId: '',
      storageBucket: '',
      messagingSenderId: '',
      appId: ''
    }
    
    const app = initializeApp(firebaseConfig)
    const db = getDatabase(app)
    const settingsRef = ref(db, '/settings')
    
    onMounted (() => {
      console.log('mounted test')

      onValue(settingsRef, (snapshot) => {
        console.log('snapshot', snapshot)
        snapshot.forEach((childSnapshot) => {
          console.log('childSnapshot.key: ', childSnapshot.key)
          console.log('childSnapshot.val(): ', childSnapshot.val())
        })
      }, {
        onlyOnce: true
      })
    })
</script>