JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <h2 class="text-center">
    Lista de compras
  </h2>
  
  <h4 class="text-center">
    Módulo 3 - Sessão 1
  </h4>
  
  <div class="row">
    <div class="col-xs-8 col-xs-offset-2">
      <div class="list-group m-b">
        <div class="list-group-item"
          v-for="item in list">

          {{ item }}
        </div>
      </div>
      
      <h4 class="text-right">Total: {{ list.length }} itens</h4>
    </div>
  </div>
</div>

CSS

.m-b {
  margin-bottom: 10px;
}

JavaScript

new Vue({
  el: '#app',
  
  data: {
    list: [
    	'Leite',
      'Arroz',
      
    ]
  }
});