How to dynamically update properties of vector tile features in Mapbox GL JS

Question

I'm working on a single page app that displays some vector data and adds new properties based on the user inputs. I've explored two different approaches for loading the data: using GeoJSON and using vector tiles. While using GeoJSON worked fine, it resulted in very long loading times due to the size of the dataset. I'm now experimenting with vector tiles for better performance but running into issues adding new properties to it on the client side. With my GeoJSON I was able to use this: map.getSource('layer').setData(geojsonData); but can't find a similar solution with vector tiles.

How can I dynamically update and add new properties to my vector tile features in Mapbox GL JS? Any suggestions or alternative approaches would be greatly appreciated. And this is how I was loading in my GeoJSON, maybe there's a faster way?

const urls = [
                'URL_Part1',
                'URL_Part2',
                'URL_Part3'
              ];
  
            
            async function loadGeoJSON(urls) {
              try {
                const responses = await Promise.all(urls.map(url => fetch(url)));
                const dataArray = await Promise.all(responses.map(response => response.json()));
            
                const allFeatures = dataArray.flatMap(data => data.features);  
            
                const test = {
                  type: 'FeatureCollection',
                  features: allFeatures
                };
            
                console.log(test);

              } catch (error) {
                console.error('Error loading GeoJSON data:', error);
              }
            }
            
            loadGeoJSON(urls); */