Clicking Parse Button Throws vue TypeError

[dev-angelo-c]

Context

Clicking the parse button in the sandbox threw an error gave no visual indication there was an error or missing/incorrect params in the API call.

QUERY:

https://docs.mapbox.com/search-playground/#{%22url%22:%22youngstown,%20oh%22,%22index%22:%22mapbox.places%22,%22approx%22:true,%22staging%22:false,%22onCountry%22:false,%22onWorldview%22:false,%22onType%22:false,%22onProximity%22:true,%22onBBOX%22:true,%22onLimit%22:true,%22onLanguage%22:true,%22countries%22:[],%22worldviews%22:[],%22proximity%22:%22%22,%22typeToggle%22:{%22country%22:false,%22region%22:false,%22district%22:false,%22postcode%22:false,%22locality%22:false,%22place%22:false,%22neighborhood%22:false,%22address%22:false,%22poi%22:false},%22types%22:[],%22bbox%22:%22%22,%22limit%22:%22%22,%22autocomplete%22:true,%22languages%22:[],%22languageStrict%22:false,%22onDebug%22:false,%22selectedLayer%22:%22%22,%22debugClick%22:{},%22localsearch%22:true,%22routing%22:true,%22query%22:%22%22}

EXCEPTION:

main.js:333 Uncaught TypeError: Failed to construct 'URL': Invalid URL
    at Vue$3.parseURL (main.js:333)
    at boundFn (vue.js:194)
    at invoker (vue.js:1992)
    at HTMLButtonElement.fn._withTask.fn._withTask (vue.js:1790)

CODE:

        // methods functions perform CRUD operations on the `data` property
        methods: {
            help: function(url = 'https://docs.mapbox.com/api/search/#forward-geocoding') {
                window.open(url, '_blank');
            },
            //Parse Settings from a Mapbox API URL
            parseURL: function() {
                const url = new URL(this.cnf.url);

                this.resetCnf();