Publishing a vector layer from GeoServer to use in Mapbox

I have published a vector file in GeoServer 2.15.1. How can I add this layer to Mapbox?
The example in doc.geoserver.com works fine but when I use my layer in the provided format it keeps showing 404 error for the request.
After that, I used the code below but still can’t get any progress.

mapboxgl.accessToken = 'pk.eyJ1IjoibW9oYW1tYWRob3NzZWluOCIsImEiOiJjazZrYmM5YmEwMmQ2M2RwNmppMzBvbHd3In0.Ki5iFg47J1PJB3W0Z6wlgQ';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [80, -50],
        zoom: 4
    });

    map.on('load', function() {
        var layers = map.getStyle().layers;
        // Find the index of the first symbol layer in the map style
        var firstSymbolId;
        for (var i = 0; i < layers.length; i++) {
            if (layers[i].type === 'symbol') {
                firstSymbolId = layers[i].id;
                break;
            }
        }
        map.addSource(
        'large_area_tight_modelling', {
            'type': 'vector',
            "tiles": [
                "http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=test:large_area_tight_modelling&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}"

            ],
            "minZoom": 0,
            "maxZoom": 14
        });

       map.addLayer(
        {
            'id': 'large_area_tight_modelling',
            'type': 'fill',
            'source': 'test:large_area_tight_modelling',
            'layout': {},
            'paint': {
                'fill-color': '#f08',
                'fill-opacity': 0.4
            }

        },
        firstSymbolId
    );
});