[Vuejs]-How to apply datatables using Vuejs with Laravel

I would suggest you the following approach for your case: First, you have a data variable sockets where you collect all records data from your API. For the pagination I would create another variable which determines the page at which the user is (pageIndex) and another variable which describes how many items exist on each page (itemsOnPage). Then using these variable you can create a computed property to filter the data only for that page and then use this computed property in your template for the table instead of directly using sockets. Example:

<template>
    <tr v-for="socket in paginatedSockets">
      <td>{{ socket.id }}</td>
      <td>{{ socket.user_id }}</td>
      <td>{{ socket.message_title }}</td>
      <td>{{ socket.process_type }}</td>
      <td>{{ socket.description }}</td>
      <td>{{ socket.data_load }}</td>
      <td>{{ socket.msg_code }}</td>
      <td>{{ socket.log_type }}</td>
    </tr>
</template>

<script>
export default {
  computed: {
    paginatedSockets() {
      return this.sockets.filter((socket, index) => {
        // Filter the array fo get only the items you want from this.sockets, something like that (this is not complete):
        return index < this.itemsOnPage;
      });
    },
  },
  data() {
    return {
      sockets: [],
      pageIndex: 0,
      itemsOnPage: 10,
    };
  },
};
</script>

About the filtering you can extend this computed property with logic for this. You can have for example an <input v-model="searchCriteria"/> which binds to a data variable searchCriteria and then use it in paginatedSockets. Example:

export default {
  computed: {
    paginatedSockets() {
      return this.sockets.filter((socket, index) => {
        // Filter the array fo get only the items you want from this.sockets, something like that (this is not complete):
        return socket === this.searchCriteria && index < this.itemsOnPage;
      });
    },
  },
  data() {
    return {
      sockets: [],
      pageIndex: 0,
      itemsOnPage: 10,
      searchCriteria: ''
    };
  },
};
</script>

I hope this helps.