Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- Bootstrap CSS 4.3.1 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <!-- Axios -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <!-- VueJS -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div class="container mt-4" id="app">

    <table class="table table-bordered">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Marca</th>
          <th scope="col">Modelo</th>
          <th scope="col">Polifonía</th>
          <th scope="col">VCA</th>
          <th scope="col">Efectos</th>
          <th scope="col">Teclado</th>
          <th scope="col">Memoria</th>
          <th scope="col">Precio</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="sintetizadores, index in users">
          <th scope="row">{{ index + 1 }}</th>
          <td>{{ sintetizadores.marca }}</td>
          <td>{{ sintetizadores.modelo }}</td>
          <td>{{ sintetizadores.polifonia }}</td>
          <td>{{ sintetizadores.VCA }}</td>
          <td>{{ sintetizadores.efectos }}</td>
          <td>{{ sintetizadores.teclado }}</td>
          <td>{{ sintetizadores.memoria }}</td>
          <td>{{ sintetizadores.precio }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        users: []
      },
      mounted: function() {
        axios.get('http://localhost:3000/sintetizadores')
            .then(response => {
              this.users = response.data;
              console.log(response);
            })
            .catch(error => {
              console.log(error);
            });
      }
    })
  </script>
</body>
</html>