javascript - Vue.js ignored when a blade is included in another blade

one text

Solution:

The problem is in the .innerHTML method as Vue.js ignores anything added via this method even if it's an AJAX. The solution consists on changing the controller to return a JSON and not a blade view, then using the JSON to populate a Vue.js component to create the item's card. the setGearItem() method was changed like so:

        setGearItem(gearItem) {

            this.gearItem = gearItem;
            this.modal = false;
            console.log(gearItem);
            document.getElementById("displaySearch").innerHTML = "";
            this.displayItemCard = false;

            axios.get('/send-name-get-ids/' + this.gearItem)
                .then((response) => {
                    console.log(response.data);
                    this.gearItemId = response.data[0];
                    if (response.data.length === 0) {
                        document.getElementById("displaySearch").innerHTML = 
                        `<p class="text-gray-700 ">
                        <strong class="capitalize">${gearItem}</strong>
                         was not found on our database. <br>You're free to add it manually! </p>`;

                        this.generalForm = true;
                        return;

                    } else {

                        this.displayItemCard = true;
                        
                    }
                });
        },

the displayItemCard just activates the card component on the view and displays the correct card according to the id.