当一个刀片包含在另一个刀片中时，Vue.js 被忽略

Question

I have created a product card view in Laravel. the card has a simple "accordion" ('Show Details') - closed by default - that is managed by Vue.js as well as a Vue.js quantity counter that changes the weight value in grams if you add products. It all functions very well on the card's view and it looks like this (closed):

I have another view in which I query my DB for product names with Vue.js to display all products of the same name as a result. The problem is when the cards are displayed on that "parent" view, they all appear with the accordion open and the counter is not responsive. It looks like so:

As you can see, the tailwindcss code is rendered without a problem but the Vue.js is being completely ignored (Although the parent view's Vue.js functions work perfectly) What am I doing wrong? What am I missing here? Why are the directives inside the included blade being ignored?

Here is the Vue.js method that manages the (product cards) views integration onto the parent (product name search) view:

        setGearItem(gearItem) {

            this.gearItem = gearItem;
            this.modal = false;
            console.log(gearItem);

            document.getElementById("displaySearch").innerHTML = "";

            axios.get('/send-name-get-ids/' + this.gearItem)
                .then((response) => {
                    console.log(response.data);
                    if (response.data.length === 0) {
                        document.getElementById("displaySearch").innerHTML = `"<strong>${gearItem}</strong>" was not found in our database. You can add it manually:`;
                        this.generalForm = true;
                        return;

                    } else {
                        for (let i = 0; i < response.data.length; i++) {
                            axios.get('/gearitem/' + response.data[i])
                                .then((response) => {
                                    console.log(response.data);
                                    document.getElementById("displaySearch").innerHTML += response.data;
                                    this.generalForm = false;
                                })
                                .catch((error) => {
                                    document.getElementById("displaySearch").innerHTML =
                                        "No items to display";
                                    console.log(error);
                                });
                        }
                    }
                });
        },

Answer 1

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.