Dynamic select option is not working anymore after change to new firebase project

This is a follow-up question from a question that I asked and answered before:

https://stackoverflow.com/a/69762698/16136444

In summary, if I pick a choice on the 1st v-select, it will only display limited choices on the 2nd v-select, which are related to the first choice that I made on the 1st v-select. Then, after choices are made on the 2nd v-select, it will auto-generate and display the code assigned to that 2nd choice on the 3rd v-select.

Before it was successfully done on my testing firebase project and it works and it still is. But after I created a new firebase project and do the same thing, it did not work out.

  1. Old firestore collection on my testing project
  • Scope of Works > All docs contain scope value > Specialization > docs containing specialization & code

old firestore on my testing project 1
old firestore on my testing project 2

  1. New firestore collection created for production project
    new firestore on my production project 1
    new firestore on my production project 2

So, the only thing that is changed is I removed spacing & use PascalCase for the name of the collection and documents. Other than it is all just the same. So now I used .collection("ScopeOfWork") (new) instead of .collection("Scope of Works")(old) to read from firestore

What could possibly be wrong with it? Any advice?

Thank you :))