[Vuejs]-Vue loop – only works on #id but not .class?

What your code is trying to do is set up the same Vue instance variable two separate places on the same page and that will not work. You need to put all your vue code into one surrounding element with an id. Vue starts its instance on that element to react to all code underneath. If you change your code to something like the following it will work:

<div id="example-1">
  <ul class="example-2">
    <li v-for="item in items">
      {{ item.message }}
    </li>
  </ul>
  <div class="example-1">
    <div v-for="item in items">
      {{ item.message }}
    </div>
  </div>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

And here is a working pen:
https://codepen.io/egerrard/pen/GMBKRX

If you wanted two separate instances you could do that but you’d need to create two new Vue() instances like in the following pen:

https://codepen.io/egerrard/pen/XeBrdp