If someone finds it intriguing, the solution is:
Child Component
<template>
<b-container fluid>
<b-form-group
:label="formLabel"
class="mb-1"
label-class="text-center">
<b-row>
<b-col class="pl-2 pr-1">
<b-input-group
size="sm"
сlass="mb-1">
<b-input-group-prepend is-text>
<input
v-model="selectedValue"
:value="oldValue"
type="radio"
@change="sendSelected">
</b-input-group-prepend>
<b-form-input
:value="oldValue"
@input="changeValue('old', $event)" />
</b-input-group>
</b-col>
<b-col class="pl-1 pr-2">
<b-input-group
size="sm"
class="mb-1">
<b-input-group-prepend is-text>
<input
v-model="selectedValue"
:value="newValue"
type="radio"
@change="sendSelected">
</b-input-group-prepend>
<b-form-input
:value="newValue"
@input="changeValue('new', $event)" />
</b-input-group>
</b-col>
</b-row>
</b-form-group>
</b-container>
</template>
<script>
export default {
props: {
value: {
type: Object,
required: true
}
},
data () {
return {
selectedValue: null
}
},
computed: {
newValue () {
return this.value.new
},
oldValue () {
return this.value.old
},
formLabel () {
return this.value.label
}
},
created () {
},
methods: {
sendSelected () {
this.$emit('change', this.selectedValue)
},
changeValue (path, event) {
this.selectedValue = null
this.emitMutationEvent(path, event) //custom event
}
}
}
</script>
Parent Component
<template>
<b-container fluid>
<compare-component
v-for="documentField in documentFields"
:key="documentField.id"
:value="documentField"
@change="setSelectedValue(documentField, ...arguments)"
@mutate="editOriginValues(documentField, ...arguments)" />
</b-container>
</template>
<script>
import CompareComponent from './CompareComponent'
export default {
components: {
CompareComponent
},
mixins: [PropMutationEventMixin],
data () {
return {
reviewDocument: null,
newSessionDocument: null,
oldSessionDocument: null,
documentFields: [
{
id: 1,
old: 'old text 1',
new: 'new text 1',
label: 'text1',
selected: ''
},
{
id: 2,
old: 'old text 2',
new: 'new text 2',
label: 'text 2',
selected: ''
},
{
id: 3,
old: 'old text 3',
new: 'new text 3',
label: 'text 3',
selected: ''
}
]
}
},
methods: {
setSelectedValue (documentField, event) {
documentField.selected = event
},
editOriginValues (documentField, path, newValue) {
documentField[path] = newValue
}
}
}
</script>