modal with bootstrap-vue - vue.js

Question

I need your help solving a problem ...
I'm new to vue and I can't use modal bootstrap-vue.
I need to load a form with the data into my "MODAL" so that I can change it, but I can't load this data by the user ID inside the modal form.
<PageTitle icon="fa fa-cogs" main="Administração" sub="Feriados" />
<b-table hover striped :items="feriados" :fields="fields" small class="mt-0 mb-0">
<template slot="actions" slot-scope="data">
<b-button variant="warning" #click="loadFeriado(data.item)" class="mr-2" size="sm">
<i class="fa fa-pencil"></i>
</b-button>
<b-button variant="info" #click="viewFeriado" class="mr-2" size="sm">
<i class="fa fa-pencil"> Editar</i>
</b-button>
</template>
</b-table>
<div>
<b-modal ref="showFeriado"
title="Visualizar Feriado"
size="xl"
#shown="loadFeriado"
#hidden="reset"
#ok="save"
ok-variant="primary"
cancel-title="Cancelar">
<div>
<input id="feriado-id" type="hidden" v-model="feriado.id"/>
<b-row class="mt-0 mb-0">
<b-col md="6" sm="12">
<b-form-group
label="Data do Feriado:"
label-for="feriado-data"
label-size="sm"
class="mt-0 mb-0">
<v-date-picker v-model="feriado.data" />
</b-form-group>
</b-col>
<b-col md="6" sm="12">
<b-form-group label="Nome:" label-for="feriado-descricao" label-size="sm">
<b-form-input id="feriado-descricao" type="text"
size="sm"
v-model="feriado.descricao" required
:readonly="mode === 'remove'"
placeholder="Informe o nome do Feriado..." />
</b-form-group>
</b-col>
</b-row>
</div>
</b-modal>
</div>
</div>
</template>
<script>
import PageTitle from '../template/PageTitle'
import axios from 'axios'
import { baseApiUrl, showError, userKey } from '#/global'
import moment from 'moment'
export default {
name: 'FeriadoAdmin',
components: {
PageTitle,
moment,
},
data: function() {
return {
mode: 'save',
feriado: {},
feriados: [],
fields: [
{ key: 'id', label: 'Número', sortable: true },
{
key: 'descricao',
label: 'Descrição',
sortable: true
},
{
key: 'data',
label: 'Data',
sortable: true,
formatter: (value, key, item) => {
return moment.utc(value).format('DD/MM/YYYY')
}
},
{
key: 'actions',
label: 'Status'
}
]
}
},
methods: {
viewFeriado () {
this.$refs.showFeriado.show()
},
loadFeriados() {
axios.get(`${baseApiUrl}/feriados`)
.then((list) => {
this.feriados = list.data
})
},
loadFeriado(feriado) {
this.feriado = {
...feriado,
data: moment.utc(feriado.data).toDate()
}
//console.log(feriado)
}
},
mounted() {
this.loadFeriados()
}
}
</script>
<style>
</style>
This console error occurs when attempting to load data into the modal form: