HTML+JavaScript数组没有显示

如题，在HTML和JavaScript中设置了数组，但是在网页中并没有显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vueapp</title>
<script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
<script src="vueapp.js"></script>
</head>

<body>
<div id="app">
<ul>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
<!--arrays--->
<div id="app">
<ul id="example 2">
<li v-for="item in items">
{{parentMessage}}-{{$index}}-{{item.message}}
</li>
</ul>
</div>
</body>
<script src="vueapp.js"></script>
</html>


// JavaScript Document
new Vue({
    el:'#app',
    data:{
        todos:[
        {text:'learn javascript'},
        {text:'learn vue.js'},
        {text:'build something awesome'}
        ]
    }
})
var example2=new Vue({
    el:'#example 2',
    data:{
        parentMessage:'official website',
        items:[
        {message:'www.runoob.com'},
        {message:'www.runoob.com'},
        ]
    }
})

把id="example 2"中的空格去掉（引用的地方一样），id中不要使用空格，要么使用下划线

另外,index使用是不是该这样：

<li v-for="(item,index) in items">
{{parentMessage}}-{{index}}-{{item.message}}
</li>

https://zhidao.baidu.com/question/554179340184625252.html

代码中有两处div的id都是app，还有id命名不要加空格“example 2“，必要的代码规范还是要遵守的