Attempting to delete contact with Axios inside of Vuejs

I am developing an app to store contact information and utilizing Vuejs and Laravel to do it. I am also using the axios library for CRUD functionality.

I have this error on axios.delete() I cannot figure out. This is my Contacts.Vue file:

<script>
  export default {
    data: function(){
      return {
        edit:false,
        list:[],
        contact:{
          id:'',
          name:'',
          email:'',
          phone:''
        }
      }
    },
    mounted: function(){
      console.log('Contacts Component Loaded...');
      this.fetchContactList();
    },
    methods: {
      fetchContactList: function(){
        console.log('Fetching contacts...');
        axios.get('api/contacts').then((response) => {
          console.log(response.data);
          this.list = response.data;
        }).catch((error) => {
          console.log(error);
        });
      },
      createContact: function(){
        console.log('Creating contact...');
        let self = this;
        // merging params to the current object
        let params = Object.assign({}, self.contact);
        // pass above to axios request
        axios.post('api/contact/store', params)
          .then(function(){
            self.contact.name = '';
            self.contact.email = '';
            self.contact.phone = '';
            self.edit = false;
            self.fetchContactList();
          })
          .catch(function(error){
            console.log(error);
          });
      },
      showContact: function(id){
        let self = this;
        axios.get('api/contact/' + id)
          .then(function(response){
            self.contact.id = response.data.id;
            self.contact.name = response.data.name;
            self.contact.email = response.data.email;
            self.contact.phone = response.data.phone;
          })
          self.edit = true;
      },
      updateContact: function(id){
        console.log('Updating contact '+id+'...');
        let self = this;
        // merging params to the current object
        let params = Object.assign({}, self.contact);
        // pass above to axios request
        axios.patch('api/contact/'+id, params)
          .then(function(){
            self.contact.name = '';
            self.contact.email = '';
            self.contact.phone = '';
            self.edit = false;
            self.fetchContactList();
          })
          .catch(function(error){
            console.log(error);
          });
      },
      deleteContact: function(id){
        axios.delete('api/contact/'+id)
          .then(function(response){
            self.fetchContactList();
          })
          .catch(function(error){
            console.log(error);
          });
      }
    }
  }
</script>

I am getting a TypeError message saying that self.fetchContactList is not a function.

I know that its saying that the value is not actually a function. There is no typo in the function name. Did I call the function on the wrong object? Should I be using a different property name?

I used self.fetchContactList(); on adding and updating contacts, why will it not work with deleting the contact?

Do I need to add request headers? I didn't have to for the other requests.

If I simply remove self.fetchContactList() it will not function at all.

Despite the error, when I refresh the page, it deletes the contact, but I want the contact deleted upon clicking the delete button.

via Chebli Mohamed