I'm new to programming and I'm doing a university project with Vuejs in which I have to create a website with the use of an API (i'm using google books) and google firestore in which i want to store the 'id' of the books that are setted as "favorite" from the user.

I want to execute the function load() when the page is loaded, the problem is that the function stop to execute itself after the execution of console.log("var favs", favs) that is:

    var favs 
    [0: {id: '4dvptppOG8MC'},
     1: {id: '9CJWTbd-RYoC'},
     2: {id: 'HdRNzQEACAAJ'},
     3: {id: 'ayOd_Lu7m_MC'},
     4: {id: 'tp9svQEACAAJ'},
    ] 

But i'd like to have something printed per line, in a separeted way and not like an array, because, after, I've to compare each 'id' with another variable.

This is the code:

    created: function () {
            this.load();
          },
    
      methods: {
        load() {
          var favs = [];
          favs = DataService.getFav();
          console.log("var favs", favs);
          favs.forEach((item) => {
            console.log("item.id: ", item.id);
          });
        },

I don't know if it could be useful but this is the code of DataService.getFav()

      getFav: function () {
        var username = localStorage.getItem("username");
        var colName = username + "fav";
        var favs = [];
        db.collection(colName)
          .get()
          .then((response) => {
            response.forEach((doc) => {
              favs.push(doc.data());
            });
          });
        return favs;
      }