как использовать MySQL JSON_OBJECTAGG с Laravel и JavaScript

Question

Я разрабатываю приложение с Laravel, Vue и mysql (версия 5.7) и пытаюсь выполнить этот запрос mysql на одном из моих контроллеров, и он возвращает желаемый результат, но проблема в том, что результат, который я получаю из JSON_OBJECTAGG, являетсястрока

Представленная функция

   async getAddedActivities(vehicle_no,sv_activity_id){
      try {
          let config={
              'Content-Type':'application/json'
          }
          const response = await axios.get('get-temp-sv-activities/'+vehicle_no+'/'+sv_activity_id,config);

          if(response.data.alert=='success'){
             this.extra_details_sv = response.data.result
              console.log(response.data.result);

             var dd = response.data.result;
             console.log(dd);

          }else if(response.data.alert=='empty'){
              this.extra_details_sv = []
          }else{
              toastr.error(response.data.msg)
          }

      } catch (error) {
          console.error(error);
      }
  }

Функция контроллера

    public function getTempSvActivities(Request $request){
    try{
        $vehicle_no = $request->vehicle_no;
        $sv_activity_id = $request->sv_activity_id;
        $user_id = auth()->user()->id;
        $date = date("Y-m-d");

        $query="SELECT c.CustomerCode, c.CustomerName, c.Address, JSON_OBJECTAGG(sf.Feild_name,IF(svd.Detail=3,dt.type,svd.Value)) AS Val
                FROM service_vehicle_planner_h2 svph2
                INNER JOIN customer c ON c.CustomerId = svph2.Customer_code
                INNER JOIN service_vehicle_details svd ON svd.IDservice_vehicle_planner_H2 = svph2.IDservice_vehicle_planner_H2
                INNER JOIN service_fields sf ON sf.IDService_fields = svd.Detail
                INNER JOIN dispenser_types dt ON dt.id = svd.Detail";

        $res = DB::select($query);

        Debugbar::info($res);

        if(!count($res)==0){
            return response()->json(['alert'=>'success','result'=>$res]);
        }else{
            return response()->json(['alert'=>'empty']);
        }

    }catch (\Exception $e){
        return response()->json(['msg'=>$e->getMessage()]);
    }

}

результат, который я получаю в Debugbar

array:1 [▼
0 => {#468 ▼
    +"CustomerCode": "PEO198"
    +"CustomerName": " PEOPLE CONNECT PVT LTD"
    +"Address": " PEOPLE CONNECT PVT LTD, 57 W.A. SILVA MAWATHA, COLOMBO 060112555590 0777881238 "
    +"Val": "{"Full Bottles": "2", "Empty Bottles": "2", "Dispenser Type": "Table Top", "Number of Dispensers": "2"}"
  }
]

Я хочу получить значенияв «Вал» и для меня это выглядит как строка.Как я могу получить значение в «Val».Любая помощь будет оценена!