Firebase – Vue dynamic routing

I am currently developing an app and something is wrong with my code as far as dynamic routing is concern. I have data on my firebase and bringing it to the app. For each department on my database it should generate a navbar. When I click at a singular navbar item it should automatically generate a page with the reports related to that navbar.
I currently have the following:

       <div>
            <table>
                <tr>
                    <td v-for="item in filteredDocuments" :key="item.id">
                        <nav class="main-nav">
                            <router-link :to="`OutrosRelatoriosIndividuais/${item.id}`">
                               {{ item.nome_orgao }}
                            </router-link>
                        </nav>
                    </td>
                </tr>
            </table>
        </div>

This should generate the navbar with the items from the data base and display the name of the department. My router looks like so…

{
    path: '/outrosrelatoriosindividuais/:id',
    name: 'OutrosRelatoriosIndividuais',
    component: OutrosRelatoriosIndividuais,
    beforeEnter: requireAuth,
    props: true,
]
  },

But when I run it, I am getting an error and the items are not being displayed:

vue-router.mjs:35 [Vue Router warn]: No match found for location with path "OutrosRelatoriosIndividuais/1awcbvPcIg0W8lKzYZN3"

I am expecting the page to return with the items from firebase and without the page not found error.