Vue modal doesn't render unless Flask server is off?

Below is my app.py file for flask back-end.

from flask import Flask, jsonify, request
from flask_cors import CORS

# configuration
DEBUG = True

# instantiate the app
app = Flask(__name__)
app.config.from_object(__name__)

# enable CORS
CORS(app)

# initial list of customers to fetch with axios
CUSTOMERS = [
    {
        'name': 'john',
        'email': 'john@john.me',
        'phone': '6023434484',
        'contacted': True
    },
    {
        'name': 'Greg',
        'email': 'greg@.me',
        'phone': '6023005000',
        'contacted': False
    },
    {
        'name': 'Jaz',
        'email': 'jazmin@jazmin.me',
        'phone': '6025550000',
        'contacted': True
    }
]

# check route


@app.route('/ping', methods=['GET'])
def ping_pong():
    return jsonify('pong!')


@app.route('/customers', methods=['GET', 'POST'])
def all_customers():
    response_object = {'status': 'success'}
    if request.method == 'POST':
        post_data = request.get_json()
        CUSTOMERS.append({
            'name': post_data.get('name'),
            'email': post_data.get('email'),
            'phone': post_data.get('phone'),
            'contacted': post_data.get('contacted')
        })
        response_object['message'] = 'Customer added!'
    else:
        response_object['customers'] = CUSTOMERS
    return jsonify(response_object)


if __name__ == '__main__':
    app.run()

And below is my vue component.

<template>
  <div class="container">
    <div class="row">
      <div class="col-sm-10">
        <h1>Customers</h1>
        <hr><br><br>
        <button type="button" class="btn btn-success btn-sm" v-b-modal.customer-modal>Add Customer</button>
        <br><br>
        <!-- Customer table-->
        <table class="table table-hover">
          <thead>
            <tr>
              <th scope="col">Name</th>
              <th scope="col">Email</th>
              <th scope="col">Phone</th>
              <th scope="col">Contacted?</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(customer, index) in customers" :key="index">
              <td>{{ customer.name }}</td>
              <td>{{ customer.email }}</td>
              <td>{{ customer.phone }}</td>
              <td>
                <span v-if="customer.contacted">Yes</span>
                <span v-else>No</span>
              </td>
              <td>
                <button type="button" class="btn btn-warning btn-sm">Update</button>
                <button type="button" class="btn btn-danger btn-sm">Delete</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    
    
     <!-- Add customer modal -->
  <b-modal ref="addCustomerModal" id="customer-modal" title="Add a new customer" hide-footer>
    <b-form @submit="onSubmit" @reset="onReset" class="w-100">
      <b-form-group id="form-name-group" label="Name:" label-for="form-name-input">
        <b-form-input id="form-name-input" type="text" v-model="addCustomerForm.name" required placeholder="Enter customer name">
        </b-form-input>
      </b-form-group>
      <b-form-group id="form-email-group" label="Email:" label-for="form-email-input">
        <b-form-input id="form-email-input" type="text" v-model="addCustomerForm.email" required placeholder="Enter customer email">
        </b-form-input>
      </b-form-group>
      <b-form-group id="form-phone-group" label="Phone:" label-for="form-phone-input">
        <b-form-input id="form-phone-input" type="text" v-model="addCustomerForm.phone" required placeholder="Enter customer phone">
        </b-form-input>
      </b-form-group>
      <b-form-group id="form-contacted-group">
        <b-form-checkbox-group v-model="addCustomerForm.contacted" id="form-checks">
          <b-form-checkbox value="true">Contacted?</b-form-checkbox>
        </b-form-checkbox-group>
      </b-form-group>
      <b-button type="submit" variant="primary">Submit</b-button>
      <b-button type="reset" variant="danger">Reset</b-button>
    </b-form>
  </b-modal>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      customers: [],
      addCustomerForm: {
        name: "",
        email: "",
        phone: "",
        contacted: []
      }
    };
  },
  methods: {
    getCustomers() {
      const path = "http://localhost:5000/customers";
      axios
        .get(path)
        .then(res => {
          this.customers = res.data.customers;
        })
        .catch(error => {
          // eslint-disable-next-line
          console.error(error);
        });
    },
    addCustomer(payload) {
      const path = "http://localhost:5000/customers";
      axios
        .post(path, payload)
        .then(() => {
          this.getCustomers();
        })
        .catch(error => {
          // eslint-disable-next-line
          console.log(error);
          this.getCustomers();
        });
    },
    initForm() {
      this.addCustomerForm.name = "";
      this.addCustomerForm.email = "";
      this.addCustomerForm.phone = "";
      this.addCustomerForm.contacted = [];
    },
    onSubmit(evt) {
      evt.preventDefault();
      this.$refs.addCustomerModal.hide();
      let contacted = false;
      if (this.addCustomerForm.contacted[0]) contacted = true;
      const payload = {
        name: this.addCustomerForm.name,
        email: this.addCustomerForm.email,
        phone: this.addCustomerForm.phone,
        contacted // property shorthand
      };
      this.addCustomer(payload);
      this.initForm();
    }
  },
  onReset(evt) {
    evt.preventDefault();
    this.$refs.addCustomerModal.hide();
    this.initForm();
  },
  created() {
    this.getCustomers();
  }
};
</script>

The issue i'm having is that when I want to add a customer, the modal doesn't render unless the flask backend 'http://localhost:5000/customers' is off. But if it's off i can no longer make POST requests. My vue build is running on http://localhost:8080/#/ Thanks in advance.