Vue.js 除非单击vue devtools（在浏览器中）中的元素，否则无法在阵列中存储axios调用的api数据

我正在使用axios从api获取数据，并在装载后存储在数组中，然后稍后在数组中运行搜索查询，但它不起作用，除非我在浏览器Vue developer tools中单击根元素，然后在Vue dev tool中单击Vue根元素，一切正常。这是我的代码

    <script type="module">
          const vueApp = new Vue({
             el: "#pos",
             data: {
                searchTerm: "",
                allProducts: [],
                selectedProducts: [],
                suggestions: []
             },
             mounted: function (){
               axios.get("api/products").then( res => this.allProducts = res.data );
             },
             methods: {
                select(item){
                   this.selectedProducts.push(item);
                   this.suggestions = [];
                }
             },
             computed:{
                matches(){
                   if(!this.searchTerm) return;
                   this.suggestions = this.allProducts.filter(sP=>(sP.prod_name).includes(this.searchTerm));
                }
             }
    });
    </script>

    //HTML below------------------
<div id="pos">
    <input type="text" v-model="searchTerm">
         <ul v-for="match in suggestions">
             <li @click="select(match)">
                  {{match.prod_name}}
             </li>
         </ul>

    <table>
    <tr v-for="(product,i) in selectedProducts">
      <td>@{{product.prod_name}}</td>
    </tr>
    </table>
</div>

{{match.prod_name}

---

正如我在对你的问题的评论中提到的，这是一个错误，我似乎无法理解你是如何得到的。我感觉到有些信息我们没有得到

因此，下面是一个从组件中安装的生命周期挂钩获取项目的快速工作示例。注意：如果您是通过单个文件组件.vue文件创建组件，那么不要太担心声明，只需注意数据和装入的方法

const App=Vue.component'App'{ 模板：` {{items.length}}获取的结果 `, 资料{ 返回{ 搜索项：， 项目：[] } }, 安装{ //用于模拟axios查询的超时 setTimeout=>this.items=[1,2,3,4]，1000 } }; const应用程序=新应用程序{ el:“应用程序” };

---

你试过只用挂载的{…}来代替吗？我从来没有遇到过这个问题也不能使用挂载的{…}，仍然需要从vue开发工具中单击。这是调用此代码的根元素吗？因为如果是这样的话，那就有意义了。是的，我只有一个实例和一个根元素，你能解释一下为什么会发生这种情况，以及如何解决它吗？我谦虚的感谢：在没有任何额外信息的情况下，您的应用程序似乎正在按预期运行。你希望有什么不同的行为？我已经更新了所有我正在尝试的代码。我没有使用任何只使用CDN和单个vue实例的组件。再次感谢您的帮助。@MilonHossain我已经用您的答案的更新版本编辑了我的问题-请看一看，让我知道这是否有助于您解决问题。

mounted: function(){
      var _self = this;
       axios.get("api/products").then( res => _self.allProducts = res.data );
     }