Tengo el siguiente codigo el cual dibuja un html recorriendo una lista de archivos, el <b-form-input que esta en readonly necesito ponerlo en ocasiones en modo de edicion. por lo que en la funcion EditName usando refs trate de poner la propiedad readonly a false y me da el famoso error de mutation.
Aqui mi codigo
<div class="row" v-for="(file,index) in files" :key="file.code">
<div class="col-md-1 align-self-center" style="text-align: center;">
<b-icon icon="eye" aria-hidden="true" v-on:click="OpenDocument(file)" style="cursor: hand;width: 20px; height: 20px;"></b-icon>
</div>
<div class="col-md-4 align-self-center">
<b-input-group size="sm" class="mt-2">
<b-input-group-prepend is-text>
<b-icon icon="brush" aria-hidden="true" v-on:click="EditName(file)"></b-icon>
</b-input-group-prepend>
<b-form-input v-model="file.name" :ref="file.code" readonly></b-form-input>
</b-input-group>
</div>
<div class="col-md-6 align-self-center">
<MdEdit
v-bind:TypeProp="'text'"
v-model="file.description"
v-bind:isReadOnly="false">
</MdEdit>
</div>
<div class="col-md-1 align-items-start">
<button type="button" class="close" aria-label="Close" @click="removeFile(file)">
<span aria-hidden="true">×</span>
</button>
</div>
Intente desde javascript cambiar la propiedad readonly asi:
this.$refs[file.code][0].readonly = false;