Calls to backend inserting part of router when multiple subdirectories are in URL

[GiantCrabDevil]

New to vuejs, completely stumped by this.
Here is my config:

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  server: {
    port: 7000,
    proxy: {
      '/api': {
        target: 'http://localhost:8081/',
        changeOrigin: true
      },
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

Here are my routes so far:

routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/recipes/:id',
      name: 'recipe',
      component: RecipeView
    },
    {
      path: '/about',
      name: 'about',
      component: AboutView
    },
    {
      path: '/recipes/add',
      name: 'recipe-add',
      component: AddRecipe
    },
    {
      path: '/recipes/edit/:id',
      name: 'recipes-edit',
      component: EditRecipe
    }
  ]

All pages load correctly, with home, recipe, add, and edit all make backend calls on onMounted.
Home and recipe are making the proper calls, recipe for example:

state.recipes = (await axios.get('api/recipes')).data;

But add and edit are somehow getting part of the route path inserted, add for example:

state.allCategories = (await axios.get('api/categories')).data;

I have no idea why the 'recipes' part is in there on this call. If I change the path in the route to one subdirectory, like 'recipe-add', then the URL is correct and my backend returns data.
Any help would be greatly appreciated.