Vue2 刷新页面，从map中读取的数据页面上不显示

问题描述

逻辑非常简单，没有Vuex，没有各种storage，只有一个后端接口，将接口中的数据拼接一番后展示在页面上，暂定名字为dataMap

然而，再简单的逻辑也有出问题的时候。无意间手动刷新了一次页面，忽然发现页面变为空白，console.log待输出的数据，无论怎么刷新页面。控制台完全正常

解决

一开始以为是http请求写在mounted中导致的，换到created中，无果

将dataMap添加一个深度监听，无果 (虽然确实没什么道理)

将接口中获取的数据直接显示在页面上，奇迹发生了，刷新N次，页面均正常显示，如果注释掉，刷新后依然不显示。
于是怀疑问题是不是出在接口数据的处理上。

接口中获取的数据是一个array, 为了便于展示，将其转为一个map用于页面渲染。在渲染时，使用了以下方式

<div class="row" v-for="(item, index) in Object.keys(dataMap)" :key="index">
    <div v-for="(item, index) in dataMap[key]" :key="index">
        {{ item.info }}
    </div>
</div>

猜测是否是由于Object.keys(dataMap)未能及时获取数据导致的，将其修改为一个变量dataKeys，果然显示正确。