I have a simple page to use vue.js 2.0, I need to wire the button’s click event to call the search function, but I got the following error in console when the page load:

Can someone point me to right direction how to troubleshoot? I am very new to Vue.js. Thank you!

TypeError: Cannot read properties of undefined (reading ‘_wrapper’)
at fi ([email protected]:11:60023)
at Yt ([email protected]:11:11053)
at Array.di ([email protected]:11:60302)
at k ([email protected]:11:70677)
at [email protected]:11:70896
at k ([email protected]:11:71371)
at [email protected]:11:70896
at k ([email protected]:11:71371)
at Er.patch ([email protected]:11:72506)
at t._update ([email protected]:11:44861)

My Code:

    <div id="app">
        <div style="width:100%;" class="search-panel">
            <input type="text" style="width:80%" :value="keyword" />
            <button v-on:click="app.search">Search</button>
        </div>
    </div>

    <script type="text/javascript">
    $(document).ready(function () {
        console.log("document ready");

        var searchParams = new URLSearchParams(window.location.search);
        var department = searchParams.get('dept');

        console.log("department: " + department);

        var app = new Vue({
            el: '#app',
            data() {
                return {
                    keyword: '',
                    "departments": [{ name: "Oncology", count: 3, selected: false }, { name: "Pediatrics", count: 3, selected: false }],
                    "managementGroups": [{ name: "Lung - Oncology", count: 1, selected: false }, { name: "Gastrointestinal - Oncology", count: 1, selected: false }, { name: "Head & Neck - Oncology", count: 1, selected: false }],
                    "locations": [{ name: "Sanford Fargo Region", count: 1, selected: false }, { name: "Sanford Sioux Falls Region", count: 1, selected: false }],
                    "ageGroups": [{ name: "Adult", count: 1, selected: true }, { name: "Children", count: 1, selected: false }, { name: "Both", count: 1, selected: false }],
                    "page": 1,
                    "pageSize": 10,
                    searchResults: [{ title: "TrialNet TN-01", description: "Natural History Study of The Development of Type 1 Diabetes" }]
                }
            },
            methods: {
                search: function () {
                    console.log("searching for " + this.keyword);
                    var searchRequest = getSearchRequest();
                    $.ajax({
                        url: '/v2/clinicaltrials/SearchClinicalTrials',
                        type: 'POST',
                        data: searchRequest,
                        success: function (data) {
                            console.log(data);
                            app.searchResults = data;
                        }
                    });
                },
                selectDepartmentFacet: function (name) {

                    console.log("selecting department facet: " + name);

                    this.departments.forEach(facet => {
                        if (facet.name == name) {
                            facet.selected = true;
                            console.log("selected: " + facet.name);
                        } else {
                            facet.selected = false;
                        }
                    });
                }
            }
        });

        if (department) {
            app.selectDepartmentFacet(department);
            //trigger search
        }
    });

    function getSearchRequest() {
        var request = {
            "keyword": "",
            "department": [],
            "managementGroup": [],
            "location": [],
            "ageGroup": [],
            "pageSize": 10,
            "page": 1
        }

        return request;
    }

</script>