Q:

Embedded javascript, sending form data back to the application. Routing error

Context
Within an rails app, I created an embedded javascript form using Vue, external websites of shops cope/paste to let their website visitors search for available bike_categories. 
Goal
Now I created the form they can copy/past and I would like to send the data back to my app, so I can search through my bike management app for the available bike_categories for the respective shop. 
Question/error message
When trying to send the data back to my app, I get the following routing error, even tough the route is in my routing file. It's the first time I'm trying something like this, so I might be overlooking/missing something, but how can I solve this if the routing matches?
browser error
No route matches [POST] "/en/shops/66/shop_availability"

.....
available routes:

shop_availability_api_v1_shop_path  POST    (/:locale)/api/v1/shops/:id/shop_availability(.:format)   api/v1/shops#shop_availability {:format=>:json, :locale=>/en|nl|fr/}

console error
Started POST "/en/shops/66/shop_availability" for ::1 at 2020-02-27 09:15:24 +0100

ActionController::RoutingError (No route matches [POST] "/en/shops/66/shop_availability"):

actionpack (5.2.3) lib/action_dispatch/middleware/debug_exceptions.rb:65:in `call'
web-console (3.7.0) lib/web_console/middleware.rb:135:in `call_app'
web-console (3.7.0) lib/web_console/middleware.rb:30:in `block in call'
web-console (3.7.0) lib/web_console/middleware.rb:20:in `catch'
web-console (3.7.0) lib/web_console/middleware.rb:20:in `call'
actionpack (5.2.3) lib/action_dispatch/middleware/show_exceptions.rb:33:in `call'
railties (5.2.3) lib/rails/rack/logger.rb:38:in `call_app'
railties (5.2.3) lib/rails/rack/logger.rb:26:in `block in call'
activesupport (5.2.3) lib/active_support/tagged_logging.rb:71:in `block in tagged'
activesupport (5.2.3) lib/active_support/tagged_logging.rb:28:in `tagged'
activesupport (5.2.3) lib/active_support/tagged_logging.rb:71:in `tagged'
railties (5.2.3) lib/rails/rack/logger.rb:26:in `call'
sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:13:in `call'
actionpack (5.2.3) lib/action_dispatch/middleware/remote_ip.rb:81:in `call'
request_store (1.5.0) lib/request_store/middleware.rb:19:in `call'
actionpack (5.2.3) lib/action_dispatch/middleware/request_id.rb:27:in `call'
rack (2.0.7) lib/rack/method_override.rb:22:in `call'
rack (2.0.7) lib/rack/runtime.rb:22:in `call'
activesupport (5.2.3) lib/active_support/cache/strategy/local_cache_middleware.rb:29:in `call'
actionpack (5.2.3) lib/action_dispatch/middleware/executor.rb:14:in `call'
actionpack (5.2.3) lib/action_dispatch/middleware/static.rb:127:in `call'
rack (2.0.7) lib/rack/sendfile.rb:111:in `call'
webpacker (4.0.7) lib/webpacker/dev_server_proxy.rb:29:in `perform_request'
rack-proxy (0.6.5) lib/rack/proxy.rb:57:in `call'
railties (5.2.3) lib/rails/engine.rb:524:in `call'
puma (4.1.0) lib/puma/configuration.rb:228:in `call'
puma (4.1.0) lib/puma/server.rb:664:in `handle_request'
puma (4.1.0) lib/puma/server.rb:467:in `process_client'
puma (4.1.0) lib/puma/server.rb:328:in `block in run'
puma (4.1.0) lib/puma/thread_pool.rb:135:in `block in spawn_thread'

Code
routes.rb
namespace :api, defaults: { format: :json } do
  namespace :v1 do
    resources :shops, only: [:show] do
      get :form_availability , on: :member
      post :shop_availability , on: :member
    end
  end
end

javascript/packs/embed.js
import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
import store from '../store'
// store.dispatch('loadComments')

const event = (typeof Turbolinks == "object" && Turbolinks.supported) ? "turbolinks:load" : "DOMContentLoaded"

// Vue.use(TurbolinksAdapter)

document.addEventListener(event, () => {

  const el = document.querySelector('#app-reservation-form')
  store.dispatch('loadComments')
  const app = new Vue({
    el,
    store,
    render: h => h(App)
  })

  console.log(app)
})

javascript/vue
<template>
  <form id="app-reservation-form" action="http://localhost:3000/en/shops/66/shop_availability" ref="form">

    <div class="app-reservation-form-item">
      <h6>Arrival</h6>
      <input type="text" id="arrival" name="arrival" class="form-control"/>
    </div>
    <div class="app-reservation-form-item">
      <h6>Departure</h6>
      <input type="text" id="departure" name="departure" class="form-control" />
    </div>
    <div class="app-reservation-form-item">
      <h6></h6>
        <button class="btn search-bikes-button">Search</button>
    </div>
  </form>
</template>

<script>
export default {
  data: function () {
    return {
    }
  },

  methods:{
    submit(){
    let formData = new formData(this.$refs.form)
    this.$store.dispatch("searchBikes", formData)
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

javascrip/store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    bike_categories:[]
  },

  mutations: {
    load(state, bike_categories){
      state.bike_categories = bike_categories
    },
  },

  actions: {
    //show initial search form on website shop
    async loadComments({ commit }){
      let booking_url = window.location.href

      fetch(`http://localhost:3000/api/v1/shops/${encodeURIComponent(booking_url)}/form_availability/`,{
        headers: {accept: 'application/json'}
      })
      .then(response => response.json())
      .then(data => commit('load', data))
    },

    //Deal with data coming back from shops website
    async searchBikes({commit}, formData){
      let booking_url = window.location.href
      fetch(`http://localhost:3000/api/v1/shops/${encodeURIComponent(booking_url)}/shop_availability/`,{
        headers: {accept: 'application/json'},
        method: "post",
        body: formData,
      })
      .then(response => response.json())
      .then(data => console.log(data))
    }
  }
})

window.store = store

export default store

models/shop.rb
class Shop < ApplicationRecord
def self.by_url(booking_url)
    uri = booking_url.split("?").first
    uri.sub!(/\/$/, '')
    # binding.pry
    where(booking_url: uri)
  end
end

controllers/api/v1/shops_controller.rb
class Api::V1::ShopsController < Api::V1::BaseController
  acts_as_token_authentication_handler_for User, only: [:show]

  def show
    @user = current_user
    if @user.shops.find(params[:id])
      @shop = @user.shops.find(params[:id])
    else
      error
    end
    authorize @shop
  end

  def form_availability
    @shop = Shop.by_url(params[:id]).last
    @bike_categories = @shop.bike_categories
    render "shops/form_availability"
    authorize @shop
  end

  def shop_availability
    binding.pry
    @shop = Shop.by_url(params[:id]).last
  end

end

A:

Can't believe I missed it, the route in my form didn't contained the route to the normal shops_controller instead of the api/v1shops_controller. 

