vue not running variable saved in instance - vuejs2

Question

I am new to Vue js, working with examples in docs on Codesandbox. This code showing me error
[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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
I couldn't detect where is the problem exactly.
<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>
Here is a live example of the code and the problem

Answer 1

Here is the updated code.
The todos variable you declared was not in the instance of vue.
You should declare your data property as below.
<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" }
]
};
}
};
https://codesandbox.io/s/9o2036km1r