Javascript Vue组件属性未定义

我是Vue的新手。我有一个每隔一段时间发生的AJAX请求，它会更新我的Pug模板中使用的对象。当使用双花括号单独引用数据时，它显示得很好，但是当它用于类似于for-each循环的内容时，它是未定义的，并且会破坏组件

<template lang="pug">
.mycomponent
  p {{ data }}  <- this reference to data works fine
  if data != undefined <- this reference to data is undefined
    each val, index in data
      li= val + ': ' + index
</template>

为什么数据未定义？

您可以执行以下操作：

<template lang="pug">
.mycomponent
  p {{ data }}
  ul(v-if="data !== undefined")
    li(v-for="(val, index) in data") {{ val }} : {{ index }}
</template>

.mycomponent
p{{data}
ul（v-if=“数据！==未定义”）
li（v-for=“（val，index）in data”）{{val}}:{{index}

<template lang="pug">
.mycomponent
  p {{ data }}
  ul(v-if="data !== undefined")
    li(v-for="(val, index) in data") {{ val }} : {{ index }}
</template>