Get Total price from list of data vuejs and laravel

I have view with from and to date along with some branch,spareparts as drop down when i select from and to date it will retrive some data along with branch name,grand total etc.what i am trying to do is i need whole total of grand total prices column let’s say i have 10 data each data contains grand total of 1000 per each data,i need to find total of 10 data which will be 10,000.

View

<template>
    <div>
        <div class="card">
            <div class="card-header d-flex flex-wrap align-items-center">
                <h5 class="card-title flex-grow-1 button-title d-flex justify-content-between my-auto">
                    <span class="my-auto" v-if="scrap_collection_report">Scrap Collection Report</span>
                    <span class="my-auto" v-if="price_approval_report">Price Approval Report</span>
                    <span class="my-auto" v-if="pending_verification_report">Pending Verification Report</span>
                </h5>
            </div>
            <div class="card-header d-flex flex-wrap align-items-center">
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>From Date</label>
                            <input type="date" v-model="form.from_date" required="required" autocomplete="off" class="form-control" id="from_date">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>To Date</label>
                            <input type="date" v-model="form.to_date" required="required" autocomplete="off" class="form-control" id="to_date">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Branch</label>
                            <select v-model="form.branch_id" id="branch_id" class="form-control">
                                <option value="">ALL</option>
                                <option :value="branch.id" v-for="(branch,index) in branches" :key="index">
                                    {{ branch.name }}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Zone</label>
                            <select v-model="form.zone_id" id="zone_id" class="form-control">
                                <option value="">ALL</option>
                                <option :value="zone.id" v-for="(zone,index) in zones" :key="index">
                                    {{ zone.name }}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2" v-if="scrap_collection_report">
                        <div class="form-group">
                            <label>Scrap Item</label>
                            <select v-model="form.scrap_item_id" id="scrap_item_id" class="form-control">
                                <option value="">ALL</option>
                                <option :value="scrap_item.id" v-for="(scrap_item,index) in scrap_items" :key="index">
                                    {{ scrap_item.name }}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2" v-if="price_approval_report">
                        <div class="form-group">
                            <label>Approval Status</label>
                            <select v-model="form.approval_status" id="approval_status" class="form-control">
                                <option value="">ALL</option>
                                <option value="1">Approved</option>
                                <option value="2">Rejected</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <div class="form-group">
                            <label></label>
                            <a class="btn btn-success form-control" style="background-color:#2a3f56; color:white;" @click="get_data()"><i class="fa fa-search"></i></a>
                        </div>
                    </div>
                    <div class="col-md-1" v-if="scrap_collections.total != 0">
                        <div class="form-group">
                            <label></label>
                            <a class="btn btn-primary form-control" @click="exportExcel()">Excel</a>
                        </div>
                    </div>
                </div>
            <div class="table-responsive">
                <table class="table table-bordered">


                    <thead>
                        <tr>
                            <th>SlNo</th>
                            <th>Branch</th>
                            <th>Date</th>
                            <th>Grand Total</th>
                            <th>Verification Status</th>
                            <th v-if="!pending_verification_report">Verified By</th>
                            <th v-if="!pending_verification_report">Verified On</th>
                            <th v-if="!pending_verification_report">Approval Status</th>
                            <th v-if="!pending_verification_report">Approved By</th>
                            <th v-if="!pending_verification_report">Approved On</th>
                            <th>View</th>

                        </tr>
                    </thead>

                    <tbody>
                        <tr v-if="loading">
                            <td colspan="21" class="text-center text-secondary">Loading</td>
                        </tr>
                        <tr v-if="scrap_collections.total == 0">
                            <td colspan="21" class="text-center text-secondary">No data</td>
                        </tr>

                        <tr v-for="(scrap_collection,index) in scrap_collections.data" :key="scrap_collection.id" v-else>
                            <td> {{ (scrap_collections.current_page*15)-15+index+1 }}</td>
                            <td> {{ scrap_collection.branch.name }} </td>
                            <td> {{ scrap_collection.date }} </td>
                            <td> {{ scrap_collection.grand_total }} </td>
                            <td>{{ scrap_collection.verification_status == 0 ? 'On Process' : 'Completed' }}</td>
                            <td v-if="!pending_verification_report">{{ scrap_collection.user_verified != null ? scrap_collection.user_verified.employee.employee_name : '' }}</td>
                            <td v-if="!pending_verification_report">{{ scrap_collection.verified_on }}</td>
                            <td v-if="!pending_verification_report">{{ scrap_collection.approval_status == 0 ? 'Pending' : scrap_collection.approval_status == 1 ? 'Approved' : scrap_collection.approval_status == 2 ? 'Rejected' : '' }}</td>
                            <td v-if="!pending_verification_report"> {{ scrap_collection.user_approved != null ? scrap_collection.user_approved.employee.employee_name : '' }} </td>
                            <td v-if="!pending_verification_report"> {{ scrap_collection.approved_on }} </td>
                            <td>
                                <button class="btn btn-sm btn-outline-info" data-toggle="modal" data-target="#_2" @click="showData(scrap_collection.scrap_collection_items)"><i class="far fa-eye mr-1"></i> View</button>
                            </td>



                        </tr>
                    </tbody>

                </table>
                <table class="table table-bordered">
                    <thead>
                        <tr>

                        <th>Grand Total:{{"Total"}}</th>

                    </tr>

                       
                    </thead>
                        </table>
                <div class="col-md-10">
                    <pagination :data="scrap_collections" :limit="3" :show-disabled="true" @pagination-change-page="get_data" align="center">
                        <span slot="prev-nav">Prev</span>
                        <span slot="next-nav">Next</span>
                    </pagination>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    props:['branches','user_type_id','zones','scrap_items','price_approval_report','scrap_collection_report','pending_verification_report'],
    data () {
        return {
            scrap_collections   : {},
            sum:{},
            current_page: 0,
            from        : 0,
            to          : 0,
            total       : 0,
            loading     : false,
            form        : {
                from_date:'',
                to_date:'',
                branch_id:'',
                zone_id:'',
                scrap_item_id:'',
                approval_status:''
            },
            selectedScrapCollection:[]
        }
    },
    created() {
        this.get_data();
        // this.defaults();
    },
    methods : {
        get_data(page = 1) {
            this.loading = true;
            var url = '/get-scrap-collection-report'
            axios.get(url+'?page='+page+'&from_date='+this.form.from_date+'&to_date='+this.form.to_date+'&branch_id='+this.form.branch_id+'&approval_status='+this.form.approval_status
            +'&zone_id='+this.form.zone_id+'&scrap_item_id='+this.form.scrap_item_id+'&scrap_collection_report='+this.scrap_collection_report+'&price_approval_report='+this.price_approval_report+'&pending_verification_report='+this.pending_verification_report)
            .then(response => {
                this.loading      = false;
                this.scrap_collections    = response.data.data.scrap_collections;
                this.current_page = this.scrap_collections.current_page;
                this.from         = this.scrap_collections.from;
                this.to           = this.scrap_collections.to;
                this.total        = this.scrap_collections.total;
                this.loading      = false;
            })
            .catch(e => {
                this.loading = false;
                toastr.error("Couldn't load data");
            })
        },
}

Controller

public function getScrapCollectionReport(Request $request)
    {
        $scrap_total=0;
        $scrap_collections = ScrapCollection::with(['branch:id,name,zone_id','scrap_collection_items','user_verified','user_approved'])->orderBy('id','desc');
        if($request->user()->user_type_id > 2){
            $employee = Employee::find($request->user()->employee_id);
            $branches = Branch::whereIn('name',json_decode($employee->branches))->get()->pluck('id')->toArray();
            $scrap_collections = $scrap_collections->whereIn('branch_id',$branches);
        }
        $report_name = 'Scrap_Collection_Report_';

        if($request->from_date || $request->to_date || $request->branch_id || $request->zone_id || $request->scrap_item_id || $request->approval_status)
        {

            if($request->from_date && $request->to_date)
            {

                $from      = date('Y-m-d', strtotime($request->from_date));
                $to        = date('Y-m-d', strtotime($request->to_date));
                $scrap_collections = $scrap_collections->whereBetween('date',[$from,$to]);
                $scrap_total=$scrap_collections->sum('grand_total');

            }
            elseif($request->from_date)
            {
                $from      = date('Y-m-d', strtotime($request->from_date));
                $scrap_collections = $scrap_collections->where('date','>=',$from);
                $scrap_total=$scrap_collections->sum('grand_total');
            }
            elseif($request->to_date)
            {
                $to        = date('Y-m-d', strtotime($request->to_date));
                $scrap_collections = $scrap_collections->where('date','<=',$to);
                $scrap_total=$scrap_collections->sum('grand_total');
            }
            if($request->branch_id)
            {
                $scrap_collections = $scrap_collections->where('branch_id',$request->branch_id);
                $scrap_total=$scrap_collections->sum('grand_total');
            }
            if($request->zone_id)
            {
                $scrap_collections = $scrap_collections->whereHas('branch',function($q) use($request){
                    $q->where('zone_id',$request->zone_id);
                });
                $scrap_total=$scrap_collections->sum('grand_total');
            }
            if($request->scrap_item_id)
            {
                $scrap_collections = $scrap_collections->whereHas('scrap_collection_items',function($query) use($request){
                    $query->where('scrap_item_id',$request->scrap_item_id);
                });
                $scrap_total=$scrap_collections->sum('grand_total');
            }
            if($request->approval_status)
            {
                $scrap_collections = $scrap_collections->where('approval_status',$request->approval_status);
            }
            if($request->price_approval_report == 'true')
            {
                $report_name = 'Price_Approval_Report_';
                $scrap_collections = $scrap_collections->whereNotNull('approval_status');
            }
            if($request->pending_verification_report == 'true')
            {
                $report_name = 'Pending_Verification_Report_';
                $scrap_collections = $scrap_collections->where('verification_status',0);
            }
            if($request->has('excel_export'))
            {
                $scrap_collections = $scrap_collections->get();
                return Excel::download(new ScrapCollectionReport($request,$scrap_collections), $report_name . date('Y-m-d') . '.xlsx');
            }
            else{
                $scrap_collections = $scrap_collections->paginate(100);

               // $scrap_total=$scrap_collections->sum('grand_total');

            }


        }
       
        $data['scrap_collections'] = $scrap_collections;
     //  $sum['whole_total']= $scrap_total;

        return $this->sendResponse(true,$data);
    }

Sample Video