Livewire not updating a value

Hey there guys,

I've recently made a component in Livewire for the first time. I didn't include it within a view, I load it in through a route instead. The basic thing is that I've made an increment and decrement method, They should update $page_number, but nothing seems to happen.

Here's the view that the component renders:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>

                <div class="card-body">
                    <h2 class="text-center">Domeinen</h2>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">Naam</th>
                                    <th scope="col">Opties</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($domains as $domain)
                                <tr>
                                    <th scope="row">{{$domain->id}}</th>
                                    <td>{{$domain->url}}</td>
                                    <td><a href="{{ route('domains.show', $domain->id) }}" class="btn btn-primary btn-font"><i class="fa fa-globe"></i> Bekijk domein details</a></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div>
                        <span>{{$page_number}}</span>
                        <button wire:click="decrement">-</button>
                        <button wire:click="increment">+</button>
                    </div>
                    <a href="{{ route('home') }}" class="btn btn-warning"><i class="fa fa-arrow-left"></i> Terug naar het dashboard</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

And here's the Component:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Http;

class DomainList extends Component
{
    public $base_url = 'https://my.gridpane.com/oauth/api/v1/site?page=';
    public $page_number = 1;
    public $domains = [];
    public $first_page;
    public $last_page;
    public $prev = true;
    public $next = true;

    public function mount(){
        $response = Http::withOptions([ //use this method
            'verify'     => false, //This key and value in this method
        ])->withHeaders([
            'Content-Type'  => 'application/json',
            'Accept'        => 'application/json',
            'Authorization' => 'Bearer '.env('TOKEN'),
            'data-raw'      =>  [
                'summary' => true,
            ],
        ])->get($this->base_url.$this->page_number);
        
        $this->first_page = $response['links']['first'];
        $this->last_page = $response['links']['last'];
        $this->domains = collect($response['data'])->map(fn($site) => (object) $site);
    }

    public function increment(){
        $this->page_number++;
        // dd($this->page_number);
    }

    public function decrement(){
        $this->page_number--;
    }

    public function render()
    {
        return view('livewire.domain-list');
    }
}

I've read in the docs and looked it up and you need to apply an empty div around your code like it's a template. But I'd like to include the main styling of my website.