I solved it by making this

var vue = new Vue({
  el:'#textExample',
  data:{
    loans:[ { "1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "8": 8, "9": 9, "10": 10, "11": 11, "12": 12 }, { "1": 70000, "2": 66524.45, "3": 62736.11, "4": 58606.81, "5": 54105.88, "6": 49199.86, "7": 43852.3, "8": 38023.47, "9": 31670.03, "10": 24744.79, "11": 17196.27, "12": 8968.39 }, { "1": 3475.55, "2": 3788.35, "3": 4129.3, "4": 4500.93, "5": 4906.02, "6": 5347.56, "7": 5828.84, "8": 6353.43, "9": 6925.24, "10": 7548.52, "11": 8227.88, "12": 8968.39 }, { "1": 6300, "2": 5987.2, "3": 5646.25, "4": 5274.61, "5": 4869.53, "6": 4427.99, "7": 3946.71, "8": 3422.11, "9": 2850.3, "10": 2227.03, "11": 1547.66, "12": 807.16 }, { "1": 9775.55, "2": 9775.55, "3": 9775.55, "4": 9775.55, "5": 9775.55, "6": 9775.55, "7": 9775.55, "8": 9775.55, "9": 9775.55, "10": 9775.55, "11": 9775.55, "12": 9775.55 }, { "1": "Mar 17, 2018", "2": "Apr 16, 2018", "3": "May 16, 2018", "4": "Jun 15, 2018", "5": "Jul 15, 2018", "6": "Aug 14, 2018", "7": "Sep 13, 2018", "8": "Oct 13, 2018", "9": "Nov 12, 2018", "10": "Dec 12, 2018", "11": "Jan 11, 2019", "12": "Feb 10, 2019" }, { "1": 66524.45, "2": 62736.11, "3": 58606.81, "4": 54105.88, "5": 49199.86, "6": 43852.3, "7": 38023.47, "8": 31670.03, "9": 24744.79, "10": 17196.27, "11": 8968.39, "12": 0 } ]
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="textExample">
  <table class="table table-bordered">
			<thead>
				<tr>
					<th> Month</th>
					<th> Opening Principal</th>
					<th> Principal Taken</th>
					<th> Interest</th>
					<th> Payment</th>
					<th> Repayment Date</th>
					<th> Closing Principal</th>
				</tr>
			</thead>
			<tr v-for="loan in loans[0]">
				<td v-for="otherloan in loans">{{otherloan[loan]}}</td>

			</tr>


		</table>
</div>

by only changing the tr and td tags v-for's like this:

<tr v-for="loan in loans[0]">
                <td v-for="otherloan in loans">{{otherloan[loan]}}</td>

            </tr>

You can do it using formatter like

fields: [
   {
      key: 'id',
      label: 'id',
      sortable: true
   },
   {
      key: 'name',
      label: 'name',
      sortable: true
   },
   {
      key: 'location',
      label: 'location',
      sortable: true,
      formatter: (value, key, item) => { 
         return value.map(x => 'prov: ' + x.prov + ' city:' + x.city).join(", ") 
      }
   },
   {
      key: 'applied',
      label: 'applied',
      sortable: true,
      formatter: (value, key, item) => { 
         return value.map(x => x.item_name).join(", ") 
      }
   },
   { key: 'actions', label: 'Doc' }
],

It will show for the location column this: prov: Jawa Barat city:Bandung, prov: Banten city:Tanggerang and for the applied column this: galian, timbunan

I think this is what you are asking for. Iterate over the weekTimings and display each value in your table.

    var data = {  
       "status":true,
       "data":{  
          "pid":10,
          "businessName":"Ey technology",
          "services":"1, 3, 4, 2",
          "inventory":[  
             "specs",
             "Eye Testing",
             "Lens",
             "Doctors"
          ],
          "workHr":"Monday :9:00AM to 5:00PM,Thuesday :9:00AM to 5:00PM,Wednesday :9:00AM to 5:00PM,Tuesday : 9:00AM to 5:00PM,Friday :9:00AM to 5:00PM,Saturday :9:00AM to 5:00PM,Sunday :9:00AM to 5:00PM",
          "description":"Good technology company for software",
          "category":1,
          "sub_category":[  
             "Homeo pathy",
             "Web development"
          ],
          "lat":9.5274336,
          "lon":76.8224309,
          "contactName":"simon",
          "contactEmail":"[email protected]",
          "contactOfficeAddress":"college of Eng",
          "contactNumber":"1236547859",
          "contactOfficeNumber":"8947123658",
          "state":"Kerala",
          "city":"Koy",
          "place":"Kly",
          "pincode":686514,
          "referer":24,
          "link":24,
          "views":0,
          "package":1,
          "listing_pic":"default",
          "website":"www.ey.com"
       }
    }

    var weekTimings = data.data.workHr.split(",").map(day => {
        let arr = day.split(":")
        arr.splice(0,1);
        return arr.join(":");
    });

    var sundayTiming = weekTimings.pop();
    weekTimings.unshift(sundayTiming);
    console.log(weekTimings);
   
   // You can do like below using JS or you can use jQuery and shorten your code
   document.getElementById("sun").innerHTML = weekTimings[0];
   document.getElementById("mon").innerHTML = weekTimings[1];
   document.getElementById("tue").innerHTML = weekTimings[2];
   document.getElementById("wed").innerHTML = weekTimings[3];
   document.getElementById("thu").innerHTML = weekTimings[4];
   document.getElementById("fri").innerHTML = weekTimings[5];
   document.getElementById("sat").innerHTML = weekTimings[6];
 

<table class="table">
  <thead>
    <tr>
      <th>Sunday</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="sun"></td>
      <td id="mon"></td>
      <td id="tue"></td>
      <td id="wed"></td>
      <td id="thu"></td>
      <td id="fri"></td>
      <td id="sat"></td>
    </tr>
  </tbody>
</table>

Using Vue.js

You can iterate over the array using v-for and display the data

<td v-for="day in weekTimings">{{ day }}</td>

Hope this helps :)