v-for vueJS condition v-if

I have a problem with v-for with v-if en my component VUEJS

I need that if i have one promotion active show it in my div but if i haven´t got any promotion active show button for buy a promotion.

I have do all my condition, but always show that i don´t have promotion active, but in console, no, in web browser console, i can show my aray with promotion.

I attached my actual code.

i have got to say that all my code is in laravel.

Route:

Route::get('/getBonoUsuario', 'BonosController@getBonoUsuario')->name('getBonoUsuario');

Controller:

public function getBonoUsuario(){
    $usuario = Auth::user()->id;


    $bonoUsuario = DB::select(DB::raw("SELECT * 
                                         FROM contratan, bonos
                                         WHERE usuario = $usuario
                                         AND contratan.bono = bonos.codBono
                                         AND activo = 1 "));

return $bonoUsuario;
}

component vueJS

<template>

    <div class="">
        <table class="table table-hover table-striped tabla-bonos">
            <thead>
                <th>Id</th>
                <th>Tipo</th>
                <th>Minutos</th>
                <th>Precio</th>
                <th>Contratar</th>
            </thead>
            <tbody>
                <tr v-for="data in bonosDisponibles" :key="data.id">
                
                    <td>{{ data.codBono }}</td>
                    <td>{{ data.tipo }}</td>
                    <td>{{ data.minutos }}</td>
                    <td>{{ data.precio }} €</td>
                    <td><button class="btn btn-danger contratar" @click="contratar(data.codBono)">Contratar</button></td> 
                </tr>
            </tbody>
        </table> 


        <div class="panel panel-info mt-5">
            <div class="panel-heading">
                Tipo de bono actual
            </div>
                <div class="panel-body" >
                    <div v-for="data in bonosUsuario" :key="data.id">
                        <div v-if=" data > 0 ">
                          Usted tiene contratado el bono: {{ data.tipo }} de {{ data.minutos }} min y aún le quedan {{ data.tiempoRestanteBono }} <br/> Si lo desea puede renovarlo haciendo click en este botón: <button class="btn btn-warning" @click="renovar">Renovar</button>
                        </div>
                        <div v-else>
                          <h3> Sin Bono activo </h3> Puede contratar uno haciendo click aquí <a href="/estadoBono"><button class="btn btn-danger">Contratar</button></a>
                        </div>
                    </div>
                </div>

            </div>
        </div>




    </div>

    

        
</template>



<script>

    export default {

        data() {
            return {
                bonosDisponibles: [],
                bonosUsuario: [],
                isOpen: false,
                selectedItem: {},
            };

        },
        created: function () {
            this.cargar();
            this.bonoUsuario();
        },
        methods: {

            cargar: function () {
                let url = "/getBonosDisponibles";
                axios
                    .get(url)
                    .then((response) => {
                        this.bonosDisponibles = response.data;

                    })
                    .catch((error) => console.error(error));
            },

            bonoUsuario: function(){
                let url = "/getBonoUsuario";
                axios.get(url)
                        .then((response) => {
                            this.bonosUsuario = response.data;

                            console.log(this.bonosUsuario);
                        });
            },

            contratar: function(codBono){

                if(codBono == 1){
                    let url = "/contrarBono30MinHome";
                    let bono = "Bono30Min";

                    axios.post(url, { bono: bono, codBono: codBono } )
                            .then(function (response) {
                                window.location.replace(response.data);
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                }

                if(codBono == 2){
                    let url = "/contrarBono1hHome";
                    let bono = "Bono1H";

                    axios.post(url, { bono: bono, codBono: codBono } )
                            .then(function (response) {
                                window.location.replace(response.data);
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                }

                if(codBono == 3){
                    let url = "/contrarBono5hHome";
                    let bono = "Bono5H";

                    axios.post(url, { bono: bono, codBono: codBono } )
                            .then(function (response) {
                                window.location.replace(response.data);
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                }

                if(codBono == 4){
                    let url = "/contrarBono10hHome";
                    let bono = "Bono10H";

                    axios.post(url, { bono: bono, codBono: codBono } )
                            .then(function (response) {
                                window.location.replace(response.data);
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                }

                if(codBono == 5){
                    let url = "/contrarBono24hHome";
                    let bono = "Bono24H";

                    axios.post(url, { bono: bono, codBono: codBono } )
                            .then(function (response) {
                                window.location.replace(response.data);
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                }
            },

            renovar: function(){
                let url = "/renovarBonoUsuario";
                axios.post(url)
                     .then((response) => {
                        window.location.replace(response.data);
                     })
                     .catch((error) => console.error(error));
            }
        },
    };
</script>

web browser console

    {data: Array(1), status: 200, statusText: "OK", headers: {…}, config: {…}, …}

app.js:40771 [Vue warn]: Property or method "data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Answer

Probably you should change your code in this way to achieve it:

<div class="panel-body" >
    <div v-for="data in bonosUsuario" :key="data.id">
        Usted tiene contratado el bono: {{ data.tipo }} de {{ data.minutos }} min y aún le quedan {{ data.tiempoRestanteBono }} <br/> Si lo desea puede renovarlo haciendo click en este botón: <button class="btn btn-warning" @click="renovar">Renovar</button>
    </div>
    <div v-if="bonosUsuario.length == 0">
        <h3> Sin Bono activo </h3> Puede contratar uno haciendo click aquí <a href="/estadoBono"><button class="btn btn-danger">Contratar</button></a>
    </div>
</div>