How to load select in VueJs

I've been able to implement the edit button, by clicking the button it will load all records that exist in a database in a form, I can load all the fields except selects .

The problem is that I am not aware of loading the select from VueJS

It gives this error message in the browser consoles saying that I did not declare the variable types

[Vue warn]: Property or method "tipos" 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.

(found in <Root>)
warn @ vue.js:577

But it's declared in the code snippet below and while noting that it's the same variable I'm using to save the types is working.

new Vue({
            el: '#crud',
            created: function() {
                    this.getRegistros();
            },
            data: {
                    registros: [],
                    newDesc: '',
                    newPreco: '',
                    newQtdQuartos: '',
                    newTipo: '',
                    newFinalidade: '',
                    newLogradouroEndereco: '',
                    newBairroEndereco: '',
                    preencherRegistro: {
                        'id': '',
                        'descricao': '',
                        'preco': '',
                        'qtdQuartos': '',
                        'tipos': ''    ,// acho que meu problema está aqui******
                        'finalidade': '',// acho que meu problema está aqui******
                        'logradouroEndereco': '',
                        'bairroEndereco': ''
                    },
                    errors: []
            },

            methods: {
                    getRegistros: function() {
                        var urlRegistro = 'imovels';
                        axios.get(urlRegistro).then(response => {
                                this.registros = response.data
                        });
                    },
                    editarRegistro: function(registro) {


                             this.preencherRegistro.id = registro.id;
                             this.preencherRegistro.descricao = registro.descricao;
                             this.preencherRegistro.preco = registro.preco;
                             this.preencherRegistro.qtdQuartos = registro.qtdQuartos;
                             this.preencherRegistro.tipos = registro.tipo;
                             this.preencherRegistro.finalidade = registro.finalidade;
                             this.preencherRegistro.logradouroEndereco = registro.logradouroEndereco;
                             this.preencherRegistro.bairroEndereco = registro.bairroEndereco;
                             $('#edit').modal('show');
                    },
                    updateRegistro: function(id) {
                            alert('editando o registro');
                    },
                     createRegistro: function() {
                         var url = 'imovels';
                         axios.post(url, {
                            descricao: this.newDesc,
                            preco: this.newPreco,
                            qtdQuartos: this.newQtdQuartos,
                            tipos: this.newTipo,
                            finalidade: this.newFinalidade,
                            logradouroEndereco:  this.newLogradouroEndereco,
                          bairroEndereco:     this.newBairroEndereco
                         }).then(response => {
                             this.getRegistros();
                             this.newDesc = '';
                             this.newPreco = '';
                             this.newQtdQuartos = '';
                             this.newTipo = '';
                             this.newFinalidade = '';
                             this.newLogradouroEndereco = '';
                             this.newBairroEndereco = '';
                             this.errors = [];
                             $('#create').modal('hide');// efetuar a execução
                             toastr.success('Novo imóvel criado com sucesso!');
                         }).catch(error => {
                                 this.errors = error.response.data
                         });
                     },
                    deletarRegistro: function(registro) {
                             var url = 'imovels/' + registro.id;
                             axios.delete(url).then(response => {
                                 this.getRegistros();
                                 toastr.success('Registro excluído com sucesso');
                             });
                    }
            }
        });

I think the problem is here at the time of assembling select, I've already tried it in several ways;

  <div class="row">
                                          <div class="col-md-6">
                                                <div class="form-group">
                                                      <label for="tipos">Tipo do Imóvel</label>
                                                      <select class="form-control" name="tipos" id="select-tipo" v-model="preencherRegistro.tipos">
                                                       <option v-for="tipo in tipos" :value="tipo">@{{ tipos }}</option>
                                                    </select>
                                                    <span v-for="error in errors" class="text-danger">@{{ error }}</span>
                                                </div>
                                          </div>

I accept suggestion. For those who want to see my repository in the Github