Axios mock adapter error when adding new routes for mock not working but existing is working

Question

I have an issue when trying to add a new mock route. Cannot hit API mock with the new route but existing route is working.

Currently /route/existing is working but /route/new is not working Is there any solution to this? Anyone also had experienced this before?

Project details: Vue.js version 2.5 Node.js version 14 Axios mock adapter version 1.17.0 Axios version 0.19.2

Thanks before

My mock implementation (index.js)

import MockRoutes from './mock-routes'
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'

let routes = MockRoutes

// axios mock method
const mock = new MockAdapter(axios)
const methodMap = {
  GET: 'onGet',
  PUT: 'onPut',
  POST: 'onPost',
  DELETE: 'onDelete'
}

function applyMock (data) {
  data.forEach(d => {
    const params = [d.url]
    switch (d.method) {
      case 'GET': params.push({ params: d.param_values })
        break
      case 'PUT' || 'POST': params.push(d.param_values)
        break
    }
    mock[methodMap[d.method]](...params).reply(d.status || 200, d.response)
  })
}

applyMock(routes)

if (process.env.NODE_ENV !== 'production') {
  window.concatMockRoutes = function (newRoutes) {
    applyMock(newRoutes)
    routes = routes.concat(newRoutes)
    if (process.env.NODE_ENV !== 'production') {
      return routes
    }
  }
}

export default routes

Mock routes (mock-routes.js)

var routes = [
{
    method: 'GET',
    url: '/route/existing',
    response: {
      "code": 200,
      "status": "OK",
      "data": {
         mock: "existing"
       }
    }
},
{
    method: 'GET',
    url: '/route/new',
    response: {
      "code": 200,
      "status": "OK",
      "data": {
         mock: "new"
       }
    }
}]