Having problems with query cache

Hello, I am trying to display random query but to stay it in cache so it wont refresh when reloading page. I am using rememberable so I have remember() function working like it was in older versions. But even if I use Cache::remember I have same problem, In the limit I have selected 1 and on my website I also have message Showing 1 to 1 of 1 entries but actually I see everything there, so It doesn't work properly, but main problem is that cache is not working, after reloading page data is refreshing.

This is my controller code:

public function ListGames(Request $request)
{
    $query = Game::select(
        'games.id',
        'games.status',
        'games.title',
        'games.city',
        'games.district',
        'games.type',
        'games.comment',
        'games.points',
        'games.created_at',
        'games.photo')->inRandomOrder()->limit(1)->remember(1)
            ->where('games.user_id', '<>', Auth::user()->id)
            ->where('games.status', '=', '1'); 
            // ->leftJoin('game_bids', 'games.status', '=', 'game_bids.is_awarded');
        // ->whereIn('games.status_id', [ExamManager::getStatus(false, 'regular')->id, ExamManager::getStatus(false, 'retake')->id]);
        return DataTables::of($query)->toJson();
}

and this is my data table code:

        dataTableInit('#data-table', [5, 'desc'], 'POST', '{{ url('list/games') }}', [
            {
                title: '{{ Lang::trans('games.photo') }}',
                data: 'photo', render : function(data, type, row){
                  return '<img src="/images/default.jpg" class="img-fluid ${3|rounded-top,rounded-right,rounded-bottom,rounded-left,rounded-circle,|}" alt="">'
                //   return '<img src="/storage/game-photos/'+data+'" class="img-fluid ${3|rounded-top,rounded-right,rounded-bottom,rounded-left,rounded-circle,|}" alt="">'
            }},
            {
                title: '{{ Lang::trans('games.title') }}',
                data: 'title'
            },
            {
                title: '{{ Lang::trans('games.city') }}',
                data: 'city'
            },
            {
                title: '{{ Lang::trans('games.district') }}',
                data: 'district' 
            },
            {
                title: '{{ Lang::trans('games.type') }}',
                data: 'type'
            },
            {
                title: '{{ Lang::trans('games.created_at') }}',
                data: 'created_at'
            },
            {
            title: '{{ Lang::trans('games.status') }}',
            data: 'status', render : function(data, type, row)
            {
                switch (data)
                {
                    case '1': return '<span class="btn btn-success">{{ Lang::trans('games.going') }}</span>';
                        break;
                    case '2': return '<span class="btn btn-danger">{{ Lang::trans('games.disabled') }}</span>';
                        break;
                }
            }
        },
            {
                title: '{{ Lang::trans('games.actions') }}',
                defaultContent: '<div class="data-table-buttons-wrapper">' +
                                    '<button type="button" class="btn btn-info details-button" title="Details">{{ Lang::trans('games.view') }}</button> ' +
                                '</div>'
            }
        ]);
        detailsButton('{{ url('games/{id}') }}');