Route issue - continues to call other routes (Nuxt)

I have a set up where each user has a “slug” for their url so looks like:

No big deal all good, I have the route to the profiles as the very last route in my routes.js

..... some routes
   path: '/login',
   name: 'login',
   props: true,
   component: Login
   // very last route
   path: '/:slug',
   name: 'profile-view',
   props: true
   component: ProfileView,

Problem is no matter what route I go to it still is calling this last route. Example from snip routes.js code above, if i go to /login I get to the login page as it should, but in the console I see the async call in the ProfileView component getting called with errors looking for the ‘:slug’ in the last route.

In my ProfileView component I have:

asyncData({ app, error, route }) {
  console.log('hitting profile _view')
  console.log(route.params.slug, 'slug')
  try {
    const r = await app.$axios.get('public/' + route.params.slug)
    return { record: }
  } catch (e) {
    // return cb('Unexpected error occurred');
    error({ statusCode: 404, message: 'Profile does not exist.' })

So even when I go to /login I am seeing the console for ProfileView
hitting profile _view
undefined slug
[ REQUEST ]public/undefined

No idea why, any thoughts? Ideas / suggestions?