Get JSON and Populate Table in MVC: Vue JS

ADD Reference: <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 

JQUERY: 

$("#btnView").click(function (e) {

            $('tbody').empty();

            e.preventDefault();

            var DateFrom = $("#txtFromDt").val();

            var DateTo = $("#txtToDt").val();

            var url;

            if (DateFrom != '' && DateTo != '') {

              //  var url = '/GroupwiseReport/GenerateStaffwiseStatementReport?DateFrom=' + DateFrom + '&DateTo=' + DateTo;

                var url = '/GroupwiseReport/EmployeeServiceBookReport?DateFrom=' + DateFrom + '&DateTo=' + DateTo;

               // window.open(url, 'mywindow', 'fullscreen=yes, scrollbars=auto');

                 //$('tbody').remove();

                $.getJSON(url,

                    function (json) {

                        var tr;

                        //Append each row to html table  

                        for (var i = 0; i < json.length; i++) {

                            tr = $('<tr/>');

                            tr.append("<td>" + json[i].Recoverable + "</td>");

                            tr.append("<td>" + json[i].CurRecovery + "</td>");

                            tr.append("<td>" + json[i].DueMembersLoanBalance + "</td>");

                            tr.append("<td>" + json[i].DisbursementAmount + "</td>");

                            $('tbody').append(tr);

                        }

                    });

                 

            }

            else {

                alert('Date field cannot be blank')

            }

        });

HTML: TABLE

 <div class="row">

        <table class="table table-bordered table-condensed table-hover table-striped">

            <thead>

                <tr>

                    <th>Recoverable</th>

                    <th>CurRecovery</th>

                    <th>DueMembersLoanBalance</th>

                    <th>DisbursementAmount</th>

                </tr>

            </thead>

            <tbody></tbody>

        </table>

    </div>

--------------------------------------------------------

IN Controller:: 

 [HttpGet]

        public JsonResult EmployeeServiceBookReport(string DateFrom, string DateTo)

        {

            try

            {

                var filter = new SearchFilterData{ OfficeID = (int)SessionHelper.LoginUserOfficeID, DateFrom = Convert.ToDateTime(DateFrom), DateTo = Convert.ToDateTime(DateTo) };

                var listings = employeespService.GetStaffwiseStatementDSKNewByFilter(filter);

                //return Content(string.Empty);

                return Json(listings, JsonRequestBehavior.AllowGet);

            }

            catch (Exception ex)

            {

                return Json(new { Result = "ERROR", Message = ex.Message });

            }

        }