I am creating site for my store and learning Vue js at the same time. I'm having a problem with delete product using id. I'm using Vue js 3 and Firebase 9.

I have this on main.j

const dataBase = collection(db, "products");

and this on products.js

import { dataBase } from '../main';
import { addDoc, deleteDoc, onSnapshot, doc } from "firebase/firestore";

export default {
  name: "Products",
  props: {
    msg: String
  },
  data() {
    return {
      products: [],
      product: {
        name: '',,
        price: '',
        brand: '',
        category: ''
      }
    }
  },
  methods: {
    saveData() {
      try {
        addDoc(dataBase, this.product).then((docRef) => {
          console.log("Document written with ID: ", docRef.id);
        })
      } catch (e) {
        console.error("Error adding document: ", e);
      }
    },
    deleteProduct(doc) {
      if (confirm('Видалити ?')) {
        deleteDoc(doc(dataBase, "products", docRef.id));
      } else {

      }
    }
  },
  created() {
    onSnapshot(dataBase, (snapshot) => {
      snapshot.docs.forEach((doc) => {
        this.products.push({ ...doc.data(), id: doc.id })
      })
    });
  }
};

Thanks!