select is not displaying API call data in Vue

Question

I have a select that should display a list of objects returned by an API call, however Vue is not rendering the list. Objects are being stored in the variable, but are not being displayed. Below the code:

HTML

<select id="tipo_empresa" v-model="empresa.tipo_empresa">
    <option value="" disabled selected>Tipo de empresa</option>
    <option v-for="tipo in this.tipos" v-bind:key="tipo.id_em_tipo" v-bind:value="tipo.id_em_tipo">{{ tipo.descricao}}</option>
</select>

JS

<script>
    const axios = require('axios');
    export default {
        data(){
           return {
               tipos: [],
               empresa: {
                   tipo_empresa: ''
               }
           }
        },
        mounted(){
             $(document).ready(function() {
                 $('#tipo_empresa').formSelect();
             });
             this.getTipos();
        },
        methods() {
            popularSelect (){
                axios.get(URL, header)
                .then(res => (this.tipos = res.data));
            }
        }
    }

</script>

Obs.: In my code are the variables of the api call (URL and header). In the Vuedevtools extension for Chrome the variable "types" appears populated, with the objects. If I print the variable on the screen it also displays the objects, but in select it is not working.

Obs2.: In the Edge browser it is working, but in all others it is not.

Answer 1

With the help of a colleague, we discovered a solution. The initialization of the select component was in the Mounted() cycle of Vue. Switch to the updated cycle().

I think I need to study Vue’s life cycle better.

Next, I’ll leave the code JS for future references:

<script>
const axios = require('axios');
export default {
    data(){
       return {
           tipos: [],
           empresa: {
               tipo_empresa: ''
           }
       }
    },
    updated(){
         document.addEventListener('DOMContentLoaded', function() {
             var elems = document.querySelectorAll('#tipo_empresa');
             var options = {};
             var instances = M.FormSelect.init(elems, options);
         });
         this.getTipos();
    },
    methods() {
        popularSelect (){
            axios.get(URL, header)
            .then(res => (this.tipos = res.data));
        }
    }
}

</script>

EDIT

As per @Rgio’s comment, I, too, withdrew the this of the variable of v-for being like this:

HTML

<select id="tipo_empresa" v-model="empresa.tipo_empresa">
    <option value="" disabled selected>Tipo de empresa</option>
    <option v-for="tipo in tipos" v-bind:key="tipo.id_em_tipo" v-bind:value="tipo.id_em_tipo">{{ tipo.descricao}}</option>
</select> 

EDIT 2

I removed Jquery from the project, now the component startup is with pure javascript.