VueJS - Running on Escaped

I would think that the bottom part of the code would evaluate to: {{ foo }} But for whatever reason, the VueJS parser is interpreting it as something to evaluate.

by judda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
<body>
  <div id="body">
    <ul>
      <li v-for="bar in foo">{{ bar }}</li>
    </ul>
    &#123;&#123; foo &#125;&#125;
  </div>
</body>

JavaScript

new Vue({
  data: function() {
  	return {
    	foo: ['bar', 'foobar',]	
    };
  },
	el: '#body',
});