Inject property into Vuetify component inside a slot - vue.js

Question

my application has a "view" and "edit" mode, and in the "view" mode, I need to set all of the controls readonly.
I've created an InputWrapper component with a single slot, and my goal is to inject the readonly prop to the v-autocomplete component inside it. In the mounted lifecycle event of the InputWrapper I can access this.$slots.default[0].componentInstance.propsData, but when I set readonly property to "" (which is the value that appears when I set the prop of v-autocomplete directly), nothing happens. I also tried setting that in componentOptions. Is there any way to achieve this?
This is what I currently have:
<template>
<v-col :cols="cols" :class="{ 'input-wrapper': true, readonly: isReadOnly }">
<slot></slot>
</v-col>
</template>
<script>
export default {
name: 'InputWrapper',
mounted() {
if (this.isReadOnly) {
this.$set(this.$slots.default[0].componentOptions.propsData, 'readonly', '');
}
},
computed: {
isReadOnly() {
return this.readonly || this.$route.params.action === 'view';
}
},
props: {
readonly: {
type: Boolean
},
cols: {
type: Number
}
}
};
</script>

Answer 1

In the end, I decided to extend VAutocomplete, and override isReadonly computed property. Since I have a special case where I need for a control to be enabled in the view mode as well, I set the default value for readonly property to null.
<script>
import { VAutocomplete } from 'vuetify/lib';
export default VAutocomplete.extend({
name: 'auto-complete',
computed: {
isReadonly() {
return
this.readonly ||
(this.$route.params.mode == 'view' && this.readonly !== false);
}
},
props: {
readonly: {
type: Boolean,
default: null
}
}
});
</script>