Why does Vue.js and Axios error occur in Firefox when adding products to cart?

Technical Q&A
1

Hello, all I hope you are well?

I am a little stuck and could do with some guidance. I am using Vue.js and Axios to add products to the cart. Everything works fine in Chrome But Firefox I get this error:

Error: Request aborted
    exports https://d1u9wuqimc88kc.cloudfront.net/vendor/axios.min.js:8
    onabort https://d1u9wuqimc88kc.cloudfront.net/vendor/axios.min.js:8
    exports https://d1u9wuqimc88kc.cloudfront.net/vendor/axios.min.js:8
    exports https://d1u9wuqimc88kc.cloudfront.net/vendor/axios.min.js:8
    exports https://d1u9wuqimc88kc.cloudfront.net/vendor/axios.min.js:8
    promise callback*r.prototype.request https://d1u9wuqimc88kc.cloudfront.net/vendor/axios.min.js:8
    e https://d1u9wuqimc88kc.cloudfront.net/vendor/axios.min.js:8
    exports https://d1u9wuqimc88kc.cloudfront.net/vendor/axios.min.js:2
    addToCart VueJS
    He https://cdn.shopify.com/s/files/1/0523/6729/4661/t/2/assets/vue_production.js?v=17517640307299313232:6
    n https://cdn.shopify.com/s/files/1/0523/6729/4661/t/2/assets/vue_production.js?v=17517640307299313232:6
    _wrapper https://cdn.shopify.com/s/files/1/0523/6729/4661/t/2/assets/vue_production.js?v=17517640307299313232:6

I have Vue.js in production and dev mode here is my custom.js for Vue handling the add to cart with Axios:

if (document.querySelector('.upsell_form')) {
	// Upsell Add to Cart.
    
	var upsell_form = new Vue({

	 el:".upsell_form",

	 data(){
	 	return {
	 		form: {
	 			id: null,
	 			quantity: 1  
	 		}
	 	}
	 },

	 methods: { 
	   addToCart() {
	   	 axios.post('/cart/add.js', this.form )
	   	 .then(function (response) {
           console.log(response);
           new Noty({
			    type: 'success', 
			    layout: 'topLeft',
			    text: 'Product Added to Cart!'
			}).show();
	   	 })
	   	 .catch(function (error) {
	   	 	console.log(error);
	   	 	new Noty({
			    type: 'error',
			    layout: 'topLeft',
			    text: 'Something Went Wrong?'
			}).show();
	   	 }); 
	   }
	 }
 
	});  
}

I have my incudes like so in the body:

{% if settings.enable_vue_development  %}
    {{ 'vue_development.js' | asset_url | script_tag }}
    {{ 'custom_vue.js' | asset_url | script_tag }}
  {% endif %}

  {% if settings.enable_vue_production  %}
    {{ 'vue_production.js' | asset_url | script_tag }}
    {{ 'custom_vue.js' | asset_url | script_tag }}
  {% endif %}

{% if template contains 'product' %}
    {{ 'axios.js' | asset_url | script_tag }}
  {% endif %}

Would appreciate if anyone else knows as to why this would happen?