Vuejs2 vue未运行实例中保存的变量

我是Vue js新手，在Codesandbox上使用文档中的示例。这段代码显示了我的错误

[Vue warn]: Property or method "todos" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

我无法准确地发现问题出在哪里

<template>
  <div id="app">
    <ol>
      <li v-bind:key="todo.text" v-for="todo in todos">{{ todo.text }}</li>
    </ol>
  </div>
</template>

<script>
import Vue from "vue";

var app = new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript" },
      { text: "Learn Vue" },
      { text: "Build something awesome" }
    ]
  }
});
</script>

<style>
style here
</style>

{{{todo.text}
从“Vue”导入Vue；
var app=新的Vue({
el:“应用程序”，
数据：{
待办事项：[
{text:“学习JavaScript”}，
{文本：“学习Vue”}，
{文本：“构建一些很棒的东西”}
]
}
});
这里的风格

这是代码的一部分，问题出在这里

这是更新的代码。 您声明的todos变量不在vue实例中

您应该声明您的数据属性，如下所示

    <template>
  <div id="app">
    <ol>
      <li v-bind:key="todo.text" v-for="todo in todos">{{ todo.text }}</li>
    </ol>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";
export default {
  name: "App",
  components: {
    HelloWorld
  },
  data() {
    return {
      todos: [
        { text: "Learn JavaScript" },
        { text: "Learn Vue" },
        { text: "Build something awesome" }
      ]
    };
  }
};

{{{todo.text}
从“/components/HelloWorld”导入HelloWorld；
导出默认值{
名称：“应用程序”，
组成部分：{
你好世界
},
数据（）{
返回{
待办事项：[
{text:“学习JavaScript”}，
{文本：“学习Vue”}，
{文本：“构建一些很棒的东西”}
]
};
}
};

---

谢谢您的更正。但现在我感到困惑，因为官方文件中提供的例子不起作用。哪个例子？我认为这个链接可以帮助理解组件的数据功能。