[Vuejs]-V-for not displaying records after his has fetched on console

You have a scoping issue, this inside a callback refers to the execution context of the callback not the Vue instance. You need to either assign this to something outside the callback:

// assign this to self
var self = this;
axios.post(this.url,data)
  .then( function (response ) {
      self.artificialInseminationRecords = response.data.data
}).catch(function (error) {

})

Or use an arrow function which do not create their own execution context:

axios.post(this.url,data)
  .then( response => {
      this.artificialInseminationRecords = response.data.data
}).catch(function (error) {

})

You decided to use created event, but you defined it as a method. 🙂

Look at this sample:
Async Data Mutation inside of Created Event

We only needed to add bind like this

   viewRecords:function () {
          var data = new FormData()
          data.append('function','viewRecords')
          axios.post(this.url,data)
              .then( function (response ) {
              this.artificialInseminationRecords = response.data.data
          }.bind(this)).catch(function (error) {

          })

        }