[Vuejs]-Property or method * is not defined. Error when render

If you’re using a single-file Vue component, that means vue-loader is expecting the contents of the <template> tag to be the template definition of the component, and the contents of the <script> tag to export the configuration object used when instantiating the Vue instance.

Currently, your <template> contains a valid template definition, but your <script> doesn’t export anything. So when the Vue instance gets instantiated based on the contents of this file, it doesn’t know where to find the tables property that’s being referenced in the template.

You appear to be trying to mount a Vue instance to an element within the template definition. But, you should just export your Vue instance configuration object instead:

<template>
  <div >
    <input type='button' @click='allRecords()' value='Select All users'>
    <b-table striped hover responsive id="tabla_final" >
      <tr v-for='table in tables'>
        <td>{{ table.sum_real }}</td>
        <td>{{ table.sum_ppto }}</td>
        <td>{{ table.sum_real }}</td>
      </tr>
    </b-table>
  </div>
</template>

<script>
import Vue from 'vue'
const axios = require('axios')

export default {
  data() {
    return { tables: '' }
  },
  methods: {
    allRecords: function () {
      let self = this;
      axios.get('http://localhost/Tribeca/api.php')
        .then(function (response) {
          self.tables = response.data
          console.log(response.data)
        })
        .catch(function (error) {
          console.log(error)
        })
      }
    }
  })
}
</script>

Note that you’ll also need to make data a function which returns an object, and correctly reference the tables data property in the then callback of the axios call.